/* =====================================================================
   企业ERP系统 · 清爽商务风设计系统 (UI 升级 v2)
   说明：保留全部既有组件类名（.sidebar/.card/.table/.badge/.btn/.form-control/.modal…），
   仅重做视觉；新增 .topbar/.kpi/.pill/.feed/.q-card 等类用于外壳与仪表盘。
   ===================================================================== */
:root{
    /* 企业微信风格配色 */
    --brand:#2F7DFB; --brand-700:#1A6FE0; --brand-600:#2F7DFB; --brand-50:#EAF3FF; --brand-100:#EAF3FF;
    --bg:#F5F6F8; --surface:#FFFFFF; --surface-2:#EEF1F6;
    --border:#E7E9ED; --border-strong:#D8DBE0;
    --text:#1A1A1A; --text-2:#576B95; --text-3:#9AA0A6;
    --success:#07C160; --success-bg:#E8F8EF; --success-ink:#07C160;
    --warning:#FF9D00; --warning-bg:#FFF4E0; --warning-ink:#B57400;
    --danger:#FA5151;  --danger-bg:#FFECEC;  --danger-ink:#D43C3C;
    --info:#2F7DFB;    --info-bg:#EAF3FF;    --info-ink:#1A6FE0;
    --sidebar-1:#F5F6F8; --sidebar-2:#EBEDF0; --sidebar-line:#E7E9ED;
    --radius:14px; --radius-sm:9px; --radius-xs:7px;
    --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05);
    --shadow-md:0 6px 20px rgba(16,24,40,.08);
    --shadow-lg:0 16px 40px rgba(16,24,40,.12);
    --sidebar-w:248px;
}

* { margin:0; padding:0; box-sizing:border-box; }
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
    background:var(--bg); color:var(--text); line-height:1.55; font-size:14px;
    -webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#cbd3e0;border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:#b4bdce;}

/* ============ 应用外壳 ============ */
.app-container{ display:flex; min-height:100vh; }

/* ---------- 侧边栏 ---------- */
.sidebar{
    width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
    background:linear-gradient(180deg,var(--sidebar-1),var(--sidebar-2));
    color:var(--text-2); display:flex; flex-direction:column;
    position:fixed; top:0; left:0; bottom:0; z-index:200;
    transition:width .22s ease, transform .25s ease;
    overflow:hidden; border-right:1px solid var(--border);
}
body.sidebar-collapsed .sidebar{ width:76px; flex-basis:76px; }

.sidebar-header{
    display:flex; align-items:center; gap:12px; height:64px; padding:0 18px;
    border-bottom:1px solid var(--sidebar-line); flex:0 0 64px;
}
.brand-logo{
    width:34px; height:34px; border-radius:10px; flex:0 0 34px;
    background:linear-gradient(135deg,#2F7DFB,#1A6FE0); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px;
    box-shadow:0 4px 12px rgba(47,125,251,.35);
}
.brand-name{ color:#1A1A1A; font-weight:700; font-size:15px; white-space:nowrap; }
body.sidebar-collapsed .brand-name{ display:none; }

.sidebar-nav{ flex:1; overflow-y:auto; padding:10px 12px; }
.sidebar-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); }

.nav-group{ margin-top:2px; }
.group-toggle{
    display:flex; align-items:center; gap:9px; width:100%; padding:13px 12px 7px;
    background:none; border:none; font:inherit; cursor:pointer; color:var(--text-2);
    font-size:11px; font-weight:700; letter-spacing:.12em;
}
.group-toggle .gi{ width:17px; height:17px; flex:0 0 17px; color:var(--text-2); }
.group-toggle .gt-text{ flex:1; text-align:left; }
.group-toggle .chev{ width:14px; height:14px; flex:0 0 14px; transition:transform .2s; color:var(--text-3); }
.nav-group.collapsed .group-toggle .chev{ transform:rotate(-90deg); }
.nav-children{ overflow:hidden; }
.nav-group.collapsed .nav-children{ display:none; }
body.sidebar-collapsed .nav-group .nav-children{ display:none; }
body.sidebar-collapsed .group-toggle{ justify-content:center; padding:13px 0 7px; }
body.sidebar-collapsed .group-toggle .gt-text,
body.sidebar-collapsed .group-toggle .chev{ display:none; }

