/* ============================================================
   腾蛇-SVIP 系统样式表 — 统一版 2026-09
   配色：浅灰蓝背景 + 白色卡片 + 靛蓝主色 + 天蓝强调
   ============================================================ */

/* ========== CSS 变量 ========== */
:root {
    --bg-primary: #F5F7FA;
    --bg-card: #FFFFFF;
    --bg-hover: #F8FAFC;
    --border-light: #EDF1F6;
    --border-medium: #DFE6EF;
    --text-primary: #1E293B;
    --text-secondary: #5B6B7C;
    --text-muted: #9AA8B8;
    --primary: #0084FF;
    --primary-hover: #0069D9;
    --primary-light: #E8F3FF;
    --accent: #4FACFE;
    --accent-light: #E6F6FF;
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --purple: #0084FF;
    --purple-hover: #0069D9;
    --purple-light: #E8F3FF;
    --purple-border: #C9E4FF;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== 基础重置 ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 13px;
    min-width: 1024px;
    overflow: hidden;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }

/* ========== 登录页 ========== */
.login-body {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%);
}
.login-container { width: 100%; max-width: 420px; padding: 20px; }
.login-card {
    background: #fff; border-radius: 12px; padding: 40px 36px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.login-header { text-align: center; margin-bottom: 32px; }
.login-logo {
    width: 64px; height: 64px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: #fff; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: bold;
    margin: 0 auto 16px;
}
.login-header h1 { font-size: 22px; color: var(--text-primary); margin-bottom: 6px; }
.login-subtitle { font-size: 13px; color: var(--text-muted); }
.login-form .form-group { margin-bottom: 20px; }
.login-form label { display: block; margin-bottom: 6px; color: #555; font-weight: 500; }
.login-form input {
    width: 100%; padding: 11px 14px;
    border: 1px solid #ddd; border-radius: 8px;
    font-size: 14px; transition: border-color 0.2s;
}
.login-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
.login-error { background: #fee; color: #c33; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; }
.login-footer { text-align: center; margin-top: 24px; color: #aaa; font-size: 12px; }

/* ========== 侧边栏 ========== */
.sidebar {
    background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
    width: 230px; position: fixed; left: 0; top: 0; bottom: 0;
    z-index: 100; box-shadow: 2px 0 12px rgba(0,0,0,0.1);
    display: flex; flex-direction: column;
}
.sidebar-logo {
    padding: 20px 18px; display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.logo-icon {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: bold; font-size: 16px;
    box-shadow: 0 4px 12px rgba(99,102,241,0.4);
}
img.logo-icon { border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); }
.logo-text { color: #F8FAFC; font-size: 16px; font-weight: 600; letter-spacing: 0.5px; }

.sidebar-nav { flex: 1; padding: 12px 10px; overflow-y: auto; }
.sidebar-beian {
    flex-shrink: 0; padding: 7px 10px; text-align: center;
    font-size: 10px; line-height: 1.5;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.sidebar-beian a { color: #475569; text-decoration: none; }
.sidebar-beian a:hover { color: #94A3B8; }
.nav-section {
    color: #64748B; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px;
    padding: 14px 12px 6px;
}
.nav-section.nav-disabled { opacity: 0.5; }
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: var(--radius-md);
    color: #CBD5E1; font-size: 14px; font-weight: 500;
    transition: var(--transition); margin-bottom: 2px; cursor: pointer;
}
.nav-item:hover { background: rgba(255,255,255,0.06); color: #F1F5F9; transform: translateX(2px); }
.nav-item.active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: white; box-shadow: 0 4px 12px rgba(99,102,241,0.35);
}
.nav-item .nav-icon { font-size: 16px; width: 20px; text-align: center; }
.nav-item-disabled { opacity: 0.4; cursor: not-allowed; }
.nav-item-disabled:hover { background: transparent; transform: none; }

/* ========== 主内容区 ========== */
/* 2026-09-19：原来 min-height:100vh 不限高 → 内容区被撑破、底部够不到。
   改成限高 100vh，让 .content-area/.tab-content 的 flex:1 + overflow-y:auto 真正生效。 FIT3_20260919 */
.main-wrapper { margin-left: 230px; height: 100vh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ========== 顶栏 ========== */
.topbar {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-light);
    padding: 12px 24px; display: flex; justify-content: space-between; align-items: center;
    position: sticky; top: 0; z-index: 50;
}
.current-module {
    font-size: 18px; font-weight: 700;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.topbar-right { display: flex; align-items: center; gap: 16px; }

.date-filter-wrapper { font-size: 13px; color: var(--text-secondary); }
.month-filter-select {
    padding: 6px 12px; border: 1px solid var(--border-medium); border-radius: var(--radius-sm);
    background: white; font-size: 13px; color: var(--text-primary);
    cursor: pointer; transition: var(--transition);
}
.month-filter-select:hover { border-color: var(--primary); }

.user-info { display: flex; align-items: center; gap: 8px; }
.user-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 600; font-size: 13px;
}
img.user-avatar { object-fit: cover; border: 2px solid var(--primary); }
.user-name { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.user-role { font-size: 12px; color: var(--text-muted); background: var(--primary-light); padding: 2px 8px; border-radius: 10px; }
.logout-btn {
    color: var(--text-secondary); font-size: 13px; padding: 6px 12px;
    border-radius: var(--radius-sm); transition: var(--transition);
}
.logout-btn:hover { background: #FEF2F2; color: var(--danger); }

/* ========== 标签页 ========== */
.tab-nav {
    background: white; padding: 0 24px; border-bottom: 1px solid var(--border-light);
    display: flex; gap: 2px; overflow-x: auto; flex-shrink: 0;
}
.tab-btn {
    padding: 12px 16px; border: none; background: transparent;
    color: var(--text-secondary); font-size: 13px; font-weight: 500;
    cursor: pointer; border-bottom: 2px solid transparent;
    transition: var(--transition); white-space: nowrap; position: relative;
}
.tab-btn:hover { color: var(--primary); background: var(--primary-light); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.tab-btn.hidden { display: none !important; }

/* ========== 通用按钮 ========== */
.btn {
    padding: 7px 16px; border: none; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: var(--transition); display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: white; box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}
.btn-primary:hover { box-shadow: 0 4px 12px rgba(99,102,241,0.4); }

.btn-secondary { background: white; color: var(--text-primary); border: 1px solid var(--border-medium); }
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

.btn-danger {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    color: white; box-shadow: 0 2px 8px rgba(239,68,68,0.3);
}
.btn-danger:hover { box-shadow: 0 4px 12px rgba(239,68,68,0.4); }

.btn-purple {
    background: linear-gradient(135deg, var(--purple) 0%, var(--purple-hover) 100%);
    color: white; box-shadow: 0 2px 8px rgba(124,58,237,0.3);
}
.btn-purple:hover { box-shadow: 0 4px 12px rgba(124,58,237,0.4); }

.btn-warning { background: var(--warning); color: white; }
.btn-warning:hover { background: #d97706; }

.btn-success { background: var(--success); color: white; }
.btn-success:hover { background: #059669; }

.btn-gray { background: #6b7280; color: white; }
.btn-gray:hover { background: #4b5563; }

.btn-xs { padding: 4px 10px; font-size: 12px; }
.btn-block { width: 100%; padding: 12px; font-size: 15px; }

/* ========== 工具栏 ========== */
.toolbar {
    background: white; padding: 12px 24px; border-bottom: 1px solid var(--border-light);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0; min-height: 44px;
}
.toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar-group.hidden { display: none !important; }
.toolbar-hint { font-size: 13px; color: var(--text-secondary); margin-right: 4px; }

.toolbar-hr {
    padding: 10px 16px; background: white; border-bottom: 1px solid var(--border-light);
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap; flex-shrink: 0;
}
.toolbar-hr button:not([class]) {
    padding: 6px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500;
    border: 1px solid var(--border-medium); background: white; color: var(--text-primary); cursor: pointer;
    transition: var(--transition);
}
.toolbar-hr button:not([class]):hover {
    border-color: var(--primary); color: var(--primary); background: var(--primary-light);
}

/* ========== 复选框 & 筛选 ========== */
.checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.checkbox-label input { accent-color: var(--primary); cursor: pointer; }
.checked-summary {
    font-size: 12px; color: var(--primary); font-weight: 600;
    background: var(--primary-light); padding: 4px 10px; border-radius: 12px;
}

.sub-filter-bar { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.sub-filter-bar.hidden { display: none !important; }
.filter-btn {
    padding: 5px 12px; border: 1px solid var(--border-medium); background: white;
    border-radius: var(--radius-sm); font-size: 12px; cursor: pointer;
    transition: var(--transition); color: var(--text-secondary);
}
.filter-btn:hover { border-color: var(--primary); color: var(--primary); }

.daily-date-select {
    padding: 6px 12px; border: 1px solid var(--border-medium); border-radius: var(--radius-sm);
    font-size: 13px; cursor: pointer; transition: var(--transition);
}
.daily-date-select:hover { border-color: var(--primary); }
.daily-total-fee { font-size: 13px; color: var(--primary); font-weight: 600; }

.hidden { display: none !important; }

/* ========== 内容区 ========== */
.content-area {
    flex: 1; padding: 10px 16px; background: var(--bg-primary);
    display: flex; flex-direction: column; min-height: 0;
}
.tab-content {
    display: none; background: white; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); border: 1px solid var(--border-light);
    overflow: hidden; animation: fadeIn 0.3s ease;
    flex: 1; min-height: 0; flex-direction: column;
}
/* 2026-09-19：原来 min-height:600px 在矮屏会强制撑高、把底部顶出屏幕；
   改为不设最小高 + 纵向滚动兜底（表格页仍由 App.fitGridHeights 精确算命，不会溢出）。 FIT2_20260919 */
.tab-content.active { display: flex; min-height: 0; overflow-y: auto; overflow-x: hidden; }

/* 2026-09-18：高度改为由 JS（App.fitGridHeights）按“实际可用空间”计算。
   原来写死 calc(100vh - 185px) 少算了工具栏/摘要条，表格底部被顶出屏幕，
   而 body 是 overflow:hidden —— 结果最后几行既看不见也滚不到。 */
.grid-container { width: 100%; flex: 1; height: calc(100vh - 185px); min-height: 240px; overflow: hidden; }
/* 内层必须用 flex 撑开：实测在这层嵌套下 height:100% 解析不成（ag-grid 容器的
   百分比高度失效，wrapper 会塌成 2px —— 行渲染了但看不见）。用 flex:1 才稳。 */
.grid-container { display: flex; flex-direction: column; }
.grid-container .ag-root-wrapper { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; }
.ag-root-wrapper { min-height: 240px !important; }
#gridPurchaseCommission .ag-root-wrapper { min-height: 300px !important; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ========== 底部状态栏 ========== */
.statusbar {
    background: white; border-top: 1px solid var(--border-light);
    padding: 8px 24px; display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; color: var(--text-secondary); flex-shrink: 0;
}
#selectionStats { color: var(--primary); font-weight: 600; }

/* ========== AG Grid 主题 ========== */
.ag-theme-alpine {
    --ag-background-color: white;
    --ag-header-background-color: #F8FAFC;
    --ag-header-foreground-color: var(--text-primary);
    --ag-row-hover-color: var(--primary-light);
    --ag-selected-row-background-color: #DBEAFE;
    --ag-odd-row-background-color: #FCFCFD;
    --ag-border-color: var(--border-light);
    --ag-header-column-resize-handle-color: var(--border-medium);
    --ag-font-size: 13px;
    --ag-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
    --ag-range-selection-border-color: var(--primary);
    --ag-range-selection-background-color: rgba(99,102,241,0.1);
    --ag-range-selection-background-color-2: rgba(99,102,241,0.15);
    --ag-range-selection-background-color-3: rgba(99,102,241,0.2);
    --ag-range-selection-background-color-4: rgba(99,102,241,0.25);
}
.ag-theme-alpine .ag-header {
    background: #FFFFFF !important; border-bottom: 1px solid var(--border-light) !important;
    font-family: 'Microsoft YaHei', 'Segoe UI', system-ui, sans-serif !important;
}
.ag-theme-alpine .ag-header-row { background: transparent !important; }
.ag-theme-alpine .ag-header-cell {
    background: #F8FAFC !important; border-right: 1px solid #EEF2F7 !important;
    border-bottom: 1px solid var(--border-light) !important;
    padding: 0 10px !important; transition: background 0.15s ease;
}
.ag-theme-alpine .ag-header-cell:hover { background: #F1F5F9 !important; }
.ag-theme-alpine .ag-header-cell-text {
    font-size: 13px !important; font-weight: 600 !important;
    color: #475569 !important; letter-spacing: 0.2px;
    white-space: normal !important; line-height: 1.35;
}
.ag-theme-alpine .ag-header-cell-label { justify-content: center !important; }
.ag-theme-alpine .ag-header-icon { color: #94A3B8 !important; opacity: 1; transition: opacity 0.15s; }
.ag-theme-alpine .ag-sort-ascending-icon, .ag-theme-alpine .ag-sort-descending-icon { color: var(--primary) !important; }
.ag-theme-alpine .ag-header-cell-menu-button { color: #64748B !important; opacity: 1; transition: all 0.15s; }

.ag-theme-alpine .ag-row { transition: background-color 0.15s ease; }
.ag-theme-alpine .ag-cell {
    padding: 8px; border-right: 1px solid #F1F5F9;
    display: flex !important; align-items: center !important; justify-content: center !important;
    text-align: center !important; line-height: 1.4; user-select: none; -webkit-user-select: none;
}
.ag-theme-alpine .ag-cell-wrapper { justify-content: center !important; text-align: center !important; width: 100%; }
.ag-theme-alpine .ag-cell-focus { border: 1px solid var(--primary) !important; border-radius: 3px; }
.ag-theme-alpine .ag-cell.ts-range-selected {
    /* RANGE_FIX_20260917 蛇哥选定 B 档：底色 15% -> 28%，描边 40% -> 55% */
    background-color: rgba(99,102,241,0.28) !important;
    outline: 1px solid rgba(99,102,241,0.55); outline-offset: -1px;
}
.ag-theme-alpine .ag-header-container { border-bottom: none !important; }

/* WPS 筛选漏斗图标 */
.wps-filter-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; margin-left: 3px; cursor: pointer;
    color: #A8B6C7; transition: all 0.15s ease; border-radius: 3px;
    border: 0; padding: 0; background: transparent;
}
.wps-filter-icon:hover { color: var(--primary); background: rgba(99,102,241,0.08); }
.wps-filter-icon svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wps-filter-icon.wps-filter-active { color: var(--primary); background: rgba(99,102,241,0.1); }

/* WPS 筛选面板 */
.wps-filter-panel {
    position: absolute; z-index: 99999; background: white;
    border: 1px solid var(--border-light); border-radius: var(--radius-md);
    box-shadow: 0 16px 42px rgba(15,35,65,.18); width: 300px; max-height: 460px;
    display: flex; flex-direction: column; font-size: 13px;
    animation: slideDown 0.2s ease; overflow: hidden;
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.wps-filter-header {
    padding: 10px 14px; font-weight: 600; border-bottom: 1px solid var(--border-light);
    background: linear-gradient(135deg, var(--primary-light) 0%, white 100%); color: var(--primary);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.wps-filter-count { color: var(--text-muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
.wps-filter-search { padding: 10px 14px; border-bottom: 1px solid var(--border-light); }
.wps-filter-search-input {
    width: 100%; padding: 7px 10px; border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm); font-size: 13px; box-sizing: border-box; transition: var(--transition);
}
.wps-filter-search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
.wps-filter-actions { padding: 8px 14px; border-bottom: 1px solid var(--border-light); display: flex; gap: 8px; }
.wps-filter-btn {
    padding: 4px 10px; border: 1px solid var(--border-medium); background: white;
    border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; transition: var(--transition);
}
.wps-filter-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.wps-filter-list { flex: 1; overflow-y: auto; padding: 4px 0; max-height: 270px; }
.wps-filter-item { display: flex; align-items: center; min-height: 32px; padding: 6px 14px; cursor: pointer; gap: 8px; transition: var(--transition); }
.wps-filter-item:hover { background: var(--primary-light); }
.wps-filter-checkbox { cursor: pointer; accent-color: var(--primary); }
.wps-filter-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wps-filter-only {
    display: inline-block; flex: 0 0 auto; border: 0; background: transparent; color: var(--primary);
    padding: 2px 4px; border-radius: 3px; cursor: pointer; font-size: 11px; white-space: nowrap;
}
.wps-filter-item:hover .wps-filter-only, .wps-filter-only:focus-visible { display: inline-block; }
.wps-filter-only:hover { background: var(--primary-light); }
.wps-filter-empty { padding: 20px; text-align: center; color: var(--text-muted); }
.wps-filter-footer {
    padding: 10px 14px; border-top: 1px solid var(--border-light);
    display: flex; justify-content: flex-end; gap: 8px; background: #F8FAFC;
}
.wps-filter-apply { background: var(--primary); color: white; border-color: var(--primary); }
.wps-filter-apply:hover { background: var(--primary-hover); color: white; }
.wps-filter-footer .wps-filter-btn { min-width: 62px; }
.grid-filter-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.grid-filter-status { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.grid-filter-clear { display: inline-flex; }

/* WPS 居中表头 */
.wps-center-header .ag-header-cell-text {
    text-align: center !important; display: flex !important; align-items: center !important;
    justify-content: center !important; white-space: normal !important; line-height: 1.3 !important; padding: 4px 0 !important;
}

/* ========== 弹窗 ========== */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15,23,42,0.5); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000; animation: fadeIn 0.2s ease;
}
.modal-overlay.hidden { display: none; }

.modal-dialog {
    background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    width: 90%; max-width: 500px; max-height: 80vh;
    display: flex; flex-direction: column; animation: modalIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modalIn { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.modal-header {
    padding: 16px 20px; border-bottom: 1px solid var(--border-light);
    display: flex; justify-content: space-between; align-items: center;
}
.modal-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-primary); }
.modal-close {
    background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-muted);
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.modal-close:hover { background: var(--bg-primary); color: var(--text-primary); }
.modal-body { padding: 20px; flex: 1; overflow-y: auto; }
.modal-hint { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; line-height: 1.6; }
.import-textarea {
    width: 100%; min-height: 150px; padding: 10px;
    border: 1px solid var(--border-medium); border-radius: var(--radius-sm);
    font-family: 'Consolas', 'Monaco', monospace; font-size: 13px; resize: vertical; transition: var(--transition);
}
.import-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--border-light); display: flex; justify-content: flex-end; gap: 10px; }

/* modal-box（HR 小弹窗） */
.modal-box { background: white; border-radius: var(--radius-lg); padding: 24px; min-width: 360px; max-width: 90%; box-shadow: var(--shadow-lg); animation: modalIn 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.modal-box h3 { margin: 0 0 16px 0; font-size: 16px; color: var(--text-primary); }
.modal-body label { display: block; margin-bottom: 12px; font-size: 13px; color: #374151; }
.modal-body input { width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: var(--radius-sm); margin-top: 4px; box-sizing: border-box; }
.modal-body input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
.modal-footer button {
    padding: 8px 20px; border-radius: var(--radius-sm); border: 1px solid #d1d5db;
    background: white; cursor: pointer; font-size: 13px; transition: var(--transition);
}
.modal-footer button:hover { border-color: var(--primary); color: var(--primary); }
.modal-footer button:last-child { background: var(--primary); color: white; border-color: var(--primary); }

/* ========== 筛选弹窗 ========== */
.filter-popup {
    position: fixed; background: white; border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); border: 1px solid var(--border-light);
    z-index: 1500; width: 240px; overflow: hidden; animation: slideDown 0.2s ease;
}
.filter-popup.hidden { display: none; }
.filter-popup-header { padding: 10px 14px; border-bottom: 1px solid var(--border-light); background: var(--primary-light); }
.filter-search { width: 100%; padding: 6px 10px; border: 1px solid var(--border-medium); border-radius: var(--radius-sm); font-size: 13px; }
.filter-search:focus { outline: none; border-color: var(--primary); }
.filter-popup-list { max-height: 250px; overflow-y: auto; padding: 6px 0; }
.filter-item { display: flex; align-items: center; gap: 8px; padding: 5px 12px; cursor: pointer; font-size: 12px; }
.filter-item:hover { background: var(--primary-light); }
.filter-item input { cursor: pointer; accent-color: var(--primary); }
.filter-popup-footer { padding: 10px 14px; border-top: 1px solid var(--border-light); display: flex; gap: 6px; justify-content: flex-end; background: #F8FAFC; }

/* ========== 搜索框 ========== */
.search-box {
    position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
    background: white; padding: 12px 16px; border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); z-index: 1500;
    display: flex; align-items: center; gap: 10px; animation: slideDown 0.2s ease;
}
.search-box.hidden { display: none; }
.search-box input { width: 300px; padding: 8px 12px; border: 1px solid var(--border-medium); border-radius: var(--radius-sm); font-size: 14px; }
.search-box input:focus { outline: none; border-color: var(--primary); }

/* ========== Toast 提示 ========== */
.toast {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
    background: white; padding: 12px 24px; border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); border-left: 4px solid var(--primary);
    font-size: 14px; font-weight: 500; color: var(--text-primary);
    z-index: 2000; animation: toastIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.toast.hidden { display: none; }
.toast-success { border-left-color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-info { border-left-color: var(--accent); }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(-20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ========== 用户管理页 ========== */
.page-container { padding: 24px; max-width: 1200px; margin: 0 auto; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-header h1 { font-size: 22px; color: var(--text-primary); }
.card { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); overflow: hidden; }
.card-header { padding: 16px 20px; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { background: #f5f7fa; padding: 12px 16px; text-align: left; font-weight: 600; color: #555; border-bottom: 2px solid var(--border-light); font-size: 13px; }
.data-table td { padding: 12px 16px; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
.data-table tr:hover { background: var(--bg-hover); }
.role-badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.role-admin { background: #fde8e8; color: #c0392b; }
.role-operator { background: #e8f4fd; color: #0078d7; }
.role-clerk { background: #e8f8e8; color: #27ae60; }

.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 500; color: #555; font-size: 13px; }
.form-group input, .form-group select { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; }
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary); }
.form-group small { color: #999; font-weight: normal; }

/* ========== 月总结合计行 ========== */
.monthly-grid-wrapper { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.monthly-grid-wrapper .grid-container { flex: 1; min-height: 0; }
.monthly-total-row {
    flex-shrink: 0;
    background: linear-gradient(180deg, #EEF2FF, #E0E7FF);
    border-top: 2px solid var(--primary); padding: 10px 0;
    font-weight: 600; color: var(--text-primary);
    display: flex; align-items: center; justify-content: space-around;
    font-size: 13px; min-height: 44px;
}
.monthly-total-row .total-cell { flex: 1; text-align: center; padding: 0 4px; }
.monthly-total-row .total-label { color: var(--primary); font-weight: 700; }

/* ========== 考勤工资 ========== */
.content-hr { display: none; flex: 1; min-height: 0; flex-direction: column; background: white; }
.content-hr.active { display: flex; min-height: 600px; }
.content-hr .grid-container { flex: 1; min-height: 500px; width: 100%; }

/* ========== 图片缩略图 ========== */
.img-thumb-list { display: flex; gap: 4px; align-items: center; justify-content: center; }
.img-thumb { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; cursor: pointer; border: 1px solid #e5e7eb; }
.upload-img-btn {
    padding: 4px 8px; font-size: 11px; border: 1px solid var(--primary);
    color: var(--primary); background: white; border-radius: 4px; cursor: pointer; transition: var(--transition);
}
.upload-img-btn.small { width: 28px; height: 28px; padding: 0; font-size: 16px; line-height: 1; }
.upload-img-btn:hover { background: var(--primary); color: white; }

/* ========== 采购管理 ========== */
.content-purchase { overflow-y: auto !important; max-height: calc(100vh - 120px); }
.content-purchase > * { flex-shrink: 0; }
.content-purchase .po-cards-list { padding: 12px 0; }

.purchase-stats-row { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.purchase-stats-card {
    background: white; border: 1px solid var(--border-light); border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); padding: 14px 18px;
    display: flex; align-items: center; gap: 12px; min-width: 160px; flex: 1;
    transition: transform 0.15s, box-shadow 0.15s;
}
.purchase-stats-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.purchase-stat-primary { border-left: 4px solid var(--purple); }
.purchase-stat-icon {
    width: 40px; height: 40px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: white; flex-shrink: 0;
}
.purchase-stat-info { display: flex; flex-direction: column; }
.purchase-stat-label { font-size: 12px; color: #6b7280; margin-bottom: 2px; }
.purchase-stat-value { font-size: 20px; font-weight: bold; color: #111827; }
.purchase-stat-primary .purchase-stat-value { color: var(--purple); }

.purchase-filter-select { padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid #ddd; font-size: 13px; background: white; transition: var(--transition); }
.purchase-filter-select:hover { border-color: var(--primary); }
.purchase-filter-input { padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid #ddd; font-size: 13px; transition: var(--transition); }
.purchase-filter-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.08); }
.purchase-hint { color: #9ca3af; font-size: 12px; margin-left: 8px; font-style: italic; }

/* 采购单卡片 */
.po-cards-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; min-height: 150px; }
.po-card {
    background: #fff; border-radius: var(--radius-md); box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    padding: 14px 18px; transition: box-shadow 0.2s; border-left: 4px solid var(--purple);
}
.po-card:hover { box-shadow: 0 4px 14px rgba(124,58,237,0.12); }
.po-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.po-card-order-no { font-size: 16px; font-weight: 700; color: var(--purple); }
.po-card-meta { font-size: 13px; color: #6b7280; }
.po-card-badges { display: flex; gap: 6px; }
.po-card-mid { display: flex; gap: 24px; margin: 8px 0; padding: 8px 0; border-top: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6; font-size: 13px; }
.po-card-mid-item { display: flex; flex-direction: column; }
.po-card-mid-label { color: #9ca3af; font-size: 11px; }
.po-card-mid-value { font-weight: 600; color: #374151; font-size: 14px; }
.po-card-mid-value.diff { color: var(--danger); }
.po-card-bottom { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.po-card-btn { padding: 5px 14px; border-radius: var(--radius-sm); font-size: 12px; cursor: pointer; border: none; font-weight: 500; transition: var(--transition); }
.po-card-btn.view { background: #f3f4f6; color: #374151; }
.po-card-btn.view:hover { background: #e5e7eb; }
.po-card-btn.edit { background: var(--purple); color: #fff; }
.po-card-btn.edit:hover { background: var(--purple-hover); }
.po-card-btn.delete { background: var(--danger); color: #fff; }
.po-card-btn.delete:hover { background: #dc2626; }
.po-empty { text-align: center; padding: 40px; color: var(--text-muted); font-size: 14px; }

/* 快递区块 */
.po-express-block { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.po-express-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.po-express-no-input { flex: 1; max-width: 300px; padding: 6px 10px; border: 2px solid var(--purple); border-radius: 6px; font-weight: 600; font-size: 13px; }
.po-express-remark-input { flex: 1; margin-left: 8px; padding: 6px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 12px; }
.po-express-remove { background: var(--danger); color: #fff; border: none; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; }

/* 产品表格 */
.po-product-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.po-product-table th { background: #f8f9fa; padding: 6px 8px; text-align: center; border: 1px solid #e5e7eb; font-weight: 600; color: #6b7280; }
.po-product-table td { padding: 4px 6px; border: 1px solid #e5e7eb; text-align: center; }
.po-product-table input { width: 100%; padding: 4px 6px; border: 1px solid #ddd; border-radius: 4px; font-size: 12px; text-align: center; }
.po-product-table input.est-input { border-color: var(--purple); }
.po-product-table input.act-input { border-color: #3b82f6; }
.po-product-table .diff-cell { color: var(--danger); font-weight: 600; }
/* 采购单价缺失告警  PO_ZEROPRICE_20260921 */
.po-product-table input.po-price-missing {
    border: 2px solid #ef4444 !important;
    background: #fef2f2 !important;
    animation: poPriceBlink 1.4s ease-in-out infinite;
}
.po-param-field { display:flex; align-items:center; gap:4px; min-width:0; font-size:10px; color:#64748B; white-space:nowrap; }
.po-param-field span { flex:0 0 auto; }
.po-param-field input { flex:1; min-width:0; width:0; padding:3px 5px; border:1px solid #D6DEE8; border-radius:4px; font-size:11px; text-align:right; }
.po-param-field input:focus { border-color:var(--primary); box-shadow:0 0 0 2px rgba(22,119,255,.10); outline:none; }
@keyframes poPriceBlink {
    0%, 100% { background: #fef2f2 !important; }
    50%      { background: #fee2e2 !important; }
}
.po-zero-price-tip {
    display: none; width: 100%; margin-bottom: 8px; padding: 8px 12px;
    background: #fef2f2; border: 1px solid #fecaca; border-left: 4px solid #ef4444;
    border-radius: 6px; color: #b91c1c; font-size: 12.5px; font-weight: 600; line-height: 1.5;
}
.po-add-product-btn { margin-top: 6px; background: #f3f4f6; color: var(--purple); border: 1px dashed var(--purple); padding: 4px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.po-item-row input, .po-item-row select {
    width: 100%; padding: 4px 6px; border: 1px solid transparent; border-radius: 3px;
    font-size: 12px; text-align: center; background: transparent;
}
.po-item-row input:focus, .po-item-row select:focus { border-color: var(--primary); background: white; outline: none; }
.po-item-row .auto-cell { background: #f8f8f8; color: #666; font-weight: bold; }

/* 采购汇总维度按钮 */
.ps-dim-btn {
    padding: 6px 14px; border: 1px solid #ddd; border-radius: var(--radius-sm);
    background: white; cursor: pointer; font-size: 13px; transition: var(--transition);
}
.ps-dim-btn:hover { background: var(--bg-hover); border-color: var(--primary); color: var(--primary); }
.ps-dim-btn.active { background: var(--primary); color: white; border-color: var(--primary); }

/* 采购统计卡片 */
.stat-card { background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 20px; min-width: 140px; flex: 1; }
.stat-card .stat-label { font-size: 12px; color: #6b7280; margin-bottom: 4px; }
.stat-card .stat-value { font-size: 20px; font-weight: bold; color: #111827; }

/* 自动联想下拉 */
.ac-dropdown {
    position: absolute; z-index: 2000; background: #fff;
    border: 1px solid #e5e7eb; border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg); max-height: 200px; overflow-y: auto; min-width: 200px;
}
.ac-dropdown-item { padding: 8px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #f3f4f6; transition: var(--transition); }
.ac-dropdown-item:hover { background: #f3e8ff; }
.ac-dropdown-item .ac-sku { color: #9ca3af; font-size: 11px; margin-left: 8px; }
.po-library-linked { border-color:#52c41a !important; background:#f6ffed !important; }

/* ========== 电商模块 ========== */
.ecom-subtab {
    padding: 8px 16px; border: none; background: none; cursor: pointer;
    font-size: 13px; font-weight: 500; color: var(--text-secondary);
    border-bottom: 2px solid transparent; transition: var(--transition);
}
.ecom-subtab:hover { color: var(--primary); }
.ecom-subtab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

.ec-btn {
    padding: 7px 16px; border: none; border-radius: var(--radius-sm);
    background: var(--primary); color: white; cursor: pointer; font-size: 13px;
    font-weight: 500; transition: var(--transition);
}
.ec-btn:hover { background: var(--primary-hover); transform: translateY(-1px); }
.ec-btn-ghost {
    background: white; color: var(--text-primary); border: 1px solid var(--border-medium);
}
.ec-btn-ghost:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); transform: translateY(-1px); }

/* ========== 报销模块筛选按钮 ========== */
.exp-filter-btn {
    padding: 6px 16px; border-radius: 20px; border: 1px solid #ddd;
    cursor: pointer; font-size: 13px; background: #f3f4f6; color: #333;
    transition: var(--transition);
}
.exp-filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.exp-filter-btn.active { background: var(--primary); color: white; border-color: var(--primary); }

/* ========== 滚动条美化 ========== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #F1F5F9; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ========== 加载骨架屏 ========== */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* 按钮加载状态 */
.btn.loading { pointer-events: none; opacity: 0.7; }
.btn.loading::after {
    content: ''; width: 14px; height: 14px; margin-left: 6px;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%; animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== 响应式 ========== */
.sidebar-toggle {
    display: none; background: none; border: none; font-size: 22px; line-height: 1;
    cursor: pointer; padding: 4px 8px; margin-right: 8px; color: var(--text-primary);
}
.sidebar-mask { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 99; }

@media (max-width: 1200px) {
    .sidebar { width: 200px; }
    .main-wrapper { margin-left: 200px; }
}

@media (max-width: 768px) {
    .sidebar-toggle { display: inline-block; }
    html, body { max-width: 100vw; overflow-x: hidden; }
    body { min-width: 0; overflow-y: auto; }
    .sidebar { transform: translateX(-100%); transition: transform 0.25s ease; width: 220px; }
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open .sidebar-mask { display: block; }
    .main-wrapper { margin-left: 0; min-width: 0; width: 100vw; height: auto; min-height: 100vh; }
    .content-area { min-width: 0; max-width: 100vw; overflow-x: hidden; padding: 10px; }
    .tab-content { min-width: 0; max-width: 100%; border-radius: 8px; }
    .tab-content.active { min-height: 400px; }
    /* 2026-09-18：窄屏也交给 JS 计算，去掉 !important（否则会压过 JS 设的行内高度，底部照样够不着） */
    .grid-container {
        width: 100%; min-width: 0; max-width: 100vw;
        min-height: 0;
    }
    .grid-container .ag-root-wrapper { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; }
    .topbar { padding: 0 10px; height: 48px; max-width: 100vw; }
    .current-module { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 76px; }
    .topbar-left { min-width: 0; flex-shrink: 1; }
    .topbar-right { gap: 6px; flex-shrink: 1; min-width: 0; }
    .date-filter-wrapper { font-size: 11px; white-space: nowrap; min-width: 0; overflow: hidden; }
    .date-filter-label { display: none; }
    .date-filter-wrapper .month-filter-select { width: 116px; max-width: 116px; padding: 4px; font-size: 12px; }
    .user-info { min-width: 0; flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
    .user-avatar { width: 26px !important; height: 26px !important; }
    .user-role { display: none; }
    .logout-btn { padding: 4px 8px; font-size: 12px; white-space: nowrap; }
    .user-info .user-name { display: none; }
    .tab-nav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .tab-btn { white-space: nowrap; flex-shrink: 0; }
    .toolbar, .toolbar-hr {
        padding: 8px !important; overflow-x: auto; flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch; max-width: 100%;
    }
    .toolbar-group { flex-wrap: nowrap; }
    .toolbar button, .toolbar-hr button { white-space: nowrap; padding: 6px 10px; font-size: 12px; }
    .grid-container { overflow-x: auto; }
    .ag-theme-alpine { font-size: 12px; }
    body > div[style*="position: fixed"], body > div[style*="position:fixed"] { padding: 10px !important; }

    .content-purchase .purchase-stats-row { gap: 8px; }
    .content-purchase .purchase-stats-card { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 8px 10px; gap: 8px; }
    .content-purchase .purchase-stat-info { min-width: 0; }
    .content-purchase .purchase-stat-icon { width: 28px; height: 28px; font-size: 14px; }
    .content-purchase .purchase-stat-label { font-size: 11px; white-space: nowrap; }
    .content-purchase .purchase-stat-value { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .content-purchase .po-card { padding: 12px; min-width: 0; }
    .content-purchase .po-card-top { flex-wrap: wrap; row-gap: 6px; }
    .content-purchase .po-card-order-no { white-space: nowrap; }
    .content-purchase .po-card-meta { min-width: 0; }
    .content-purchase .po-card-badges { flex-shrink: 0; margin-left: auto; }
    .content-purchase .po-card-mid { flex-wrap: wrap; gap: 8px 18px; }
    .content-purchase .po-card-mid-item { min-width: 60px; }
    .content-purchase .po-card-bottom { flex-wrap: wrap; }
}

/* 工资组成归属设置 */
.allocation-config-btn { padding: 5px 13px; border: 1px solid #bfdbfe; border-radius: 7px; background: #eff6ff; color: #2563eb; font-weight: 700; cursor: pointer; }
.allocation-config-btn:hover { border-color: #60a5fa; background: #dbeafe; }
.salary-allocation-modal { width: min(680px, calc(100vw - 28px)); max-width: 680px; padding: 0; overflow: hidden; }
.salary-allocation-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 19px 22px 12px; border-bottom: 1px solid #e8eef6; }
.salary-allocation-head h3 { margin: 0; }
.salary-allocation-subtitle { margin: 5px 0 0; color: #64748b; font-size: 12px; }
.salary-allocation-note { margin: 14px 22px; padding: 10px 12px; border: 1px solid #bfdbfe; border-radius: 8px; background: #eff6ff; color: #315b8a; font-size: 12px; line-height: 1.6; }
.salary-allocation-basics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 22px 14px; }
.salary-allocation-basics label { color: #475569; font-size: 12px; font-weight: 600; }
.salary-allocation-basics input, .salary-allocation-basics select { display: block; width: 100%; height: 36px; margin-top: 5px; padding: 0 10px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; box-sizing: border-box; }
.salary-allocation-table { margin: 0 22px; overflow: hidden; border: 1px solid #dbe5f0; border-radius: 9px; }
.salary-allocation-row { display: grid; grid-template-columns: minmax(150px, 1.2fr) 1fr 1fr; align-items: center; min-height: 42px; border-bottom: 1px solid #edf2f7; }
.salary-allocation-row:last-child { border-bottom: 0; }
.salary-allocation-row > * { padding: 0 13px; text-align: center; }
.salary-allocation-row b { color: #334155; text-align: left; font-size: 12px; }
.salary-allocation-row input { width: 100%; height: 30px; padding: 0 8px; border: 1px solid #cbd5e1; border-radius: 6px; text-align: right; box-sizing: border-box; }
.salary-allocation-row input::after { content: '%'; }
.salary-allocation-table-head { min-height: 36px; background: #f6f9fd; color: #64748b; font-size: 11px; font-weight: 700; }
.salary-allocation-presets { display: flex; align-items: center; gap: 7px; padding: 12px 22px 5px; color: #64748b; font-size: 12px; }
.salary-allocation-presets button { padding: 5px 10px; border: 1px solid #dbe5f0; border-radius: 6px; background: #fff; color: #475569; cursor: pointer; }
.salary-allocation-presets button:hover { color: #2563eb; border-color: #93c5fd; background: #eff6ff; }
.salary-allocation-history { display: flex; align-items: center; gap: 7px; min-height: 25px; padding: 7px 22px 13px; color: #64748b; font-size: 11px; }
.salary-allocation-history span { padding: 3px 7px; border-radius: 5px; background: #f1f5f9; color: #475569; }
.salary-allocation-history em { font-style: normal; color: #94a3b8; }
@media (max-width: 620px) {
    .salary-allocation-basics { grid-template-columns: 1fr; }
    .salary-allocation-row { grid-template-columns: minmax(120px, 1.15fr) 1fr .8fr; }
    .salary-allocation-row > * { padding-left: 8px; padding-right: 8px; }
    .salary-allocation-presets { flex-wrap: wrap; }
}

/* ========== ERP 导入步骤 ========== */
.erp-step { display: inline-flex; align-items: center; margin-right: 16px; margin-bottom: 8px; font-size: 13px; color: #999; }
.erp-step.active { color: #2196F3; font-weight: bold; }
.erp-step.done { color: #4CAF50; }
.erp-step-icon { margin-right: 4px; font-size: 16px; }
.erp-step.done .erp-step-icon::before { content: '\2713'; }
.erp-step.active .erp-step-icon::before { content: '\25CF'; }

/* ========== 采购分页 ========== */
.purchase-pagination { display: flex; justify-content: center; gap: 6px; padding: 10px 0; }
.purchase-pagination button {
    padding: 5px 12px; border: 1px solid var(--border-medium); border-radius: var(--radius-sm);
    background: white; cursor: pointer; font-size: 12px; transition: var(--transition);
}
.purchase-pagination button:hover { border-color: var(--primary); color: var(--primary); }
.purchase-pagination button.active { background: var(--primary); color: white; border-color: var(--primary); }

/* ========== 状态徽章 ========== */
.status-badge { display: inline-block; }

/* ========== 采购提成区域 ========== */
.purchase-commission-box {
    background: var(--purple-light); border: 1px solid var(--purple-border);
    border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 16px;
}
/* 采购提成独立页签：卡片不再留底部外边距，表格用 .grid-container 自适应填满 PURCHASE_TAB_20260919 */
#tab-purchase_commission .purchase-commission-box { margin-bottom: 0; }
.purchase-commission-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.purchase-commission-title { font-weight: 700; font-size: 15px; color: var(--purple); }
.commission-totals {
    background: white; padding: 8px 12px; border-radius: var(--radius-sm);
    margin-top: 8px; font-size: 14px;
}
.commission-qty { font-weight: 700; color: var(--purple); margin-right: 24px; }
.commission-amount { font-weight: 700; color: var(--success); }

/* ========== 请假记录表格 ========== */
.leave-table-wrapper {
    overflow-x: auto; border: 1px solid var(--border-light);
    border-radius: var(--radius-sm); margin-top: 12px;
}
.leave-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.leave-table thead tr { background: var(--bg-hover); }
.leave-table th {
    padding: 10px; border: 1px solid var(--border-light);
    text-align: center; font-weight: 600; color: var(--text-secondary);
}
.leave-table td { padding: 10px; border: 1px solid var(--border-light); text-align: center; }
.leave-table .empty-row { padding: 20px; text-align: center; color: var(--text-muted); }

/* ========== 报销/报价/成本模块工具栏 ========== */
.module-toolbar {
    display: flex; gap: 8px; padding: 10px 20px; align-items: center; flex-wrap: wrap;
}
.module-toolbar .spacer { flex: 1; }
.module-input {
    padding: 6px 10px; border: 1px solid #ddd; border-radius: var(--radius-sm);
    font-size: 13px; transition: var(--transition);
}
.module-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.08); }
.module-select {
    padding: 6px 10px; border: 1px solid #ddd; border-radius: var(--radius-sm);
    font-size: 13px; background: white; transition: var(--transition);
}
.module-select:hover { border-color: var(--primary); }
.module-btn {
    padding: 6px 14px; border-radius: var(--radius-sm); border: none;
    cursor: pointer; font-size: 13px; transition: var(--transition);
}
.module-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.module-btn-primary { background: #0078d7; color: #fff; }
.module-btn-success { background: #059669; color: #fff; }
.module-btn-purple { background: var(--purple); color: #fff; }
.module-btn-orange { background: #ea580c; color: #fff; }
.module-info-bar {
    margin: 0 20px 6px; padding: 8px 12px; background: var(--primary-light);
    border: 1px solid #c7d2fe; border-radius: 8px; font-size: 13px; color: #4338ca;
}
.module-hint-text { font-size: 12px; color: var(--text-muted); }

/* ========== 加载更多按钮 ========== */
.load-more-btn {
    background: var(--purple); color: #fff; border: none;
    padding: 8px 32px; border-radius: var(--radius-sm);
    cursor: pointer; font-size: 14px; transition: var(--transition);
}
.load-more-btn:hover { background: var(--purple-hover); transform: translateY(-1px); }

/* ============================================================
   THEME_20261008B · 数字等宽（表格硬伤修复）
   金额/数量列用等宽数字：个位数换行时数字不跳动、上下对齐。
   tabular-nums 支持良好，Safari 15.4+ / Chrome 31+ / Firefox 61+
   ============================================================ */
.num, .ag-cell .num, td.num, th.num,
[class*="amount"], [class*="price"], [class*="qty"],
[class*="money"], [class*="total"], [class*="num"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
/* ag-grid 里所有「看起来是数字」的单元格右对齐 + 等宽 */
.ag-theme-alpine .ag-right-aligned-cell {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
/* 表格行高统一（40px -> 38px，一屏多显示行） */
.ag-theme-alpine .ag-row { font-variant-numeric: tabular-nums; }


/* ============================================================
   UIALL_20261008 · 统一交互层
   L4 骨架屏 / L6 侧栏折叠 / L5 批量条 / L8 确认弹层 / L7 行展开
   —— 纯新增，不修改上方任何既有规则，保证零回归
   ============================================================ */

/* ---------- L4-1 · 骨架屏 ---------- */
.ui-skeleton { padding: 0; overflow: hidden; }
.ui-skel-head, .ui-skel-row {
    display: flex; align-items: center; gap: 12px;
    padding: 0 14px; border-bottom: 1px solid var(--border-light);
}
.ui-skel-head { height: 40px; background: var(--bg-hover); position: sticky; top: 0; z-index: 3; }
.ui-skel-row { height: 38px; }
.ui-skel-bar {
    height: 9px; border-radius: 5px;
    background: linear-gradient(90deg,#EDF1F6 25%,#DFE6EF 50%,#EDF1F6 75%);
    background-size: 200% 100%; animation: uiShimmer 1.4s ease-in-out infinite;
}
@keyframes uiShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* 加载提示条 */
.ui-loading-bar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 20;
    background: #FFFBEB; color: #B45309; border-bottom: 1px solid #FDE68A;
    font-size: 12px; padding: 6px 14px; display: flex; align-items: center; gap: 8px;
    animation: uiSlideDown .26s ease-out;
}
@keyframes uiSlideDown { from{transform:translateY(-100%);opacity:0} to{transform:translateY(0);opacity:1} }
.ui-loading-bar .spin {
    width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid #FCD34D; border-top-color: #F59E0B; animation: uiSpin .7s linear infinite;
}
@keyframes uiSpin { to { transform: rotate(360deg); } }

/* ---------- L4-2 · 错误 / 空状态 ---------- */
.ui-state-box {
    padding: 46px 20px; text-align: center; color: var(--text-secondary);
    font-size: 13px; line-height: 1.9;
}
.ui-state-box .ic { font-size: 30px; display: block; margin-bottom: 10px; opacity: .5; }

/* ---------- L6 · 侧栏折叠 ---------- */
.sidebar.ui-collapsed { width: 60px; }
.sidebar.ui-collapsed .logo-text,
.sidebar.ui-collapsed .nav-text,
.sidebar.ui-collapsed .sidebar-group-title { display: none; }
.sidebar.ui-collapsed .sidebar-logo { padding: 14px 12px; justify-content: center; }
.sidebar.ui-collapsed .sidebar-nav { padding: 10px 6px; }
.sidebar.ui-collapsed .nav-item { justify-content: center; padding: 9px 0; }
.sidebar.ui-collapsed .nav-item::after { display: none; }
.sidebar { transition: width .26s cubic-bezier(.4,0,.2,1); }
.main-wrapper { transition: margin-left .26s cubic-bezier(.4,0,.2,1); }
/* 折叠时隐藏文字但保留图标：把文字压成 0 宽，避免布局跳动 */
.sidebar .nav-text, .sidebar .logo-text {
    transition: opacity .18s ease-out;
    white-space: nowrap; overflow: hidden;
}
.sidebar.ui-collapsed .nav-text,
.sidebar.ui-collapsed .logo-text { opacity: 0; width: 0; }

/* 折叠按钮（贴在侧栏右缘） */
.ui-sidebar-toggle {
    position: absolute; top: 50%; right: -11px; transform: translateY(-50%);
    width: 22px; height: 46px; border-radius: 0 7px 7px 0;
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-left: none; cursor: pointer; color: var(--text-secondary);
    font-size: 11px; z-index: 101; display: flex; align-items: center;
    justify-content: center; box-shadow: 1px 0 4px rgba(15,23,42,.06);
    transition: color .16s, background .16s;
}
.ui-sidebar-toggle:hover { color: var(--primary); background: var(--primary-light); }

/* 折叠态 tooltip */
.sidebar.ui-collapsed .nav-item[data-tip]:hover::before {
    content: attr(data-tip);
    position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    background: #0F172A; color: #fff; font-size: 12px; padding: 5px 10px;
    border-radius: 6px; white-space: nowrap; z-index: 200; pointer-events: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
}

/* ---------- L5 · 批量操作条 ---------- */
.ui-bulkbar {
    position: fixed; left: 50%; bottom: -90px; transform: translateX(-50%) scale(.94);
    background: #0F172A; color: #fff; border-radius: 999px;
    padding: 9px 12px 9px 20px; display: flex; align-items: center; gap: 10px;
    box-shadow: 0 14px 40px rgba(15,23,42,.34); z-index: 9000;
    opacity: 0; pointer-events: none;
    transition: bottom .3s cubic-bezier(.34,1.56,.64,1),
                transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s;
}
.ui-bulkbar.show { bottom: 24px; transform: translateX(-50%) scale(1); opacity: 1; pointer-events: auto; }
.ui-bulkbar .cnt { font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.ui-bulkbar .cnt b {
    color: var(--accent); font-size: 15px; font-weight: 700;
    font-variant-numeric: tabular-nums; margin: 0 2px;
}
.ui-bulkbar .bbtn {
    padding: 6px 13px; font-size: 12px; font-weight: 600; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.1);
    color: #fff; cursor: pointer; transition: background .16s, transform .12s;
    white-space: nowrap;
}
.ui-bulkbar .bbtn:hover { background: rgba(255,255,255,.22); }
.ui-bulkbar .bbtn:active { transform: scale(.95); }
.ui-bulkbar .bbtn.danger { background: #EF4444; border-color: #EF4444; }
.ui-bulkbar .bbtn.danger:hover { background: #DC2626; }
.ui-bulkbar .bclose {
    width: 24px; height: 24px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; cursor: pointer;
    color: rgba(255,255,255,.6); font-size: 13px; flex-shrink: 0;
}
.ui-bulkbar .bclose:hover { background: rgba(255,255,255,.15); color: #fff; }

/* ---------- L8 · 确认弹层 ---------- */
.ui-modal-mask {
    position: fixed; inset: 0; background: rgba(15,23,42,.45);
    display: none; align-items: center; justify-content: center; z-index: 10000;
}
.ui-modal-mask.show { display: flex; animation: uiFade .2s ease-out; }
@keyframes uiFade { from{opacity:0} to{opacity:1} }
.ui-modal {
    background: #fff; border-radius: var(--radius-lg); width: 440px; max-width: 92vw;
    box-shadow: 0 24px 70px rgba(15,23,42,.34);
    animation: uiPop .24s cubic-bezier(.34,1.56,.64,1); overflow: hidden;
}
@keyframes uiPop { from{transform:translateY(14px) scale(.96);opacity:0} to{transform:translateY(0) scale(1);opacity:1} }
.ui-modal-hd { padding: 22px 24px 0; display: flex; gap: 14px; align-items: flex-start; }
.ui-modal-ic {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 21px;
    background: #FEF2F2; color: #DC2626;
}
.ui-modal-ic.warn { background: #FFFBEB; color: #D97706; }
.ui-modal-hd h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: var(--text-primary); }
.ui-modal-hd p { font-size: 12.5px; color: var(--text-secondary); line-height: 1.75; }
.ui-modal-bd { padding: 18px 24px 0; }
.ui-modal-warn {
    background: #FEF2F2; border: 1px solid #FECACA; border-radius: var(--radius-md);
    padding: 12px 14px; font-size: 12px; color: #991B1B; line-height: 1.85; margin-bottom: 14px;
}
.ui-modal-ft {
    padding: 18px 24px 22px; display: flex; gap: 10px; justify-content: flex-end;
}
.ui-mbtn {
    padding: 9px 20px; font-size: 12.5px; font-weight: 600; border-radius: 999px;
    cursor: pointer; border: 1px solid var(--border-light); background: #fff;
    color: var(--text-secondary); transition: all .16s;
}
.ui-mbtn:hover { background: var(--bg-hover); }
.ui-mbtn.danger { background: #EF4444; border-color: #EF4444; color: #fff; }
.ui-mbtn.danger:hover:not(:disabled) { background: #DC2626; }
.ui-mbtn:disabled { opacity: .4; cursor: not-allowed; }
.ui-modal input.ui-minput {
    width: 100%; padding: 9px 13px; border: 1.5px solid var(--border-light);
    border-radius: var(--radius-md); font-size: 13px; outline: none;
    font-family: inherit; transition: all .18s;
}
.ui-modal input.ui-minput:focus {
    border-color: #EF4444; box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}
.ui-modal-lb { font-size: 11.5px; color: var(--text-secondary); margin-bottom: 7px; }
.ui-modal-lb b { color: #DC2626; }

/* ---------- Toast ---------- */
.ui-toast-wrap {
    position: fixed; right: 20px; bottom: 20px; z-index: 9500;
    display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.ui-toast {
    background: #0F172A; color: #fff; padding: 11px 16px; border-radius: var(--radius-md);
    font-size: 12.5px; box-shadow: 0 10px 30px rgba(15,23,42,.28);
    display: flex; align-items: center; gap: 12px;
    animation: uiToastIn .28s cubic-bezier(.34,1.56,.64,1);
    max-width: 380px;
}
@keyframes uiToastIn { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }
.ui-toast.out { animation: uiToastOut .24s ease-in forwards; }
@keyframes uiToastOut { to{transform:translateY(10px);opacity:0} }
.ui-toast .undo { color: var(--accent); cursor: pointer; font-weight: 600; white-space: nowrap; }
.ui-toast .undo:hover { text-decoration: underline; }
.ui-toast.ok { background: #065F46; }
.ui-toast.err { background: #991B1B; }

/* ---------- L9 · 键盘导航 ---------- */
.ag-theme-alpine .ui-kbd-cur {
    background: var(--primary-light) !important;
    box-shadow: inset 3px 0 0 var(--primary), inset -3px 0 0 var(--primary) !important;
}
.ui-kbd-tip {
    font-size: 11px; color: var(--text-muted); padding: 5px 14px;
    background: var(--bg-hover); border-bottom: 1px solid var(--border-light);
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.ui-kbd-tip kbd {
    font-family: ui-monospace, Menlo, monospace; font-size: 10px;
    background: #fff; border: 1px solid var(--border-medium);
    border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px;
    color: var(--text-primary); font-weight: 600;
}

/* ---------- 按钮统一 ---------- */
.ui-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 15px; font-size: 12px; font-weight: 600;
    border-radius: 999px; cursor: pointer; white-space: nowrap;
    border: 1px solid var(--border-light); background: #fff;
    color: var(--text-secondary);
    transition: all .16s cubic-bezier(.4,0,.2,1);
}
.ui-btn:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,132,255,.16); }
.ui-btn:active { transform: translateY(0) scale(.97); }
.ui-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.ui-btn.primary {
    background: var(--primary); border-color: var(--primary); color: #fff;
    box-shadow: 0 2px 8px rgba(0,132,255,.3);
}
.ui-btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover);
    box-shadow: 0 6px 18px rgba(0,132,255,.4); }
.ui-btn.danger { color: #DC2626; border-color: #FECACA; background: #FEF2F2; }
.ui-btn.danger:hover { background: #FEE2E2; border-color: #EF4444; color: #DC2626; }
.ui-btn.ghost { border-color: transparent; background: transparent; }
.ui-btn.ghost:hover { background: var(--bg-hover); }
.ui-btn.sm { padding: 4px 11px; font-size: 11.5px; }

/* 更多菜单 */
.ui-more { position: relative; display: inline-block; }
.ui-more-panel {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 172px;
    background: #fff; border: 1px solid var(--border-light);
    border-radius: var(--radius-md); box-shadow: 0 12px 34px rgba(15,23,42,.16);
    padding: 5px; z-index: 5000; display: none;
    animation: uiPop .18s cubic-bezier(.34,1.56,.64,1);
}
.ui-more-panel.show { display: block; }
.ui-more-item {
    display: block; width: 100%; text-align: left; padding: 8px 11px;
    font-size: 12.5px; color: var(--text-secondary); border: none;
    background: none; cursor: pointer; border-radius: var(--radius-sm);
}
.ui-more-item:hover { background: var(--bg-hover); color: var(--primary); }
.ui-more-item.danger { color: #DC2626; }
.ui-more-item.danger:hover { background: #FEF2F2; }

/* ---------- L7 · 行内展开 ---------- */
.ag-theme-alpine .ui-expand-row { background: #F8FAFC !important; }
.ui-detail-box { padding: 12px 16px 14px 44px; font-size: 12px; color: var(--text-secondary); line-height: 1.85; }
.ui-detail-box b { color: var(--text-primary); font-weight: 600; }
.ui-detail-goods {
    background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-md);
    padding: 9px 12px; margin-bottom: 6px; display: flex;
    justify-content: space-between; gap: 12px;
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
    .ui-skel-bar, .ui-loading-bar .spin { animation: none; }
    .ui-bulkbar, .ui-modal, .ui-more-panel { transition: none; }
}


/* ============================================================
   UIALL_20261008_C · 覆盖修正
   旧样式类（.btn / .btn-primary / .ag-cell-*）特异性更高，
   这里用 !important 强制统一视觉，保证「分档」真的看得见。
   ============================================================ */

/* ---------- L3 按钮分档（强制覆盖） ---------- */
.ui-btn {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    padding: 5px 14px !important;
    font-size: 12px !important; font-weight: 600 !important;
    line-height: 20px !important;
    border-radius: 999px !important;
    border: 1px solid var(--border-light) !important;
    background: #fff !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important; white-space: nowrap !important;
    box-shadow: none !important;
    transition: all .16s cubic-bezier(.4,0,.2,1) !important;
}
.ui-btn:hover:not(:disabled) {
    border-color: var(--primary) !important; color: var(--primary) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0,132,255,.16) !important;
    background: #fff !important;
}
.ui-btn:active:not(:disabled) { transform: translateY(0) scale(.97) !important; }
.ui-btn:disabled { opacity: .45 !important; cursor: not-allowed !important; }
.ui-btn.primary {
    background: var(--primary) !important; border-color: var(--primary) !important;
    color: #fff !important; box-shadow: 0 2px 8px rgba(0,132,255,.3) !important;
}
.ui-btn.primary:hover:not(:disabled) {
    background: var(--primary-hover) !important; border-color: var(--primary-hover) !important;
    color: #fff !important; box-shadow: 0 6px 18px rgba(0,132,255,.4) !important;
}
.ui-btn.danger {
    color: #DC2626 !important; border-color: #FECACA !important; background: #FEF2F2 !important;
}
.ui-btn.danger:hover:not(:disabled) { background: #FEE2E2 !important; border-color: #EF4444 !important; }
.ui-btn.sm { padding: 3px 10px !important; font-size: 11.5px !important; }

/* ============================================================
   UIUX_20261010 · 统一体验层
   目标：减少视觉噪音、强化当前上下文、让高频操作有明确反馈。
   只调整展示与交互反馈，不改变业务字段、数据计算或权限规则。
   ============================================================ */
:root {
    --bg-primary: #F3F6FA;
    --bg-hover: #F7FAFF;
    --border-light: #E6ECF3;
    --border-medium: #D3DDE9;
    --text-primary: #172033;
    --text-secondary: #59697D;
    --text-muted: #8A98A9;
    --primary: #1677FF;
    --primary-hover: #0B5FD7;
    --primary-light: #EAF3FF;
    --shadow-sm: 0 1px 2px rgba(15, 35, 65, .04), 0 3px 10px rgba(15, 35, 65, .03);
    --shadow-md: 0 8px 24px rgba(15, 35, 65, .10);
}

/* 可见焦点：键盘操作和弹窗内 tab 导航不再“迷路” */
:where(button, a, input, select, textarea):focus-visible {
    outline: 3px solid rgba(22, 119, 255, .24) !important;
    outline-offset: 2px;
}

body { background: var(--bg-primary); color: var(--text-primary); }

.sidebar {
    width: 248px;
    background: linear-gradient(180deg, #14233A 0%, #0B1425 100%);
    box-shadow: 8px 0 28px rgba(12, 29, 52, .12);
}
.sidebar-logo {
    min-height: 70px;
    padding: 16px 20px;
    gap: 12px;
    border-bottom-color: rgba(255,255,255,.10);
}
.logo-text { font-size: 15px; letter-spacing: .2px; }
.sidebar-nav { padding: 14px 12px; }
.nav-section {
    padding: 16px 12px 7px;
    color: #7E91AB;
    font-size: 10px;
    letter-spacing: 1.2px;
}
.nav-item {
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #C4D0DE;
    font-size: 13px;
}
.nav-item:hover {
    background: rgba(255,255,255,.075);
    color: #FFF;
    transform: translateX(1px);
}
.nav-item.active {
    background: linear-gradient(135deg, #1677FF 0%, #1557C7 100%);
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 7px 18px rgba(22,119,255,.28);
}
.nav-item .nav-icon { width: 22px; font-size: 15px; }
.main-wrapper { margin-left: 248px; }

.topbar {
    min-height: 62px;
    padding: 11px 22px;
    background: rgba(255,255,255,.94);
    border-bottom-color: #E3EAF2;
    box-shadow: 0 1px 0 rgba(15,35,65,.02), 0 5px 18px rgba(15,35,65,.04);
}
.topbar-left, .topbar-right { min-width: 0; }
.current-module {
    font-size: 17px;
    letter-spacing: -.2px;
}
.date-filter-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px 5px 10px;
    color: var(--text-muted);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: #FBFCFE;
}
.month-filter-select {
    min-width: 118px;
    border-color: transparent;
    background: transparent;
    padding: 4px 22px 4px 4px;
    font-weight: 600;
}
.month-filter-select:hover, .month-filter-select:focus { border-color: transparent; box-shadow: none; }
.user-info { gap: 9px; }
.user-name { font-weight: 600; }
.user-role { border: 1px solid #D7E8FF; font-weight: 600; }
.logout-btn { border: 1px solid transparent; }
.logout-btn:hover { border-color: #FECACA; }

.tab-nav {
    min-height: 48px;
    padding: 0 22px;
    gap: 4px;
    box-shadow: 0 1px 0 rgba(15,35,65,.02);
}
.tab-btn {
    padding: 13px 14px 11px;
    font-size: 12.5px;
    border-bottom-width: 3px;
}
.tab-btn:hover { background: #F1F7FF; }
.tab-btn.active { font-weight: 700; }

.toolbar, .toolbar-hr {
    min-height: 52px;
    padding: 9px 14px;
    gap: 8px;
    background: #FFF;
    border-bottom-color: var(--border-light);
}
.toolbar { position: relative; z-index: 5; }
.toolbar-hint { font-size: 12px; color: var(--text-muted); }
.toolbar-group { gap: 6px; }
.toolbar .btn, .toolbar-hr button:not([class]) { min-height: 32px; }
.btn, .ui-btn { transition-duration: .15s; }
.btn:hover, .ui-btn:hover { transform: translateY(-1px); }
.btn:disabled, .ui-btn:disabled { filter: grayscale(.1); }

.content-area { padding: 12px 16px 14px; }
.tab-content {
    border-radius: 12px;
    border-color: #E1E8F1;
    box-shadow: 0 2px 10px rgba(15,35,65,.045);
}
.statusbar {
    min-height: 34px;
    padding: 6px 18px;
    background: #FBFCFE;
}

/* 表格：表头更稳、行更紧凑、hover/选中状态更容易追踪 */
.ag-theme-alpine {
    --ag-font-size: 12px;
    --ag-row-hover-color: #EEF6FF;
    --ag-selected-row-background-color: #DCEEFF;
    --ag-header-background-color: #F7F9FC;
}
.ag-theme-alpine .ag-header-cell {
    padding: 0 9px !important;
    background: #F7F9FC !important;
}
.ag-theme-alpine .ag-header-cell-text { font-size: 12px !important; color: #53657A !important; }
.ag-theme-alpine .ag-header,
.ag-theme-alpine .ag-header-row { min-height: 42px !important; height: 42px !important; }
.ag-theme-alpine .ag-header-cell { min-width: 0; }
.ag-theme-alpine .ag-header-cell-label { min-width: 0; overflow: hidden; gap: 3px; }
.ag-theme-alpine .ag-header-cell-text {
    display: block !important; min-width: 0; overflow: hidden;
    white-space: nowrap !important; text-overflow: ellipsis;
    line-height: 42px !important; padding: 0 !important;
}
.ag-theme-alpine .wps-filter-icon { flex: 0 0 16px; }
.ag-theme-alpine .ag-row { border-bottom-color: #EEF2F6; }
.ag-theme-alpine .ag-cell {
    padding-left: 9px !important;
    padding-right: 9px !important;
    color: #27364A;
    min-width: 0;
    overflow: hidden;
}
.ag-theme-alpine .ag-cell-value {
    min-width: 0; max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.ag-theme-alpine .ag-right-aligned-cell { justify-content: flex-end !important; text-align: right !important; }
.ag-theme-alpine .ag-right-aligned-cell .ag-cell-wrapper { justify-content: flex-end !important; text-align: right !important; }
.ag-theme-alpine .ag-center-aligned-cell { justify-content: center !important; text-align: center !important; }
.ag-theme-alpine .ag-row-hover { box-shadow: inset 3px 0 0 #76B6FF; }
.ag-theme-alpine .ag-row-selected { box-shadow: inset 3px 0 0 var(--primary); }
.ag-theme-alpine .ag-paging-panel {
    min-height: 36px;
    border-top-color: var(--border-light);
    color: var(--text-secondary);
}

/* 输入控件统一：降低“每个模块一套表单”的割裂感 */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    border-color: var(--border-medium);
    border-radius: 7px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:not([type="checkbox"]):not([type="radio"]):hover, select:hover, textarea:hover { border-color: #AFC1D5; }
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(22,119,255,.12) !important;
}

.modal-overlay, .ui-modal-mask { backdrop-filter: blur(2px); background: rgba(15, 28, 48, .48); }
.modal-dialog, .modal-box, .ui-modal {
    border: 1px solid rgba(255,255,255,.75);
    box-shadow: 0 20px 55px rgba(15,35,65,.22);
}
.modal-header, .modal-footer { background: #FBFCFE; }
.toast { box-shadow: 0 12px 34px rgba(15,35,65,.18); }

@media (max-width: 1200px) and (min-width: 769px) {
    .sidebar { width: 220px; }
    .main-wrapper { margin-left: 220px; }
    .topbar { padding-left: 18px; padding-right: 18px; }
    .tab-nav { padding-left: 18px; padding-right: 18px; }
    .content-area { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 768px) {
    .topbar { min-height: 52px; }
    .content-area { padding: 8px; }
    .tab-nav { padding: 0 8px; }
    .tab-btn { padding-left: 12px; padding-right: 12px; }
    .date-filter-wrapper { padding: 3px 5px; }
    .statusbar { padding-left: 10px; padding-right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- L3 数字列右对齐（压过旧 ag-grid 样式） ---------- */
.ag-theme-alpine td.ui-num,
.ag-theme-alpine td.ui-num * {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" !important;
}
.ag-theme-alpine .ag-header-cell.ui-num-h,
.ag-theme-alpine .ag-header-cell.ui-num-h .ag-header-cell-label {
    text-align: right !important;
}
/* 右对齐容器的子元素也要跟right */
.ag-theme-alpine .ag-cell.ui-num > *,
.ag-theme-alpine .ag-cell.ui-num .ag-cell-wrapper {
    text-align: right !important;
    width: 100%;
    display: block;
}


/* ============================================================
   UIALL_20261008_H · 分页条紧凑化（原来 48px 太高，视觉突兀）
   ============================================================ */
.ag-theme-alpine .ag-paging-panel {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 12px !important;
    background: #FCFCFD !important;
    border-top: 1px solid #EDF1F6 !important;
    font-size: 12px !important;
    color: var(--text-secondary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    box-sizing: border-box !important;
}
/* 三块内容之间不要各自留 18px 外边距（那才是撑高的元凶） */
.ag-theme-alpine .ag-paging-panel > * {
    margin: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
}
/* "Page Size:" 选择器 —— 压到 24px 高 */
.ag-theme-alpine .ag-paging-panel .ag-paging-page-size {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    font-size: 12px !important;
    color: var(--text-muted) !important;
}
.ag-theme-alpine .ag-paging-panel .ag-picker-field-wrapper {
    height: 24px !important;
    min-height: 24px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    background: #fff !important;
    border: 1px solid var(--border-light) !important;
}
/* 页码按钮：24px 圆形，够点但不撑高 */
.ag-theme-alpine .ag-paging-panel .ag-paging-button {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    font-size: 11px !important;
    color: var(--text-muted) !important;
    border-radius: 50% !important;
    transition: all .15s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.ag-theme-alpine .ag-paging-panel .ag-paging-button:hover {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
}
/* 当前页码 */
.ag-theme-alpine .ag-paging-panel .ag-paging-number,
.ag-theme-alpine .ag-paging-panel .ag-paging-row-summary-panel,
.ag-theme-alpine .ag-paging-panel .ag-paging-page-summary-panel {
    font-size: 12px !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
    font-variant-numeric: tabular-nums !important;
}
.ag-theme-alpine .ag-paging-panel .ag-paging-number {
    font-weight: 500 !important;
    color: var(--text-primary) !important;
}
/* 顺序：总数 · 每页条数 · 页码 */
.ag-theme-alpine .ag-paging-panel .ag-paging-row-summary-panel { order: 1; }
.ag-theme-alpine .ag-paging-panel .ag-paging-page-size { order: 2; }
.ag-theme-alpine .ag-paging-panel .ag-paging-page-summary-panel { order: 3; }
.ag-theme-alpine .ag-paging-panel .ag-paging-panel,
.ag-theme-alpine .ag-paging-panel .ag-paging-row { margin: 0 !important; }
/* 分隔竖线，让三块清楚但不突兀 */
.ag-theme-alpine .ag-paging-panel .ag-paging-page-size::before {
    content: ''; display: inline-block; width: 1px; height: 14px;
    background: var(--border-light); margin-right: 9px; vertical-align: -2px;
}

/* ============================================================
   NEON GLASS UI 2026-10-10
   年轻化科技玻璃主题：保留数据密度，增加轻量动效与层次感。
   ============================================================ */
:root {
    --bg-primary: #09111f;
    --bg-card: rgba(17, 29, 49, .82);
    --bg-hover: rgba(59, 130, 246, .12);
    --border-light: rgba(148, 163, 184, .16);
    --border-medium: rgba(148, 163, 184, .28);
    --text-primary: #e7eefb;
    --text-secondary: #9aabc2;
    --text-muted: #71839d;
    --primary: #4f9cff;
    --primary-hover: #2678e8;
    --primary-light: rgba(79, 156, 255, .14);
    --accent: #9b7cff;
    --accent-light: rgba(155, 124, 255, .14);
    --purple: #9b7cff;
    --purple-hover: #7c5ce8;
    --purple-light: rgba(155, 124, 255, .14);
    --purple-border: rgba(155, 124, 255, .35);
    --shadow-sm: 0 8px 24px rgba(0, 0, 0, .18);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, .25);
    --shadow-lg: 0 24px 70px rgba(0, 0, 0, .42);
}

body {
    background:
        radial-gradient(circle at 78% -10%, rgba(79,156,255,.18), transparent 30%),
        radial-gradient(circle at 12% 110%, rgba(155,124,255,.14), transparent 34%),
        #09111f;
}
body::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1;
    background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 42px 42px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 85%);
}
.sidebar {
    background: linear-gradient(180deg, rgba(13, 27, 49, .96), rgba(6, 13, 27, .98));
    border-right: 1px solid rgba(109, 163, 255, .16);
    box-shadow: 8px 0 32px rgba(0,0,0,.2);
}
.sidebar-logo { border-bottom-color: rgba(148,163,184,.14); }
.logo-icon { box-shadow: 0 0 0 4px rgba(79,156,255,.09), 0 0 24px rgba(79,156,255,.42); }
.nav-section { color: #6680a4; }
.nav-item { color: #aebed4; }
.nav-item:hover { background: rgba(79,156,255,.10); color: #f4f8ff; transform: translateX(3px); }
.nav-item.active {
    background: linear-gradient(105deg, rgba(45,125,239,.96), rgba(124,92,232,.86));
    box-shadow: 0 8px 24px rgba(55,123,235,.32), inset 0 1px 0 rgba(255,255,255,.18);
}
.main-wrapper { background: transparent; }
.topbar, .tab-nav, .toolbar, .toolbar-hr, .statusbar {
    background: rgba(9, 18, 34, .72); border-color: rgba(148,163,184,.14);
    color: var(--text-secondary); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.current-module { filter: drop-shadow(0 0 10px rgba(79,156,255,.22)); }
.user-name { color: var(--text-primary); }
.user-role { background: rgba(79,156,255,.15); color: #9ec8ff; }
.tab-btn { color: #91a5bf; }
.tab-btn:hover { color: #d8e8ff; background: rgba(79,156,255,.10); }
.tab-btn.active { color: #8fc2ff; border-bottom-color: #4f9cff; box-shadow: 0 8px 18px rgba(79,156,255,.16); }
.content-area { background: transparent; }
.tab-content {
    background: rgba(12, 24, 43, .76); border-color: rgba(148,163,184,.16);
    box-shadow: 0 12px 44px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.toolbar-hint, .grid-filter-status, .date-filter-wrapper { color: var(--text-secondary); }
.btn-secondary, .filter-btn, .month-filter-select, .daily-date-select,
.toolbar-hr button:not([class]) { background: rgba(22,38,64,.72); color: var(--text-primary); border-color: var(--border-medium); }
.btn-secondary:hover, .filter-btn:hover, .toolbar-hr button:not([class]):hover { background: rgba(79,156,255,.14); color: #bdddff; }
.btn-primary, .btn-purple { box-shadow: 0 6px 20px rgba(79,156,255,.26), inset 0 1px 0 rgba(255,255,255,.16); }
.btn:hover { transform: translateY(-2px); }
.card, .stat-card, .po-card, .modal-box, .modal-dialog {
    background: rgba(17, 31, 53, .86); border-color: rgba(148,163,184,.17); color: var(--text-primary);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.035);
}
.card-header, .modal-header, .modal-footer { border-color: rgba(148,163,184,.14); }
.data-table th, .po-product-table th { background: rgba(22,39,65,.9); color: #b7c8df; border-color: rgba(148,163,184,.16); }
.data-table td, .po-product-table td { border-color: rgba(148,163,184,.12); color: #d4deed; }
.data-table tr:hover, .po-card:hover { background: rgba(79,156,255,.08); }
.po-card-mid { border-color: rgba(148,163,184,.14); }
.po-card-meta, .po-card-mid-label { color: #8093ad; }
.po-card-mid-value { color: #dce8f7; }
.modal-overlay { background: rgba(2, 8, 20, .68); }
.modal-body label, .modal-hint { color: var(--text-secondary); }
.modal-body input, .import-textarea, .po-product-table input { background: rgba(7,16,31,.72); color: var(--text-primary); border-color: var(--border-medium); }
.modal-body input:focus, .import-textarea:focus, .po-product-table input:focus { box-shadow: 0 0 0 3px rgba(79,156,255,.16), 0 0 18px rgba(79,156,255,.12); }
.ag-theme-alpine {
    --ag-background-color: rgba(10, 21, 38, .88);
    --ag-foreground-color: #d7e3f3;
    --ag-header-background-color: rgba(22, 39, 65, .96);
    --ag-header-foreground-color: #c5d5e8;
    --ag-row-hover-color: rgba(79,156,255,.10);
    --ag-selected-row-background-color: rgba(79,156,255,.18);
    --ag-odd-row-background-color: rgba(255,255,255,.018);
    --ag-border-color: rgba(148,163,184,.14);
}
.ag-theme-alpine .ag-root-wrapper, .ag-theme-alpine .ag-body-viewport, .ag-theme-alpine .ag-center-cols-viewport,
.ag-theme-alpine .ag-center-cols-container { background: transparent !important; }
.ag-theme-alpine .ag-header, .ag-theme-alpine .ag-header-cell { background: rgba(22,39,65,.94) !important; border-color: rgba(148,163,184,.14) !important; }
.ag-theme-alpine .ag-header-cell:hover { background: rgba(79,156,255,.16) !important; }
.ag-theme-alpine .ag-header-cell-text { color: #c5d5e8 !important; }
.ag-theme-alpine .ag-cell { border-right-color: rgba(148,163,184,.10); color: #d5e1f0; }
.ag-theme-alpine .ag-row { border-color: rgba(148,163,184,.10) !important; transition: background-color .2s ease, box-shadow .2s ease; }
.ag-theme-alpine .ag-row:hover { box-shadow: inset 3px 0 0 #4f9cff; }
.ag-theme-alpine .ag-paging-panel { background: rgba(10,21,38,.88) !important; color: #91a5bf !important; border-top-color: rgba(148,163,184,.14) !important; }
.ag-theme-alpine .ag-paging-panel .ag-picker-field-wrapper { background: rgba(22,39,65,.9) !important; border-color: rgba(148,163,184,.22) !important; color: #d5e1f0 !important; }
.wps-filter-panel, .ac-dropdown { background: rgba(15,29,50,.98); border-color: rgba(79,156,255,.28); box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 24px rgba(79,156,255,.10); }
.wps-filter-header { background: linear-gradient(135deg, rgba(79,156,255,.18), rgba(155,124,255,.12)); border-color: rgba(148,163,184,.16); }
.wps-filter-search, .wps-filter-actions, .wps-filter-footer { border-color: rgba(148,163,184,.14); background: rgba(9,18,34,.64); }
.wps-filter-search-input, .wps-filter-btn { background: rgba(7,16,31,.75); color: var(--text-primary); border-color: var(--border-medium); }
.wps-filter-item:hover, .ac-dropdown-item:hover { background: rgba(79,156,255,.15); }
.wps-filter-value, .ac-dropdown-item { color: #d5e1f0; }
.po-library-linked { border-color:#35d07f !important; background:rgba(53,208,127,.10) !important; box-shadow: 0 0 12px rgba(53,208,127,.12); }
@keyframes neonPulse { 0%,100% { box-shadow: 0 0 0 rgba(79,156,255,0); } 50% { box-shadow: 0 0 18px rgba(79,156,255,.12); } }
.stat-card:hover, .purchase-stats-card:hover { animation: neonPulse 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   LIGHT GLASS OVERRIDE 2026-10-10
   主工作区回到高可读浅色，保留科技蓝紫动效。
   ============================================================ */
:root {
    --bg-primary: #f3f7fc;
    --bg-card: rgba(255,255,255,.94);
    --bg-hover: #f3f8ff;
    --border-light: #e6edf5;
    --border-medium: #d4dfec;
    --text-primary: #1e293b;
    --text-secondary: #5b6b7c;
    --text-muted: #91a0b2;
    --primary-light: #eaf4ff;
    --accent-light: #f0edff;
    --purple-light: #f0edff;
    --shadow-sm: 0 4px 16px rgba(38, 78, 122, .07);
    --shadow-md: 0 8px 24px rgba(38, 78, 122, .12);
    --shadow-lg: 0 18px 50px rgba(38, 78, 122, .18);
}
body {
    background: radial-gradient(circle at 90% -10%, rgba(79,156,255,.10), transparent 28%), #f3f7fc;
}
body::before { background-image: linear-gradient(rgba(79,156,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(79,156,255,.035) 1px, transparent 1px); }
.topbar, .tab-nav, .toolbar, .toolbar-hr, .statusbar { background: rgba(255,255,255,.88); color: var(--text-secondary); border-color: var(--border-light); }
.tab-content { background: rgba(255,255,255,.94); border-color: var(--border-light); box-shadow: 0 8px 28px rgba(38,78,122,.08), inset 0 1px 0 #fff; }
.btn-secondary, .filter-btn, .month-filter-select, .daily-date-select, .toolbar-hr button:not([class]) { background: #fff; color: var(--text-primary); border-color: var(--border-medium); }
.card, .stat-card, .po-card, .modal-box, .modal-dialog { background: rgba(255,255,255,.98); border-color: var(--border-light); color: var(--text-primary); }
.data-table th, .po-product-table th { background: #f6f9fd; color: #52657b; border-color: var(--border-light); }
.data-table td, .po-product-table td { border-color: #edf2f7; color: #26384d; }
.data-table tr:hover, .po-card:hover { background: #f5f9ff; }
.po-card-mid { border-color: #edf2f7; }
.po-card-meta, .po-card-mid-label { color: #8796a8; }
.po-card-mid-value { color: #33475e; }
.modal-overlay { background: rgba(15,23,42,.42); }
.modal-body label, .modal-hint { color: var(--text-secondary); }
.modal-body input, .import-textarea, .po-product-table input { background: #fff; color: var(--text-primary); border-color: var(--border-medium); }
.ag-theme-alpine {
    --ag-background-color: #fff;
    --ag-foreground-color: #26384d;
    --ag-header-background-color: #f7faff;
    --ag-header-foreground-color: #52657b;
    --ag-row-hover-color: #f2f7ff;
    --ag-selected-row-background-color: #e5f1ff;
    --ag-odd-row-background-color: #fcfdff;
    --ag-border-color: #e6edf5;
}
.ag-theme-alpine .ag-root-wrapper, .ag-theme-alpine .ag-body-viewport, .ag-theme-alpine .ag-center-cols-viewport,
.ag-theme-alpine .ag-center-cols-container { background: #fff !important; }
.ag-theme-alpine .ag-header, .ag-theme-alpine .ag-header-cell { background: #f7faff !important; border-color: #e6edf5 !important; }
.ag-theme-alpine .ag-header-cell:hover { background: #edf5ff !important; }
.ag-theme-alpine .ag-header-cell-text { color: #52657b !important; }
.ag-theme-alpine .ag-cell { border-right-color: #f0f3f7; color: #26384d; }
.ag-theme-alpine .ag-row { border-color: #edf2f7 !important; }
.ag-theme-alpine .ag-paging-panel { background: #fff !important; color: #71839d !important; border-top-color: #e6edf5 !important; }
.ag-theme-alpine .ag-paging-panel .ag-picker-field-wrapper { background: #fff !important; border-color: #d4dfec !important; color: #33475e !important; }
.wps-filter-panel, .ac-dropdown { background: #fff; border-color: #d9e8fb; box-shadow: 0 16px 42px rgba(38,78,122,.18), 0 0 18px rgba(79,156,255,.08); }
.wps-filter-search, .wps-filter-actions, .wps-filter-footer { background: #f8fbff; border-color: #e6edf5; }
.wps-filter-search-input, .wps-filter-btn { background: #fff; color: var(--text-primary); border-color: var(--border-medium); }
.wps-filter-value, .ac-dropdown-item { color: #33475e; }

/* 采购明细可读性修正：列不再被压缩，填写后的数字始终清楚可见。 */
.po-express-block { overflow-x: auto; }
.po-product-table { table-layout: fixed; min-width: 1125px; }
.po-product-table th:nth-child(1), .po-product-table td:nth-child(1) { width: 145px; }
.po-product-table th:nth-child(2), .po-product-table td:nth-child(2) { width: 110px; }
.po-product-table th:nth-child(3), .po-product-table td:nth-child(3) { width: 85px; }
.po-product-table th:nth-child(4), .po-product-table td:nth-child(4) { width: 70px; }
.po-product-table th:nth-child(5), .po-product-table td:nth-child(5) { width: 90px; }
.po-product-table th:nth-child(6), .po-product-table td:nth-child(6) { width: 70px; }
.po-product-table th:nth-child(7), .po-product-table td:nth-child(7) { width: 90px; }
.po-product-table th:nth-child(8), .po-product-table td:nth-child(8) { width: 70px; }
.po-product-table th:nth-child(9), .po-product-table td:nth-child(9) { width: 100px; }
.po-product-table th:nth-child(10), .po-product-table td:nth-child(10) { width: 150px; }
.po-product-table th:nth-child(11), .po-product-table td:nth-child(11) { width: 85px; }
.po-product-table th:nth-child(12), .po-product-table td:nth-child(12) { width: 60px; }
.po-product-table input, .po-product-table select {
    color: #23384f !important; opacity: 1; min-height: 25px;
}
.po-product-table input::placeholder { color: #9aaabd; opacity: 1; }
.po-param-field { width: 100%; min-width: 135px; justify-content: space-between; color: #52657b; font-size: 11px; }
.po-param-field input { flex: 0 0 64px; width: 64px; min-width: 64px; color: #23384f !important; background: #fff !important; text-align: right; }

/* 采购明细最终排版：按容器分配，不再把整张表撑出弹窗。 */
.po-product-table { width: 100%; min-width: 0; table-layout: fixed; }
.po-product-table th:nth-child(1), .po-product-table td:nth-child(1) { width: 13%; }
.po-product-table th:nth-child(2), .po-product-table td:nth-child(2) { width: 9%; }
.po-product-table th:nth-child(3), .po-product-table td:nth-child(3) { width: 8%; }
.po-product-table th:nth-child(4), .po-product-table td:nth-child(4) { width: 7%; }
.po-product-table th:nth-child(5), .po-product-table td:nth-child(5) { width: 8%; }
.po-product-table th:nth-child(6), .po-product-table td:nth-child(6) { width: 7%; }
.po-product-table th:nth-child(7), .po-product-table td:nth-child(7) { width: 8%; }
.po-product-table th:nth-child(8), .po-product-table td:nth-child(8) { width: 6%; }
.po-product-table th:nth-child(9), .po-product-table td:nth-child(9) { width: 9%; }
.po-product-table th:nth-child(10), .po-product-table td:nth-child(10) { width: 14%; }
.po-product-table th:nth-child(11), .po-product-table td:nth-child(11) { width: 6%; }
.po-product-table th:nth-child(12), .po-product-table td:nth-child(12) { width: 5%; }
.po-product-table td { overflow: hidden; }
.po-product-table input, .po-product-table select { min-width: 0; padding-left: 3px; padding-right: 3px; }
.po-product-table select { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.po-prod-after-params > div {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 6px !important; width: 100%;
}
.po-param-field { min-width: 0; gap: 3px; }
.po-param-field span { overflow: hidden; text-overflow: ellipsis; }
.po-param-field input { flex: 1 1 auto; width: 0; min-width: 0; }

/* 采购单展开式售后参数 */
.po-after-sale-detail { background: #f8fbff; }
.po-after-sale-detail > td { padding: 8px 12px !important; border-top: 0 !important; border-bottom: 1px solid #dce9f7 !important; }
.po-after-sale-detail-inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.po-after-sale-title { color: #3974b8; font-size: 12px; font-weight: 700; padding-right: 4px; }
.po-after-sale-detail .po-param-return,
.po-after-sale-detail .po-param-deduct { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 8px 14px; flex: 1 1 360px; }
.po-after-sale-detail .po-param-field { min-width: 150px; display: flex; align-items: center; gap: 8px; color: #52657b; font-size: 12px; }
.po-after-sale-detail .po-param-field span { flex: 0 0 auto; }
.po-after-sale-detail .po-param-field input { flex: 1 1 auto; width: auto; min-width: 70px; min-height: 28px; padding: 4px 7px; }
.po-after-sale-detail .po-param-return[style*="display: none"],
.po-after-sale-detail .po-param-deduct[style*="display: none"] { display: none !important; }

/* 主表现在只有 11 列，避免售后参数占用主录入区。 */
.po-product-table th:nth-child(1), .po-product-table td:nth-child(1) { width: 14%; }
.po-product-table th:nth-child(2), .po-product-table td:nth-child(2) { width: 10%; }
.po-product-table th:nth-child(3), .po-product-table td:nth-child(3) { width: 8%; }
.po-product-table th:nth-child(4), .po-product-table td:nth-child(4) { width: 7%; }
.po-product-table th:nth-child(5), .po-product-table td:nth-child(5) { width: 9%; }
.po-product-table th:nth-child(6), .po-product-table td:nth-child(6) { width: 7%; }
.po-product-table th:nth-child(7), .po-product-table td:nth-child(7) { width: 9%; }
.po-product-table th:nth-child(8), .po-product-table td:nth-child(8) { width: 7%; }
.po-product-table th:nth-child(9), .po-product-table td:nth-child(9) { width: 12%; }
.po-product-table th:nth-child(10), .po-product-table td:nth-child(10) { width: 10%; }
.po-product-table th:nth-child(11), .po-product-table td:nth-child(11) { width: 7%; }

/* 采购单对齐规范：表头、控件、数字和售后展开区统一居中。 */
.po-product-table th,
.po-product-table td { vertical-align: middle; text-align: center; }
.po-product-table th { height: 38px; line-height: 1.25; white-space: nowrap; }
.po-product-table input,
.po-product-table select { display: block; margin: 0 auto; text-align: center; text-align-last: center; }
.po-product-table input[type="number"] { text-align: center; }
.po-product-table input::placeholder { text-align: center; }
.po-product-table .po-prod-name,
.po-product-table .po-prod-sku { text-align: left; padding-left: 8px; }
.po-product-table .po-prod-name::placeholder,
.po-product-table .po-prod-sku::placeholder { text-align: left; }
.po-product-table .po-prod-after-sale { width: 100%; }
.po-product-table .diff-cell,
.po-product-table .po-prod-est-amount,
.po-product-table .po-prod-act-amount { text-align: center; white-space: nowrap; }
.po-after-sale-detail-inner { justify-content: center; align-items: center; min-height: 42px; }
.po-after-sale-title { min-width: 64px; text-align: center; }
.po-after-sale-detail .po-param-return,
.po-after-sale-detail .po-param-deduct { align-items: center; justify-items: stretch; }
.po-after-sale-detail .po-param-field { justify-content: center; align-items: center; }
.po-after-sale-detail .po-param-field span { min-width: 60px; text-align: right; }
.po-after-sale-detail .po-param-field input { margin: 0; text-align: center; }
.po-product-table td:last-child button { margin: 0 auto; display: inline-flex; align-items: center; justify-content: center; }

/* 售后参数重新做成等宽网格：标题独立，字段上下排列，避免横向错位。 */
.po-after-sale-detail-inner {
    display: grid; grid-template-columns: 76px repeat(4, minmax(120px, 1fr));
    align-items: start; gap: 10px 14px; min-height: 0; padding: 2px 4px;
}
.po-after-sale-title { grid-column: 1; align-self: center; min-width: 0; padding: 8px 0; text-align: center; }
.po-after-sale-detail .po-param-return,
.po-after-sale-detail .po-param-deduct {
    display: contents !important;
}
/* Keep visibility state stronger than the grid/layout rules above.  The old
   inline-style selector was fragile and could show both groups on first change. */
.po-after-sale-detail .po-param-return.po-param-hidden,
.po-after-sale-detail .po-param-deduct.po-param-hidden {
    display: none !important;
}
.po-after-sale-detail .po-param-field {
    min-width: 0; width: auto; display: grid; grid-template-columns: 1fr; gap: 4px;
    justify-content: stretch; align-items: stretch; color: #52657b; font-size: 11px;
}
.po-after-sale-detail .po-param-field span {
    min-width: 0; width: 100%; text-align: left; line-height: 18px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.po-after-sale-detail .po-param-field input {
    width: 100%; min-width: 0; height: 29px; margin: 0;
    padding: 4px 8px; text-align: center; border-radius: 5px;
}

/* Purchase order form rhythm: every label and control shares one baseline. */
#purchaseOrderModal .po-form-grid {
    display: grid;
    gap: 14px;
    align-items: end;
}
#purchaseOrderModal .po-basic-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 16px;
}
#purchaseOrderModal .po-payment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 12px;
}
#purchaseOrderModal .po-form-field {
    display: grid;
    grid-template-rows: 18px 36px;
    gap: 6px;
    min-width: 0;
    align-items: stretch;
}
#purchaseOrderModal .po-form-field > label,
#purchaseOrderModal .po-payment-proof > label {
    display: block;
    height: 18px;
    margin: 0 !important;
    color: #526070;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
}
#purchaseOrderModal .po-form-field > input,
#purchaseOrderModal .po-form-field > select {
    display: block;
    width: 100%;
    min-width: 0;
    height: 36px;
    margin: 0 !important;
    padding: 7px 10px;
    border: 1px solid #d8e1ec;
    border-radius: 7px;
    background: #fff;
    color: #1f2937;
    font-size: 13px;
    line-height: 20px;
}
#purchaseOrderModal .po-form-field > input:focus,
#purchaseOrderModal .po-form-field > select:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(59,130,246,.10);
}
#purchaseOrderModal .po-payment-card {
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #fff;
}
#purchaseOrderModal .po-payment-title {
    margin-bottom: 12px;
    color: #253247;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}
#purchaseOrderModal .po-payment-proof > label { margin-bottom: 6px !important; }
.readonly-account-badge {
    flex: 0 0 auto;
    padding: 5px 9px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.readonly-mode .ag-center-cols-container input,
.readonly-mode .ag-center-cols-container select,
.readonly-mode .ag-center-cols-container textarea {
    pointer-events: none;
}
.readonly-mode .readonly-protected-action {
    display: none !important;
}
@media print {
    body.readonly-mode * { visibility: hidden !important; }
    body.readonly-mode::before {
        content: '只读账户禁止打印';
        visibility: visible !important;
        position: fixed;
        inset: 0;
        display: grid;
        place-items: center;
        color: #991b1b;
        font: 700 24px/1.5 "Microsoft YaHei", sans-serif;
    }
}
@media (max-width: 900px) {
    #purchaseOrderModal .po-basic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    #purchaseOrderModal .po-basic-grid,
    #purchaseOrderModal .po-payment-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MODERN ADMIN POLISH 2026-10-10
   Ant/TDesign 的后台层级 + shadcn/Semi 的轻量组件质感。
   ============================================================ */
:root {
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --control-height: 34px;
    --focus-ring: 0 0 0 3px rgba(59,130,246,.14);
}
body { letter-spacing: .01em; }
.topbar { min-height: 56px; padding-top: 10px; padding-bottom: 10px; }
.content-area { padding: 12px 18px; }
.tab-content { border-radius: 10px; }
.toolbar, .toolbar-hr { min-height: 50px; padding-top: 9px; padding-bottom: 9px; }
.btn { min-height: 32px; border-radius: 7px; font-weight: 600; }
.btn:focus-visible, .filter-btn:focus-visible, .tab-btn:focus-visible,
.po-product-table input:focus-visible, .po-product-table select:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none; box-shadow: var(--focus-ring); border-color: #60a5fa !important;
}
.btn-primary, .btn-purple { background: linear-gradient(135deg,#3b82f6,#6366f1); }
.btn-primary:hover, .btn-purple:hover { background: linear-gradient(135deg,#2563eb,#4f46e5); }
.btn-secondary, .filter-btn { min-height: 32px; border-radius: 7px; }
.month-filter-select, .daily-date-select, .po-product-table input, .po-product-table select {
    min-height: 32px; border-radius: 6px; border-color: #d7e0eb;
}
.card, .stat-card, .po-card { border-radius: 10px; }
.card-header { padding: 14px 18px; }
.ag-theme-alpine .ag-header-cell-text { font-weight: 700 !important; letter-spacing: .1px; }
.ag-theme-alpine .ag-row:hover { box-shadow: inset 2px 0 0 #60a5fa; }
.ag-theme-alpine .ag-cell-focus { box-shadow: var(--focus-ring); border-color: #60a5fa !important; }
.wps-filter-panel, .ac-dropdown { border-radius: 9px; }
.wps-filter-search-input, .wps-filter-btn { border-radius: 6px; }
.modal-dialog, .modal-box { border-radius: 12px; border: 1px solid #e2e8f0; }
.modal-header, .modal-footer { background: #fbfdff; }
.modal-close:hover { color: #2563eb; background: #eff6ff; }
.po-express-block { border-radius: 10px; border-color: #dce6f2; }
.po-express-header input { min-height: 34px; }
.po-add-product-btn { background: #f8fbff; border-radius: 7px; font-weight: 600; }
.po-add-product-btn:hover { background: #edf5ff; transform: translateY(-1px); }
.po-after-sale-detail { background: #f8fbff; }
.po-after-sale-title { color: #2563eb; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
    .tab-content.active { animation: modernPageIn .22s ease-out; }
    .po-after-sale-detail { animation: modernExpand .18s ease-out; }
}
@keyframes modernPageIn { from { opacity: .7; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@keyframes modernExpand { from { opacity: .6; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }

/* 明显可见的现代化层级升级：浅色 SaaS 后台视觉。 */
.topbar { position: relative; box-shadow: 0 1px 0 #e7eef7, 0 5px 18px rgba(38,78,122,.06); }
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg,#3b82f6,#8b5cf6,transparent 72%); opacity: .9; }
.current-module { font-size: 19px; letter-spacing: .02em; }
.tab-nav { gap: 6px; padding: 8px 18px; border-bottom: 1px solid #e5edf6; }
.tab-btn { border: 0; border-radius: 7px; padding: 8px 14px; font-weight: 600; }
.tab-btn:hover { background: #eef6ff; }
.tab-btn.active { background: linear-gradient(135deg,#eaf4ff,#f0edff); border: 1px solid #cfe2fb; box-shadow: 0 3px 10px rgba(59,130,246,.10); }
.nav-section { margin-top: 10px; font-size: 10px; letter-spacing: 1.2px; }
.nav-item { min-height: 40px; border: 1px solid transparent; }
.nav-item.active { border-color: rgba(147,197,253,.4); }
.toolbar { box-shadow: 0 1px 0 rgba(226,234,243,.8); }
.toolbar .btn-primary, .toolbar .btn-purple { min-height: 34px; padding-left: 15px; padding-right: 15px; }
.stat-card, .purchase-stats-card { position: relative; overflow: hidden; }
.stat-card::before, .purchase-stats-card::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg,#3b82f6,#8b5cf6); }
.card, .po-card { box-shadow: 0 5px 18px rgba(38,78,122,.08); }
.card:hover, .po-card:hover { box-shadow: 0 9px 26px rgba(38,78,122,.13); }
.ag-theme-alpine .ag-header { box-shadow: inset 0 -2px 0 #dbeafe; }
.ag-theme-alpine .ag-header-cell-text { color: #334155 !important; }
.ag-theme-alpine .ag-row-selected::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #3b82f6; }
.wps-filter-header { font-size: 13px; }
.modal-dialog { box-shadow: 0 22px 70px rgba(15,23,42,.20); }
.global-search-wrap { position: relative; width: min(340px, 28vw); min-width: 220px; }
.global-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-51%); color: #7b8da5; font-size: 18px; pointer-events: none; }
.global-search-input { width: 100%; height: 34px; padding: 0 12px 0 32px; border: 1px solid #d7e0eb; border-radius: 8px; background: #f8fbff; color: #24364b; transition: .2s ease; }
.global-search-input:focus { outline: none; background: #fff; border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.global-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20000; overflow: hidden; border: 1px solid #dbe7f5; border-radius: 10px; background: #fff; box-shadow: 0 18px 45px rgba(15,23,42,.18); }
.global-search-result { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #eef3f8; cursor: pointer; }
.global-search-result:last-child { border-bottom: 0; }
.global-search-result:hover { background: #f2f7ff; }
.global-search-result-type { flex: 0 0 auto; padding: 3px 6px; border-radius: 5px; background: #eaf4ff; color: #2563eb; font-size: 10px; font-weight: 700; }
.global-search-result-body { min-width: 0; }
.global-search-result-title { overflow: hidden; color: #26384d; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.global-search-result-meta { overflow: hidden; margin-top: 2px; color: #8a9aae; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.global-search-empty { padding: 18px; color: #94a3b8; font-size: 12px; text-align: center; }
@media (max-width: 1100px) { .global-search-wrap { min-width: 180px; width: 220px; } }
.todo-center-wrap { position: relative; }
.todo-center-btn { position: relative; height: 34px; padding: 0 12px; border: 1px solid #d7e0eb; border-radius: 8px; background: #fff; color: #52657b; font-size: 13px; font-weight: 600; cursor: pointer; }
.todo-center-btn:hover { color: #2563eb; border-color: #9ec5f5; background: #f5f9ff; }
.todo-center-badge { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 10px; background: #ef4444; color: #fff; font-size: 10px; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.todo-center-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20000; width: 310px; overflow: hidden; border: 1px solid #dbe7f5; border-radius: 10px; background: #fff; box-shadow: 0 18px 45px rgba(15,23,42,.18); }
.todo-center-head { padding: 12px 14px; border-bottom: 1px solid #eef3f8; color: #26384d; font-size: 14px; font-weight: 700; }
.todo-center-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid #f0f4f8; cursor: pointer; }
.todo-center-item:hover { background: #f4f8ff; }
.todo-center-item-title { color: #52657b; font-size: 12px; }
.todo-center-item-count { min-width: 26px; padding: 3px 7px; border-radius: 10px; background: #fff7ed; color: #ea580c; font-size: 11px; font-weight: 700; text-align: center; }
.todo-center-item-count.zero { background: #f1f5f9; color: #94a3b8; }
.todo-center-empty { padding: 22px 14px; color: #64748b; font-size: 12px; text-align: center; }

@media (max-width: 768px) {
    .topbar { height: auto; min-height: 0; flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
    .topbar-left, .topbar-right { width: 100%; min-width: 0; }
    .topbar-right { flex-wrap: wrap; justify-content: space-between; gap: 8px; }
    .global-search-wrap { order: 5; flex: 1 1 100%; width: 100%; min-width: 0; }
    .todo-center-panel { width: min(310px, calc(100vw - 20px)); }
    .grid-filter-tools { max-width: 100vw; overflow-x: auto; }
}