.nav-item{
    display:flex; align-items:center; gap:12px; padding:10px 12px; margin:2px 0;
    border-radius:10px; color:var(--text-2); text-decoration:none; font-size:14px;
    position:relative; transition:background .15s,color .15s; white-space:nowrap;
}
.nav-item:hover{ background:#ECEEF2; color:var(--text); }
.nav-item.active{ background:var(--brand-50); color:var(--brand-700); font-weight:600; }
.nav-item.active::before{
    content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:4px;
    border-radius:0 4px 4px 0; background:var(--brand);
}
.nav-item.active .nav-icon{ color:var(--brand); }
.nav-icon{ width:20px; text-align:center; font-size:16px; flex:0 0 20px; }
/* 防御：侧栏菜单内联 SVG 图标统一约束尺寸（报表分析等曾因缺这条渲染成 131×131） */
.nav-item svg{ width:18px; height:18px; flex:0 0 18px; color:var(--text-2); }
/* 二级菜单：纯文字、无图标、缩进 */
.nav-children .nav-item{ padding:9px 12px 9px 34px; margin:1px 0; gap:0; }
.nav-children .nav-item .nav-icon{ display:none; }
.nav-children .nav-item.active::before{ left:0; }
.nav-label{ flex:1; }
.nav-badge{
    background:#ef4444; color:#fff; font-size:11px; font-weight:700; border-radius:20px;
    padding:1px 7px; flex:0 0 auto;
}
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-badge:not([data-pos]){ display:none; }
body.sidebar-collapsed .nav-item{ justify-content:center; }

/* 侧栏用户信息 */
.sidebar-user{
    display:flex; align-items:center; gap:10px; padding:14px 16px;
    border-top:1px solid var(--sidebar-line);
}
.sidebar-user-info{ display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.avatar{
    width:36px; height:36px; border-radius:50%; flex:0 0 36px;
    background:linear-gradient(135deg,#2F7DFB,#1A6FE0); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:700;
}
.sidebar-user-avatar{ font-size:20px; }
.sidebar-user-name{ color:#576B95; font-size:13px; font-weight:600; flex:1; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.sidebar-collapsed .sidebar-user-name,
body.sidebar-collapsed .sidebar-logout{ display:none; }
.sidebar-logout{ color:#94a3b8; text-decoration:none; font-size:16px; transition:color .2s; }
.sidebar-logout:hover{ color:#f87171; }

/* 移动端抽屉遮罩 */
.sidebar-backdrop{ display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:190; }

/* ---------- 主区 + 顶栏 ---------- */
.main{ flex:1; min-width:0; margin-left:var(--sidebar-w); transition:margin-left .22s ease; display:flex; flex-direction:column; }
body.sidebar-collapsed .main{ margin-left:76px; }

.topbar{
    height:64px; background:var(--surface); border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:150; display:flex; align-items:center; gap:14px; padding:0 24px;
}
.top-toggle{
    width:38px; height:38px; border:1px solid var(--border); background:#fff; border-radius:10px;
    cursor:pointer; font-size:16px; color:var(--text-2); flex:0 0 38px; transition:.15s;
}
.top-toggle:hover{ background:var(--surface-2); color:var(--brand); }
.crumb{ color:var(--text-2); font-size:13px; }
.crumb b{ color:var(--text); font-weight:600; }
.search{ position:relative; flex:1; max-width:440px; }
.search .s-ico{ position:absolute; left:13px; top:11px; color:var(--text-3); font-size:14px; }
.search input{
    width:100%; height:40px; border:1px solid var(--border); border-radius:10px;
    padding:0 14px 0 38px; background:var(--surface-2); font-size:14px; color:var(--text);
}
.search input:focus{ outline:none; border-color:var(--brand); background:#fff; box-shadow:0 0 0 3px rgba(47,125,251,.12); }
.top-actions{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.icon-btn{
    width:40px; height:40px; border:1px solid var(--border); background:#fff; border-radius:10px;
    cursor:pointer; position:relative; font-size:16px; color:var(--text-2); transition:.15s;
}
.icon-btn:hover{ background:var(--surface-2); color:var(--brand); }
.icon-btn .dot{ position:absolute; top:7px; right:8px; width:8px; height:8px; background:#ef4444; border-radius:50%; border:2px solid #fff; }

/* 顶部栏下拉容器 */
.top-action-wrap{ position:relative; }
.topbar-dropdown, .global-search-dropdown{
    position:absolute; top:calc(100% + 8px); right:0; width:340px; max-height:420px; overflow-y:auto;
    background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg);
    z-index:1200; padding:8px 0;
}
.global-search-dropdown{ right:auto; left:0; width:100%; padding:4px 0; }
.topbar-empty{ padding:20px; text-align:center; color:var(--text-2); font-size:13px; }

/* 全局搜索下拉 */
.search-result-item{ display:block; padding:10px 14px; border-bottom:1px solid #f1f5f9; text-decoration:none; color:inherit; cursor:pointer; }
.search-result-item:last-child{ border-bottom:none; }
.search-result-item:hover{ background:var(--surface-2); }
.sr-main{ display:flex; align-items:center; gap:8px; font-size:14px; }
.sr-type{ font-size:11px; padding:2px 6px; background:var(--surface-2); color:var(--brand); border-radius:4px; white-space:nowrap; }
.sr-title{ font-weight:600; color:var(--text); }
.sr-sub{ font-size:12px; color:var(--text-2); margin-top:3px; }
.sr-meta{ color:var(--brand); font-weight:500; }

/* 待办/通知下拉 */
.tb-section{ border-bottom:1px solid #f1f5f9; }
.tb-section:last-child{ border-bottom:none; }
.tb-section-title{ padding:8px 14px; font-size:12px; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:.3px; }
.tb-item{ display:block; padding:9px 14px; text-decoration:none; color:inherit; cursor:pointer; }
.tb-item:hover{ background:var(--surface-2); }
.tb-item-title{ display:block; font-size:13px; font-weight:500; color:var(--text); }
.tb-item-sub{ display:block; font-size:12px; color:var(--text-2); margin-top:2px; line-height:1.4; }

/* 帮助模态框内容 */
.help-content h4{ font-size:14px; font-weight:600; margin:16px 0 8px; color:var(--text); }
.help-content h4:first-child{ margin-top:0; }
.help-content ul{ margin:0 0 12px 18px; padding:0; font-size:13px; color:var(--text-2); line-height:1.8; }
.help-content p{ font-size:13px; color:var(--text-2); margin:0; }
.help-content kbd{ display:inline-block; padding:2px 6px; background:var(--surface-2); border:1px solid var(--border); border-radius:4px; font-size:12px; font-family:monospace; }

.main-content{ padding:24px; min-height:calc(100vh - 64px); flex:1; }

/* ---------- 页面标题 ---------- */
.page-header{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; gap:16px; flex-wrap:wrap; }
.page-header h1{ font-size:22px; font-weight:700; }
.page-header p{ color:var(--text-2); font-size:13px; margin-top:2px; }

/* 页内子页签（如 销售管理 ⇄ 销售回款；采购管理 ⇄ 采购付款） */
.page-tabs{ display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--border); }
.page-tabs a, .page-tabs .tab-btn{ padding:10px 16px; font-size:14px; color:var(--text-2); text-decoration:none; border:none; background:transparent; border-bottom:2px solid transparent; margin-bottom:-1px; font-weight:600; transition:.15s; cursor:pointer; font-family:inherit; }
.page-tabs a:hover, .page-tabs .tab-btn:hover{ color:var(--brand); }
.page-tabs a.active, .page-tabs .tab-btn.active{ color:var(--brand); border-bottom-color:var(--brand); }

/* ============ KPI 卡（仪表盘，新） ============ */
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:16px; }
.kpi{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:18px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; transition:.18s;
}
.kpi:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
/* KPI 卡可点击进入相关菜单 */
a.kpi.kpi-link{ display:block; text-decoration:none; color:inherit; cursor:pointer; }
a.kpi.kpi-link:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--brand); }
.kpi .k-label{ color:var(--text-2); font-size:13px; }
.kpi .k-val{ font-size:26px; font-weight:800; margin:6px 0 2px; letter-spacing:-.5px; }
.kpi .k-val .u{ font-size:14px; color:var(--text-3); font-weight:600; }
.kpi .k-sub{ font-size:12px; color:var(--text-3); }
.delta{ display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:700; padding:2px 7px; border-radius:20px; }
.delta.up{ color:var(--success-ink); background:var(--success-bg); }
.delta.down{ color:var(--danger-ink); background:var(--danger-bg); }
.delta.warn{ color:var(--warning-ink); background:var(--warning-bg); }
.spark{ position:absolute; right:14px; bottom:14px; opacity:.9; }

/* 旧版 stats-grid 也顺手美化（兼容性） */
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm); transition:transform .2s; }
.stat-card:hover{ transform:translateY(-2px); }
.stat-card .stat-label{ font-size:13px; color:var(--text-2); margin-bottom:8px; }
.stat-card .stat-value{ font-size:26px; font-weight:800; color:var(--text); }
.stat-card .stat-sub{ font-size:12px; color:var(--text-3); margin-top:4px; }
.stat-card.primary .stat-value{ color:var(--brand); }
.stat-card.success .stat-value{ color:var(--success); }
.stat-card.info .stat-value{ color:var(--info); }
.stat-card.warning .stat-value{ color:var(--warning); }
.stat-card.danger .stat-value{ color:var(--danger); }

/* ============ 卡片 ============ */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); margin-bottom:16px; }
.card-header{ padding:16px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.card-header h3{ font-size:15px; font-weight:700; }
.card-body{ padding:20px; }

/* 布局网格 */
.dash-grid{ display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.grid{ display:grid; gap:16px; }
.grid-2-1{ grid-template-columns:2fr 1fr; align-items:stretch; }
.grid-2-1 > .card, .grid-2-1 > .col-right{ display:flex; flex-direction:column; }
.grid-2-1 > .card > .card-body{ flex:1; display:flex; flex-direction:column; }
.col-right{ gap:16px; }
.col-right > .card{ flex:1; display:flex; flex-direction:column; }
.col-right > .card > .card-body{ flex:1; }

/* ============ 趋势图 / 图表 ============ */
.chart-container{ width:100%; height:300px; position:relative; }
.trend-chart{ flex:1; min-height:240px; height:auto; }
.seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:3px; }
.seg button{ border:none; background:transparent; padding:5px 12px; border-radius:7px; font-size:13px; cursor:pointer; color:var(--text-2); font-weight:600; transition:.15s; }
.seg button.on{ background:#fff; color:var(--brand); box-shadow:var(--shadow-sm); }

/* ============ 仪表盘组件：待办/预警/快速操作 ============ */
.feed{ display:flex; flex-direction:column; gap:4px; }
.feed-item{ display:flex; gap:12px; padding:11px; border-radius:10px; transition:background .15s; align-items:flex-start; }
.feed-item:hover{ background:var(--surface-2); }
.fi-ico{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:15px; flex:0 0 34px; }
.fi-ico.warn{ background:var(--warning-bg); color:var(--warning-ink); }
.fi-ico.info{ background:var(--info-bg); color:var(--info-ink); }
.fi-ico.danger{ background:var(--danger-bg); color:var(--danger-ink); }
.fi-main{ flex:1; min-width:0; }
.fi-title{ font-weight:600; font-size:14px; }
.fi-sub{ color:var(--text-2); font-size:12px; margin-top:1px; }
.fi-amt{ font-weight:800; font-size:14px; white-space:nowrap; }
.fi-amt.danger{ color:var(--danger-ink); } .fi-amt.warn{ color:var(--warning-ink); }
/* 仪表盘预览区限高，避免应收/应付预警列表过长把卡片无限拉长 */
#alerts-preview, #todo-preview{ max-height:210px; overflow-y:auto; }
.feed-more{ padding:10px 4px 2px; margin-top:4px; border-top:1px dashed var(--border); font-size:12px; color:var(--text-2); text-align:center; }

.quick{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.q-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px; display:flex; align-items:center; gap:12px; cursor:pointer; transition:.15s; }
.q-card:hover{ border-color:var(--brand); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.q-ico{ width:40px; height:40px; border-radius:10px; background:var(--brand-50); color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 40px; }
.q-card b{ font-size:14px; } .q-card span{ display:block; color:var(--text-3); font-size:12px; }

/* ============ 表格（新：table-wrap + 药丸 + hover 操作） ============ */
.toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.toolbar .search{ margin:0; max-width:320px; }
.field{ height:40px; border:1px solid var(--border); border-radius:10px; padding:0 12px; background:#fff; color:var(--text); font-size:14px; }
.field:focus{ outline:none; border-color:var(--brand); }
.spacer{ flex:1; }

/* 兼容旧列表页工具栏（search-box，未改模板即可生效） */
.search-box{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.search-box .form-control{ max-width:300px; }

.table-wrap{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.table-container{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:14px; }
thead th{
    background:var(--surface-2); text-align:left; font-size:12px; font-weight:700; color:var(--text-2);
    padding:13px 16px; border-bottom:1px solid var(--border); position:sticky; top:0; white-space:nowrap; z-index:1;
}
tbody td{ padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:#f8faff; }
.mono{ font-variant-numeric:tabular-nums; }

/* 状态药丸（新 .pill；同时美化旧 .badge，零模板改动即升级） */
.pill, .badge{
    display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px;
    font-size:12px; font-weight:600; white-space:nowrap;
}
.pill.s,.badge-success{ background:var(--success-bg); color:var(--success-ink); }
.pill.w,.badge-warning{ background:var(--warning-bg); color:var(--warning-ink); }
.pill.d,.badge-danger{ background:var(--danger-bg); color:var(--danger-ink); }
.pill.n,.badge-info{ background:var(--info-bg); color:var(--info-ink); }
.pill.default,.badge-default{ background:#eef2f7; color:#475569; }

.row-act{ display:flex; gap:6px; justify-content:flex-end; opacity:0; transition:.15s; }
tbody tr:hover .row-act{ opacity:1; }
.mini{ width:30px; height:30px; border:1px solid var(--border); background:#fff; border-radius:8px; cursor:pointer; color:var(--text-2); font-size:13px; transition:.15s; }
.mini:hover{ border-color:var(--brand); color:var(--brand); }

/* 分页 */
.pagination{ display:flex; justify-content:center; gap:4px; margin-top:18px; flex-wrap:wrap; }
.pagination button{ padding:6px 12px; border:1px solid var(--border); background:#fff; border-radius:var(--radius-xs); cursor:pointer; font-size:14px; transition:.15s; }
.pagination button.active{ background:var(--brand); color:#fff; border-color:var(--brand); }
.pagination button:hover:not(.active){ background:var(--surface-2); }

/* 空状态 */
.empty-state{ text-align:center; padding:60px 20px; color:var(--text-2); }
.empty-state .empty-icon{ font-size:48px; margin-bottom:16px; }

/* ============ 按钮 ============ */
.btn{ display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 16px; border:none; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; transition:.15s; text-decoration:none; }
.btn-primary{ background:var(--brand); color:#fff; box-shadow:0 4px 12px rgba(47,125,251,.3); }
.btn-primary:hover{ background:var(--brand-700); }
.btn-success{ background:var(--success); color:#fff; }
.btn-success:hover{ background:#15803d; }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-danger:hover{ background:#dc2626; }
.btn-warning{ background:var(--warning); color:#fff; }
.btn-sm{ padding:4px 12px; font-size:13px; height:32px; }
.btn-block{ width:100%; justify-content:center; padding:12px; font-size:16px; }
.btn-outline{ background:transparent; border:1px solid var(--border); color:var(--text); }
.btn-outline:hover{ background:var(--surface-2); }
.btn-group{ display:flex; gap:8px; }

/* ============ 表单 ============ */
.form-group{ margin-bottom:16px; }
.form-group label{ display:block; font-size:13px; font-weight:600; color:var(--text-2); margin-bottom:6px; }
.form-control{ width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:10px; font-size:14px; transition:border-color .2s; font-family:inherit; background:#fff; color:var(--text); }
.form-control:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(47,125,251,.12); }
select.form-control{ cursor:pointer; }
textarea.form-control{ resize:vertical; min-height:80px; }
.form-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.required{ color:var(--danger); }

/* ============ 模态框 ============ */
.modal-overlay{ position:fixed; inset:0; background:rgba(16,24,40,.5); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal{ background:#fff; border-radius:14px; width:94%; max-width:900px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); }
.modal-lg{ max-width:1120px; max-height:92vh; }
.modal-header{ padding:16px 24px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; background:#fff; z-index:1; }
.modal-header h3{ font-size:16px; font-weight:700; }
.modal-close{ background:none; border:none; font-size:24px; cursor:pointer; color:var(--text-2); line-height:1; }
.modal-body{ padding:24px; }
.modal-footer{ padding:16px 24px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }
.card-header-flex{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.card-header-flex h2{ margin:0; font-size:16px; font-weight:600; }

/* ============ Toast ============ */
.toast-container{ position:fixed; top:20px; right:20px; z-index:2000; display:flex; flex-direction:column; gap:8px; }
.toast{ padding:12px 20px; border-radius:10px; color:#fff; font-size:14px; box-shadow:var(--shadow-lg); animation:slideIn .3s ease; min-width:250px; }
.toast-success{ background:var(--success); } .toast-error{ background:var(--danger); } .toast-warning{ background:var(--warning); }
@keyframes slideIn{ from{ transform:translateX(100%); opacity:0; } to{ transform:translateX(0); opacity:1; } }

/* ============ 链接 / 审批 ============ */
a.link,.link{ color:var(--info-ink); cursor:pointer; text-decoration:none; }
a.link:hover,.link:hover{ text-decoration:underline; }
.approval-chain{ margin:0 0 4px 18px; padding:0; }
.approval-chain li{ margin:2px 0; }
.approval-chain li.current{ font-weight:600; }
.approval-chain li.done{ color:var(--success); }
.approval-chain li.todo{ color:var(--text-3); }
.approval-log{ margin:0 0 4px 18px; padding:0; }
.approval-log li{ margin:2px 0; }
.approval-log li.approve{ color:var(--success); }
.approval-log li.reject{ color:var(--danger); }
.approval-log li.submit{ color:var(--text-2); }

.approval-progress{ position:relative; min-width:120px; height:18px; background:#eef2f7; border-radius:9px; overflow:hidden; }
.approval-progress-fill{ position:absolute; left:0; top:0; bottom:0; border-radius:9px; transition:width .3s ease; }
.approval-progress.done .approval-progress-fill{ background:#07C160; }
.approval-progress.pending .approval-progress-fill{ background:linear-gradient(90deg,#FF9D00,#FFB74D); }
.approval-progress.rejected .approval-progress-fill{ background:#FA5151; }
.approval-progress.indeterminate .approval-progress-fill{ background:#94a3b8; width:100% !important; opacity:.35; }
.approval-progress-label{ position:absolute; left:0; right:0; top:0; line-height:18px; text-align:center; font-size:11px; color:#1f2937; font-weight:600; }

/* ============ 4 角色并行审批（回款/付款） ============ */
.role-chips{ display:flex; flex-wrap:wrap; gap:4px; }
.role-chip{ display:inline-flex; align-items:center; gap:3px; font-size:11px; line-height:1; padding:3px 7px; border-radius:6px; white-space:nowrap; border:1px solid var(--border); }
.role-chip.todo{ background:#f3f5f8; color:#9aa0a6; }
.role-chip.done{ background:var(--success-bg); color:var(--success-ink); border-color:transparent; }
.role-chip.rejected{ background:var(--danger-bg); color:var(--danger-ink); border-color:transparent; }
.role-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:6px 0 4px; }
@media(max-width:640px){ .role-grid{ grid-template-columns:repeat(2,1fr); } }
.role-card{ border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:var(--surface); display:flex; flex-direction:column; gap:6px; }
.role-card.done{ border-color:var(--success); background:var(--success-bg); }
.role-card.rejected{ border-color:var(--danger); background:var(--danger-bg); }
.role-card-head{ display:flex; align-items:center; justify-content:space-between; }
.role-name{ font-weight:600; color:var(--text); font-size:13px; }
.role-by{ font-size:11px; color:var(--text-3); }
.role-comment{ font-size:12px; color:var(--text-2); background:rgba(0,0,0,.03); padding:4px 6px; border-radius:6px; }
.role-actions{ display:flex; gap:6px; margin-top:2px; }

/* ============ 权限矩阵 ============ */
.perm-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px 12px; max-height:260px; overflow-y:auto; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); }
.perm-item{ display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; user-select:none; }
.perm-item input[type="checkbox"]{ width:15px; height:15px; cursor:pointer; }
.perm-group{ border:1px solid var(--border); border-radius:8px; margin:0 0 12px 0; padding:4px 14px 12px 14px; background:#fff; }
.perm-group legend{ font-size:13px; font-weight:600; color:#374151; padding:0 8px; }
.perm-group .perm-grid{ max-height:none; overflow:visible; border:none; background:transparent; padding:8px 0 0 0; }
.text-center{ text-align:center; }
.table .btn-sm{ margin-right:4px; }

/* ============ 带搜索的下拉选择 ============ */
.search-select{ position:relative; }
.search-select-input{ width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:10px; font-size:14px; font-family:inherit; transition:border-color .2s; background:#fff; }
.search-select-input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(47,125,251,.12); }
.search-select-list{ position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-lg); max-height:260px; overflow-y:auto; z-index:1100; }
.search-select-item{ padding:9px 12px; font-size:14px; cursor:pointer; border-bottom:1px solid #f1f5f9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-select-item:last-child{ border-bottom:none; }
.search-select-item:hover{ background:var(--surface-2); }
.search-select-empty{ padding:12px; text-align:center; color:var(--text-2); font-size:13px; }

/* ============ 分类管理 ============ */
.category-list{ max-height:360px; overflow-y:auto; margin-bottom:16px; }
.category-item{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border:1px solid var(--border); border-radius:10px; margin-bottom:8px; }
.category-item-info strong{ display:block; font-size:14px; }
.category-item-info small{ color:var(--text-2); font-size:12px; }
.category-item-actions{ display:flex; gap:6px; }

/* 序列号录入 */
.sn-list{ max-height:160px; overflow-y:auto; border:1px solid var(--border); border-radius:6px; padding:8px; display:flex; flex-wrap:wrap; gap:6px 14px; background:var(--surface-2); }
.sn-check{ display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:400; margin:0; cursor:pointer; white-space:nowrap; }
.sn-check input{ margin:0; }

/* ============ 销售单明细行 ============ */
.so-item-row{ display:flex; flex-wrap:nowrap; gap:10px; align-items:flex-end; margin-bottom:10px; padding:8px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }
.so-item-row > .form-group{ margin-bottom:0; display:flex; flex-direction:column; }
.so-item-row .fg-product{ flex:1 1 240px; min-width:180px; }
.so-item-row .fg-supplier{ flex:1 1 200px; min-width:160px; }
.so-item-row .fg-qty{ flex:0 0 100px; } .so-item-row .fg-unit{ flex:0 0 80px; }
.so-item-row .fg-price{ flex:0 0 130px; } .so-item-row .fg-total{ flex:0 0 130px; } .so-item-row .fg-action{ flex:0 0 auto; }
.so-item-row .form-group label{ white-space:nowrap; margin-bottom:6px; }
.so-item-row .item-total{ display:flex; align-items:center; min-height:38px; font-weight:600; white-space:nowrap; }
.so-date-row{ grid-template-columns:repeat(auto-fit,minmax(180px,180px)); }
.so-date-row > .form-group{ max-width:180px; }
.form-row .fg-salesperson{ max-width:240px; }
.form-row .fg-salesperson .search-select{ width:100%; }

/* ============ 登录页（双栏） ============ */
.login-page{ min-height:100vh; display:flex; }
.login-aside{
    flex:0 0 42%; max-width:520px; background:linear-gradient(150deg,#1A6FE0,#2F7DFB 60%,#4DA3FF);
    color:#fff; padding:48px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
}
.login-aside::after{ content:""; position:absolute; right:-80px; bottom:-80px; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,.08); }
.login-brand{ display:flex; align-items:center; gap:12px; }
.login-brand .brand-logo{ width:42px; height:42px; border-radius:12px; font-size:20px; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.login-brand h2{ font-size:20px; font-weight:800; }
.login-aside h1{ font-size:30px; font-weight:800; line-height:1.4; position:relative; z-index:1; }
.login-aside p{ color:rgba(255,255,255,.8); margin-top:14px; font-size:15px; position:relative; z-index:1; }
.login-foot{ font-size:12px; color:rgba(255,255,255,.6); position:relative; z-index:1; }

.login-main{ flex:1; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg); }
.login-container{ width:100%; max-width:400px; }
.login-card{ background:#fff; border-radius:18px; box-shadow:var(--shadow-lg); padding:38px; }
.login-header{ text-align:center; margin-bottom:28px; }
.login-header h1{ font-size:23px; font-weight:800; color:var(--text); margin-bottom:6px; }
.login-header p{ color:var(--text-2); font-size:14px; }
.login-form .form-group{ margin-bottom:18px; }
.login-form .form-control{ padding:12px 14px; font-size:15px; border-radius:11px; }
.alert{ padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:14px; }
.alert-danger{ background:var(--danger-bg); color:var(--danger-ink); border:1px solid #fecaca; }

/* ============ 响应式 ============ */
@media (max-width:1100px){
    .kpis{ grid-template-columns:repeat(2,1fr); }
    .quick{ grid-template-columns:repeat(2,1fr); }
    .dash-grid,.grid-2-1{ grid-template-columns:1fr; align-items:start; }
}
@media (max-width:992px){
    .search{ display:none; }
    .main-content{ padding:16px; }
    .page-header{ flex-direction:column; align-items:flex-start; gap:12px; }
    .page-header .btn-group{ width:100%; flex-wrap:wrap; }
}
@media (max-width:768px){
    .sidebar{ transform:translateX(-100%); width:var(--sidebar-w); flex-basis:var(--sidebar-w); z-index:200; box-shadow:2px 0 16px rgba(0,0,0,.35); }
    body.sidebar-collapsed .sidebar{ transform:translateX(-100%); }
    body.nav-mobile-open .sidebar{ transform:translateX(0); }
    body.nav-mobile-open .sidebar-backdrop{ display:block; }
    .main{ margin-left:0 !important; }
    body.sidebar-collapsed .main{ margin-left:0; }
}
@media (max-width:560px){
    .kpis{ grid-template-columns:1fr 1fr; }
    .main-content{ padding:12px; }
    .card-header{ flex-direction:column; align-items:flex-start; gap:8px; }
    .card-header .field{ max-width:100%; width:100%; }
    .form-row{ grid-template-columns:1fr; }
    .modal-body{ padding:16px; } .modal-header,.modal-footer{ padding:14px 16px; }
    .page-header h1{ font-size:20px; }
    .table-container{ font-size:13px; }
    .trend-chart{ height:260px; }
    .login-aside{ display:none; }
}

/* ===== 系统设置 / 审批流程配置 ===== */
.settings-flow-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:16px; }
.flow-card{ border:1px solid var(--border, #e5e7eb); border-radius:14px; padding:16px; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.flow-card-head{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.role-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.role-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border, #e5e7eb); border-radius:999px; font-size:13px; cursor:pointer; user-select:none; background:#f8fafc; }
.role-chip input{ margin:0; }
.cond-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px dashed var(--border, #e5e7eb); }
.cond-row:last-of-type{ border-bottom:none; }
.cond-info strong{ display:block; margin-bottom:4px; }
.cond-info p{ margin:0; color:#64748b; font-size:13px; }
.cond-ctrl{ display:flex; align-items:center; gap:8px; white-space:nowrap; }

/* ===== 仓库管理统一页 Tab ===== */
.wh-tabs{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.wh-tab{ padding:8px 16px; border:1px solid var(--border,#e5e7eb); border-radius:10px; background:#fff; cursor:pointer; font-size:14px; }
.wh-tab.active{ background:var(--primary,#4F46E5); color:#fff; border-color:var(--primary,#4F46E5); }
.wh-sub{ display:none; }
.wh-sub.active{ display:block; }
.ship-badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; }
.ship-badge.unshipped{ background:#f1f5f9; color:#475569; }
.ship-badge.shipped{ background:#dcfce7; color:#166534; }
.ship-badge.partial{ background:#fef9c3; color:#854d0e; }
.ship-badge.unreceived{ background:#f1f5f9; color:#475569; }
.ship-badge.received{ background:#dcfce7; color:#166534; }
.ratio-bar{ height:6px; border-radius:999px; background:#e5e7eb; overflow:hidden; min-width:60px; }
.ratio-bar > i{ display:block; height:100%; background:var(--primary,#4F46E5); }