/* ============================================================
 * 恒强电脑ERP系统 - 全局样式表
 * 设计风格：Apple 生态（macOS / iOS Human Interface）
 *   - 字体：SF Pro / PingFang SC（苹方）优先，跨平台优雅回退
 *   - 配色：系统蓝 #007AFF、iOS 分组背景 #F2F2F7、次级文字 #8E8E93
 *   - 质感：毛玻璃（backdrop-filter）、大圆角、柔和阴影
 *   - 自适应：跟随系统浅色/深色模式（prefers-color-scheme）
 * ============================================================ */

/* ===== CSS 变量定义（浅色模式，苹果 HIG 色彩体系） ===== */
:root {
    /* 品牌色（iOS 系统蓝） */
    --primary: #007AFF;
    --primary-dark: #0066D6;
    --primary-light: rgba(0, 122, 255, 0.12);
    --success: #34C759;          /* iOS 系统绿 */
    --warning: #FF9500;          /* iOS 系统橙 */
    --danger: #FF3B30;           /* iOS 系统红 */
    --info: #0A84FF;             /* iOS 系统青蓝 */

    /* 背景 / 卡片 */
    --bg-page: #F2F2F7;          /* iOS 分组背景 */
    --bg-card: #FFFFFF;          /* 卡片背景 */
    --bg-sidebar: rgba(246, 246, 249, 0.78);   /* 侧边栏毛玻璃底 */
    --bg-sidebar-hover: rgba(0, 0, 0, 0.05);
    --bg-hover: rgba(0, 0, 0, 0.04);

    /* 文字 */
    --text-primary: #1C1C1E;
    --text-secondary: #8E8E93;
    --text-light: #AEAEB2;
    --text-white: #FFFFFF;

    /* 边框 / 分割线 / 阴影 */
    --border: #E5E5EA;
    --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 20px rgba(0,0,0,0.12), 0 24px 60px rgba(0,0,0,0.18);
    --radius: 16px;              /* 卡片大圆角（iOS 风格） */
    --radius-sm: 10px;           /* 控件圆角 */
    --sidebar-width: 220px;

    /* 字体栈：Apple 生态优先（SF Pro 英文 + 苹方中文），Windows 优雅回退 */
    --font-stack: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
                  'PingFang SC', 'Hiragino Sans GB', 'Helvetica Neue', 'Segoe UI',
                  'Microsoft YaHei', sans-serif;
}

/* ===== 深色模式（跟随系统设置，自动切换） ===== */
@media (prefers-color-scheme: dark) {
    :root {
        --primary: #0A84FF;
        --primary-dark: #409CFF;
        --primary-light: rgba(10, 132, 255, 0.22);
        --success: #30D158;
        --warning: #FF9F0A;
        --danger: #FF453A;
        --info: #64D2FF;

        --bg-page: #000000;                      /* iOS 深色分组背景 */
        --bg-card: #1C1C1E;                      /* iOS 深色卡片 */
        --bg-sidebar: rgba(28, 28, 30, 0.82);
        --bg-sidebar-hover: rgba(255, 255, 255, 0.08);
        --bg-hover: rgba(255, 255, 255, 0.06);

        --text-primary: #FFFFFF;
        --text-secondary: #98989F;
        --text-light: #636366;
        --text-white: #FFFFFF;

        --border: #38383A;
        --shadow: 0 1px 2px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.4);
        --shadow-lg: 0 8px 20px rgba(0,0,0,0.6), 0 24px 60px rgba(0,0,0,0.6);
    }
}

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

html {
    -webkit-font-smoothing: antialiased;   /* 苹果系统字体平滑渲染 */
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-stack);
    background: var(--bg-page);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.6;
}

/* ===== 图标通用尺寸（SF Symbols 风格 SVG） ===== */
.nav-icon svg,
.btn svg,
.stat-icon svg,
.icon svg,
.card-title svg,
.logo-icon svg {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.14em;
    flex-shrink: 0;
}
.nav-icon svg { width: 20px; height: 20px; vertical-align: middle; }
.btn svg { margin-right: 4px; }
.logo-icon svg { width: 24px; height: 24px; }

/* ===== 整体布局 ===== */
#app {
    display: flex;
    min-height: 100vh;
}

/* ===== 左侧导航栏（macOS 毛玻璃侧边栏） ===== */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border-right: 1px solid var(--border);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
    transition: transform 0.3s ease;
}

/* 侧边栏头部（Logo区域） */
.sidebar-header {
    padding: 22px 20px 16px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.sidebar-header h1 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Logo 图标（系统蓝，macOS 应用图标质感） */
.logo-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0A84FF 0%, #007AFF 60%, #0066D6 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.4);
}

/* 导航菜单 */
.sidebar-nav {
    flex: 1;
    padding: 12px 10px;
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    margin-bottom: 2px;
    border-radius: 9px;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 400;
}

.nav-item:hover {
    background: var(--bg-sidebar-hover);
}

/* 当前选中的导航项（macOS 侧边栏选中胶囊样式） */
.nav-item.active {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}

.nav-item.active .nav-icon {
    color: var(--primary);
}

/* 菜单分隔线 */
.nav-divider {
    height: 1px;
    background: var(--border);
    margin: 10px 12px;
}

/* 侧边栏底部（「退出登录」固定在菜单最下方） */
.sidebar-footer {
    padding: 10px 10px 12px;
    font-size: 11px;
    color: var(--text-light);
    border-top: 1px solid var(--border);
}

/* 退出登录按钮：与上方菜单项左右对齐；悬停变红提示"这是离开操作" */
.sidebar-logout {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    margin-bottom: 8px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
}

.sidebar-logout svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sidebar-logout:hover {
    background: rgba(255, 59, 48, 0.1);
    color: var(--danger);
}

.sidebar-footer p {
    text-align: center;
}

/* ===== 右侧主内容区 ===== */
.main-content {
    flex: 1;
    /* 关键：flex 子项默认 min-width:auto，会被内部宽表格的 min-content 撑破，
       导致页面整体横向溢出、右侧按钮被挤出屏幕；置 0 后由 .table-wrapper 正常横向滚动 */
    min-width: 0;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 顶部栏（iOS 毛玻璃导航） */
.topbar {
    background: var(--bg-sidebar);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--border);
}

.topbar h2 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* ===== 顶部栏用户区 ===== */
.topbar-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-user .user-name {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* 注：原顶栏按钮样式（.topbar-user .btn-logout）已随按钮迁移一并移除，
   备份 / 恢复 / 修改密码改由「系统设置」页内的 .setting-item 承载，
   退出登录改用侧边栏底部的 .sidebar-logout */

/* 移动端菜单按钮 */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    padding: 4px;
}
.menu-toggle svg { width: 22px; height: 22px; }

/* 页面内容容器 */
.page-content {
    padding: 24px;
    flex: 1;
}

/* ===== 通用卡片（iOS 大圆角卡片） ===== */
.card {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-primary);
}
.card-title svg { width: 18px; height: 18px; color: var(--primary); }

/* ===== 统计卡片 ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--bg-card);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform 0.2s;
}
.stat-card:hover { transform: translateY(-2px); }

/* 2026-09-11 数据大屏改造：5 张指标卡全部可点击，鼠标手势 + 箭头 + hover 加深 */
.stat-card-clickable { cursor: pointer; user-select: none; }
.stat-card-clickable:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}
.stat-card-clickable:active { transform: translateY(-1px); }
.stat-arrow {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    width: 14px;
    height: 14px;
    color: var(--text-light);
    transition: transform 0.2s, color 0.2s;
}
.stat-card-clickable:hover .stat-arrow {
    transform: translateX(3px);
    color: var(--primary);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.stat-icon svg { width: 22px; height: 22px; }

.stat-icon.blue   { background: var(--primary-light); color: var(--primary); }
.stat-icon.green  { background: rgba(52, 199, 89, 0.14); color: #28A745; }
.stat-icon.orange { background: rgba(255, 149, 0, 0.16); color: #E07A00; }
.stat-icon.red    { background: rgba(255, 59, 48, 0.13); color: var(--danger); }

.stat-info h3 {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;   /* 数字等宽，SF Pro 风格 */
    line-height: 1.2;
}

.stat-info p {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* ===== 表格（iOS 分组表格风格） ===== */
.table-wrapper {
    overflow-x: auto;
    border-radius: 12px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table th {
    background: transparent;
    padding: 12px 16px;
    text-align: center; /* 2026-09-11 用户要求：所有列表的表头文字居中，不靠左 */
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    letter-spacing: 0.2px;
}

table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    white-space: nowrap;
    text-align: center; /* 2026-09-11 用户要求：所有列表数据（中英文/数字）一律居中 */
}

/* 备注列允许正常换行（其余列单行，避免被挤成两排） */
td.remark-cell {
    white-space: normal;
    min-width: 140px;
}

table tbody tr {
    transition: background 0.15s;
}

table tbody tr:hover {
    background: var(--bg-hover);
}

table tbody tr:last-child td {
    border-bottom: none;
}

/* 表格操作按钮 */
.table-actions {
    display: flex;
    gap: 8px;
}

/* ===== 销售列表：固定列宽 + 对齐统一（「整齐」的核心） =====
   改造前：列宽由内容自动分配，客户名一长就把右侧列挤出屏幕；数字列全部左对齐，
   小数点参差；多商品单据的几行连成一片分不清边界。此处逐项修正。 */
.sales-table {
    table-layout: fixed;      /* 列宽由 colgroup 决定，不再随内容随机波动 */
    min-width: 1160px;        /* 比这更窄就整体横向滚动，而不是把列压变形、文字互相压叠 */
}
.sales-table th,
.sales-table td {
    padding: 8px 10px;        /* 比全局 12px 16px 紧凑，行高更均匀 */
}

/* 所有格子都裁剪超出部分：fixed 布局下若不裁剪，过长的文字会直接压到相邻列上 */
.sales-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 数字列：居中（2026-09-11 用户要求与打印单一致）；保留等宽数字 */
.sales-table th.c-qty,  .sales-table td.c-qty,
.sales-table th.c-price, .sales-table td.c-price,
.sales-table th.c-amt,  .sales-table td.c-amt {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* 状态 / 开票 / 操作：居中，视觉上更稳 */
.sales-table th.c-status, .sales-table td.c-status,
.sales-table th.c-inv,    .sales-table td.c-inv,
.sales-table th.c-ops,    .sales-table td.c-ops {
    text-align: center;
}

/* 文本列：超出宽度显示省略号（完整内容见鼠标悬停提示），保证列宽稳定不被撑开 */
.sales-table td.c-name,
.sales-table td.c-cust {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 商品名称单元格只显示该行商品名称；整单备注在该订单全部商品行之后单独显示。 */
.sales-table td.c-name .name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sales-table tbody tr.sale-order-remark td {
    padding: 7px 12px;
    color: #92400e;
    background: #fffbeb;
    font-size: 12px;
    white-space: normal;
    overflow-wrap: anywhere;
}
.sales-table .sale-order-remark .remark-label {
    color: #b45309;
    font-weight: 600;
}
@media (prefers-color-scheme: dark) {
    .sales-table tbody tr.sale-order-remark td { color: #fcd34d; background: rgba(217, 119, 6, 0.12); }
    .sales-table .sale-order-remark .remark-label { color: #fbbf24; }
}

/* 单据分组：单内用极淡虚线，单据之间用较明显实线 —— 一眼看清每张单的范围 */
.sales-table tbody tr.sale-group td {
    border-bottom: 1px dashed #e8edf4;
}
.sales-table tbody tr.sale-group.group-end td {
    border-bottom: 1px solid #ccd4e0;
}
.sales-table tbody tr.sale-group:last-child td {
    border-bottom: none;
}

/* 单据内的行 hover 一起高亮，强化「这几次行属于同一张单」的感知 */
.sales-table tbody tr.sale-group:hover td {
    background: var(--bg-hover);
}

/* 操作列按钮更紧凑，减少横向占用 */
.sales-table td.ops .btn {
    padding: 5px 10px;
    font-size: 12px;
}

/* 已冲红单据的标记：强制单行，避免把整行撑高（完整信息见悬停提示） */
.sales-table .void-note {
    font-size: 11px;
    color: #dc2626;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 双击整行可打开整单详情 → 鼠标移上去显示手型，提示这一行是可以点开的 */
.sales-table tbody tr.sale-group {
    cursor: pointer;
}

/* ===== 销售单详情弹窗（双击销售单据行打开） ===== */
/* 已冲红单据的顶部提示条 */
.sale-detail .detail-void {
    background: rgba(255, 59, 48, 0.08);
    border: 1px solid rgba(255, 59, 48, 0.35);
    color: var(--danger);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.7;
}

/* 单据抬头信息：两列网格（标签灰字 + 值正常字色） */
.sale-detail .detail-head {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--text-primary);
}
.sale-detail .detail-head .lbl {
    display: inline-block;
    min-width: 62px;
    color: var(--text-secondary);
}

/* 商品明细表：固定列宽，数字列右对齐成线 */
.sale-detail .detail-table {
    table-layout: fixed;
}
.sale-detail .detail-table th,
.sale-detail .detail-table td {
    padding: 9px 12px;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sale-detail .detail-table th.d-idx   { width: 44px; }
.sale-detail .detail-table th.d-code  { width: 110px; }
.sale-detail .detail-table th.d-cat   { width: 88px; }
.sale-detail .detail-table th.d-unit  { width: 60px; }
.sale-detail .detail-table th.d-qty   { width: 64px; }
.sale-detail .detail-table th.d-price { width: 112px; }
.sale-detail .detail-table th.d-amt   { width: 122px; }

.sale-detail .detail-table td.d-idx { text-align: center; color: var(--text-secondary); }
/* 详情弹窗：单个商品备注（如保修期）挂在品名下方，琥珀小字与列表备注风格一致 */
.sale-detail .detail-table td.d-name .d-item-remark {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.35;
    color: #D97706;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
    .sale-detail .detail-table td.d-name .d-item-remark { color: #FFB340; }
}
.sale-detail .detail-table th.d-qty,
.sale-detail .detail-table td.d-qty,
.sale-detail .detail-table th.d-price,
.sale-detail .detail-table td.d-price,
.sale-detail .detail-table th.d-amt,
.sale-detail .detail-table td.d-amt {
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.sale-detail .detail-table td.d-amt {
    font-weight: 600;
    color: var(--success);
}
.sale-detail .detail-table tfoot td {
    border-top: 2px solid var(--border);
    border-bottom: none;
    font-weight: 600;
    padding-top: 12px;
}
.sale-detail .detail-table tfoot .d-foot-label {
    text-align: center;
    color: var(--text-primary);
}
.sale-detail .detail-table tfoot td.d-amt {
    font-size: 15px;
}

/* 备注：琥珀色（与列表小字同色系），保留录入时的换行 */
.sale-detail .detail-remark {
    margin-top: 14px;
    padding: 12px 16px;
    background: #FFF8ED;
    border: 1px solid #FDE3BF;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.8;
    color: #B45309;
}
.sale-detail .detail-remark .r-lbl { font-weight: 600; margin-right: 10px; }
.sale-detail .detail-remark .r-txt { white-space: pre-wrap; }

/* 底部操作区 */
.sale-detail .detail-foot {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    .sale-detail .detail-remark {
        background: rgba(255, 159, 10, 0.10);
        border-color: rgba(255, 159, 10, 0.35);
        color: #FFB340;
    }
}

/* 操作列：按钮始终横向单行排列，避免被挤成两排（表格过宽时整体横向滚动） */
td.ops {
    white-space: nowrap;
}

/* ===== 按钮（iOS 系统按钮） ===== */
.btn {
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
}

.btn-primary {
    background: var(--primary);
    color: white;
}
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary:active { transform: scale(0.97); }

.btn-success {
    background: var(--success);
    color: white;
}
.btn-success:hover { filter: brightness(0.92); }

.btn-danger {
    background: var(--danger);
    color: white;
}
.btn-danger:hover { filter: brightness(0.92); }

.btn-warning {
    background: var(--warning);
    color: white;
}
.btn-warning:hover { filter: brightness(0.92); }

.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 8px;
}

.btn-outline {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.btn-outline:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ===== 表单（iOS 输入控件） ===== */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 13px;
    color: var(--text-secondary);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-card);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-light);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* 表单辅助提示 */
.form-tip {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.form-tip svg { width: 14px; height: 14px; color: var(--warning); }

/* ===== 搜索栏 ===== */
.search-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.search-bar input {
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-card);
    min-width: 200px;
    flex: 1;
    max-width: 300px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-bar input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-light);
}

/* ===== 高级筛选栏（多渠道查询：日期/商品/客户/方式等） ===== */
.filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    flex-wrap: wrap;
    align-items: flex-end;
}
.filter-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.filter-item label {
    font-size: 12px;
    color: var(--text-secondary);
}
.filter-item input[type="date"],
.filter-item select {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-card);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.filter-item input[type="date"]:focus,
.filter-item select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* ===== 状态标签（iOS 胶囊标签） ===== */
.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

.badge-success { background: rgba(52, 199, 89, 0.15); color: #1E9E45; }
.badge-warning { background: rgba(255, 149, 0, 0.16); color: #D97706; }
.badge-danger  { background: rgba(255, 59, 48, 0.13); color: var(--danger); }
.badge-info    { background: var(--primary-light); color: var(--primary); }
/* 未收款：红色字体醒目提醒（打印时由 @media print 强制转黑，见文件底部） */
.badge-unpaid  { background: rgba(255, 59, 48, 0.13); color: var(--danger); font-weight: 600; }

@media (prefers-color-scheme: dark) {
    .badge-success { color: #30D158; }
    .badge-warning { color: #FF9F0A; }
    .badge-unpaid  { color: #FF453A; }
}

/* ===== 模态框（iOS 弹窗） ===== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-overlay.show {
    display: flex;
}

.modal {
    background: var(--bg-card);
    border-radius: 16px;
    width: 96%;
    max-width: 960px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: modalSlide 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* 信息密集类弹窗（如新增/编辑回款）加宽，避免关联订单等内容挤压换行看不清 */
.modal-wide {
    max-width: 1080px;
}

/* 单据明细类弹窗（新增/编辑销售、开票）：一行要排 8 格，需要更宽的幅面 */
.modal-sale {
    max-width: 1200px;
}

/* ===== 业务单据「明细行」紧凑输入 =====
   问题根因：明细行每格只有 60~110px 宽，而 .form-group input 的
   padding(12px 14px) 与 font-size(15px) 是给整页宽表单设计的；
   配合全局 box-sizing:border-box，窄格内容区被左右各 14px 内边距吃掉大半，
   导致编码/单位/单价等文字被截断显示不全。此处统一收紧。
   列宽策略：每格用「基础宽度(flex-basis) + 权重(flex-grow)」按比例分摊整行宽度，
   避免品名一栏独占半行、而末尾「金额」被挤到文字变形；
   flex-shrink:0 保证窗口变窄时只折行、不压缩，任何一格都不会被挤扁。 */
.sale-item-row,
.inv-item-row {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin-bottom: 8px;
    flex-wrap: wrap;   /* 窗口过窄时自动折行，不硬挤 */
}

.sale-item-row input,
.inv-item-row input {
    width: 100%;
    min-width: 0;
    padding: 7px 8px;
    font-size: 13px;
    line-height: 1.5;
}

/* 品名为主输入项，字号略大、内边距略宽，读取更舒适 */
.sale-item-row input[name="itemName"],
.inv-item-row .inv-item-name {
    font-size: 14px;
    padding: 8px 9px;
}

/* 品名格：包住输入框与下方的关联提示，宽度按权重分配（约占整行 1/4，
   不再像原来那样独占近一半，把后面的格子挤得放不下数字） */
.sale-item-row > .item-name-wrap {
    flex: 2.4 0 200px;
    min-width: 0;
}

/* 隐藏字段（关联到的商品ID）不参与布局 */
.sale-item-row > input[type="hidden"] {
    display: none;
}

/* 各列宽度：basis = 最小可读宽度（下限），权重 = 剩余空间分配比例 */
.sale-item-row > input[name="itemCode"]     { flex: 1.5 0 104px; }
.sale-item-row > input[name="itemCategory"] { flex: 1.3 0 84px;  }
.sale-item-row > input[name="itemUnit"]     { flex: 0.5 0 62px;  }
.sale-item-row > input[name="itemQty"]      { flex: 0.3 0 74px;  }
.sale-item-row > .item-price-wrap           { flex: 1.5 0 104px; }
.sale-item-row > .item-subtotal             { flex: 1.8 0 110px; }
/* 单个商品备注（如保修期）：金额后、删除按钮前，选填 */
.sale-item-row > input[name="itemRemark"]   { flex: 1.4 0 130px; }

/* 按钮格：固定宽度，不参与拉伸 */
.sale-item-row > .btn,
.inv-item-row > .btn,
.inv-item-row > .inv-item-qty,
.inv-item-row > .inv-item-price,
.inv-item-row > .inv-item-amount {
    flex: 0 0 auto;
}

/* 数量居中、单价/金额右对齐 + 等宽数字：纵向扫视一列数字更整齐 */
.sale-item-row input[name="itemQty"],
.inv-item-row .inv-item-qty {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* 「金额」是纯文字（span），必须手动做成与左侧输入框「同内边距 + 同边框 + 同字号」的盒子：
   否则它会继承页面的 14px 字号、又缺少内边距与边框，看上去比输入内容大一号且上下错位，
   这正是「金额字体变形」的直接原因。 */
.sale-item-row > .item-subtotal,
.inv-item-row > .inv-item-amount {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 7px 8px;
    border: 1px solid transparent;   /* 与输入框边框同宽，保证两者严格等高 */
    font-size: 13px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
}

/* 隐藏数字框右侧的上下微调箭头：Chrome/Edge 会给它留出 15~20px，
   在 70~74px 的窄格里会把数字本身挤掉，造成「显示不全」 */
.sale-item-row input[type="number"]::-webkit-outer-spin-button,
.sale-item-row input[type="number"]::-webkit-inner-spin-button,
.inv-item-row input[type="number"]::-webkit-outer-spin-button,
.inv-item-row input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.sale-item-row input[type="number"],
.inv-item-row input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;   /* Firefox 同样隐藏微调箭头 */
}

/* 明细行的「关联状态提示」（如「✓ 已关联商品 ... · 档案未设销售价 ...」）
   - 横跨整行下方作为独立一行（flex-basis:100%），文字完整显示、自动换行不被截断
   - 空文字时 display:none，不占下方空间，行高与未关联时一致
   - 颜色由 _setRowHint 动态设（成功绿/警告橙/手输灰） */
.sale-item-row > .item-hint {
    flex: 0 0 100%;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.5;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.sale-item-row > .item-hint:empty {
    display: none;
}

/* 单价框下方的「进货参考价」提示
   - 平时是灰色 10px 小字，提示商品档案里记录的最新进货价
   - 当开单价 < 进货价时加 .loss → 红色加粗，提示亏本
   - 默认空内容（不关联商品或档案 cost=0 时），不占空间
   - min-width:0 防止父级 nowrap 时被压缩成省略号 */
.sale-item-row .item-cost-hint {
    min-width: 0;
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-light, #9ca3af);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
}
.sale-item-row .item-cost-hint.loss {
    color: var(--danger, #DC2626);
    font-weight: 600;
}

@keyframes modalSlide {
    from { transform: translateY(-24px) scale(0.97); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
}

.modal-header h3 {
    font-size: 17px;
    font-weight: 700;
}

.modal-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: 50%;
    transition: all 0.2s;
}
.modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--border);
}

/* ===== Toast 提示消息 ===== */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    padding: 12px 18px;
    border-radius: 12px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    animation: toastSlide 0.3s ease;
    min-width: 200px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

@keyframes toastSlide {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast.success { background: rgba(52, 199, 89, 0.95); }
.toast.error   { background: rgba(255, 59, 48, 0.95); }
.toast.warning { background: rgba(255, 149, 0, 0.95); }
.toast.info    { background: rgba(10, 132, 255, 0.95); }

/* ===== 空状态提示 ===== */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-light);
}

.empty-state .icon {
    font-size: 44px;
    margin-bottom: 12px;
    color: var(--text-light);
}
.empty-state .icon svg { width: 44px; height: 44px; }

.empty-state p {
    color: var(--text-secondary);
    font-size: 14px;
}

/* ===== 图表容器 ===== */
.chart-container {
    position: relative;
    width: 100%;
}

.chart-bar-wrapper {
    display: flex;
    align-items: end;
    gap: 12px;
    height: 200px;
    padding: 20px 0;
    border-bottom: 2px solid var(--border);
}

.chart-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.chart-bar {
    width: 100%;
    max-width: 40px;
    background: linear-gradient(180deg, #0A84FF 0%, var(--primary) 100%);
    border-radius: 6px 6px 0 0;
    transition: height 0.5s ease;
    position: relative;
    min-height: 2px;
}

.chart-bar:hover {
    filter: brightness(1.1);
}

.chart-bar-value {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.chart-bar-label {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ===== 分页 ===== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

.pagination button {
    padding: 6px 13px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-primary);
    transition: all 0.2s;
}
.pagination button:hover:not(:disabled):not(.active) {
    background: var(--bg-hover);
}

.pagination button.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== 回款管理模块专属样式 ===== */

/* 回款方式单选按钮组（银行/现金/微信/支付宝） */
.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.method-btn,
.payee-btn {
    flex: 1;
    min-width: 90px;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.method-btn svg,
.payee-btn svg { width: 16px; height: 16px; }

.method-btn.active,
.payee-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
}

.method-btn:hover,
.payee-btn:hover {
    border-color: var(--primary);
}

/* 列表中回款方式/银行/回款方类型标签 */
.pay-method {
    font-weight: 600;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.pay-method svg { width: 15px; height: 15px; color: var(--primary); }

.pay-bank {
    color: var(--text-secondary);
    font-size: 13px;
}

.payee-type {
    display: inline-block;
    font-size: 12px;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: 999px;
    padding: 1px 8px;
    margin-right: 6px;
    font-weight: 500;
}

/* ===== 响应式设计（小屏幕适配） ===== */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        box-shadow: none;
    }

    .sidebar.show {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }

    .main-content {
        margin-left: 0;
    }

    .menu-toggle {
        display: block;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .page-content {
        padding: 16px;
    }
}

/* ============================================================
 * 打印样式：屏幕上的警示色（未收款红色等）在打印时强制转黑色，
 * 保证打印出的单据/报表为干净的黑白效果
 * ============================================================ */
@media print {
    .badge-unpaid,
    .text-unpaid {
        color: #000 !important;
        background: transparent !important;
        font-weight: 600 !important;
    }
}

/* ===== 用户权限模块勾选（按模块授权） ===== */
.perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px 12px;
}
.perm-check {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
    transition: background .15s, border-color .15s;
}
.perm-check:hover {
    background: rgba(37, 99, 235, .06);
    border-color: var(--primary);
}
.perm-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* ============================================================
   系统设置页（settings.js）
   结构：分区卡片（.settings-card）+ 设置项行（.setting-item）
   说明：所有规则都带 settings-/setting- 前缀，不影响其他页面
   ============================================================ */

/* 分区卡片：卡片自身不留内边距，由标题栏与设置项行分别控制 */
.settings-card {
    padding: 0;
    overflow: hidden;
}

/* 分区标题栏 */
.settings-card-head {
    padding: 16px 20px 13px;
    border-bottom: 1px solid var(--border);
}

.settings-card-head h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.settings-card-head p {
    font-size: 12.5px;
    color: var(--text-light);
    line-height: 1.6;
}

/* 「用户与权限」区块内容区（内部为用户表格与工具栏） */
.settings-card-body {
    padding: 16px 20px 4px;
}

/* 设置项行：左图标 + 文字说明 + 右侧按钮 */
.setting-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
}

.setting-icon svg {
    width: 18px;
    height: 18px;
    margin-right: 0;
}

.setting-text {
    flex: 1;
    min-width: 0;
}

.setting-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.setting-desc {
    font-size: 12.5px;
    color: var(--text-light);
    line-height: 1.6;
}

.setting-item > .btn {
    flex-shrink: 0;
}

/* 高危设置项（恢复数据）：图标统一转红 */
.setting-item.is-danger .setting-icon {
    background: rgba(255, 59, 48, 0.1);
    color: var(--danger);
}

/* 描边红按钮（恢复数据用，避免实心大红过于抢眼） */
.btn-danger-outline {
    border: 1px solid rgba(255, 59, 48, 0.45);
    color: var(--danger);
    background: transparent;
}

.btn-danger-outline:hover {
    background: rgba(255, 59, 48, 0.08);
    border-color: var(--danger);
}

/* 区块工具栏：按钮靠右排列 */
.settings-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* 说明提示条 */
.settings-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-hover);
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.settings-tip svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--warning);
}

/* 提示文字必须为单个 flex 子项：否则文本节点与 <strong> 会被拆成多个独立项，换行位置错乱 */
.settings-tip > span {
    flex: 1;
    min-width: 0;
}

/* 窄屏：设置项行改为纵向堆叠，按钮缩进对齐文字，避免说明被按钮挤没 */
@media (max-width: 720px) {
    .setting-item {
        flex-wrap: wrap;
    }

    .setting-item > .btn {
        margin-left: 48px;
    }
}

/* ============================================================
   2026-09-21 数据大屏：销售 / 兼职承包双板块同屏
   ============================================================ */
.dashboard-scope-control {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-page);
}
.dashboard-scope-control > span { padding: 0 7px; color: var(--text-secondary); font-size: 11px; white-space: nowrap; }
.dashboard-scope-control button,
.dashboard-scope-control input {
    height: 28px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 11px;
}
.dashboard-scope-control button { padding: 0 10px; cursor: pointer; }
.dashboard-scope-control input { width: 112px; padding: 0 5px; cursor: pointer; }
.dashboard-scope-control button:hover,
.dashboard-scope-control input:hover { color: var(--primary); }
.dashboard-scope-control .active { border-color: rgba(0,122,255,.18); background: #fff; color: var(--primary); box-shadow: 0 1px 4px rgba(15,23,42,.08); }
.dashboard-freeze .topbar-user { margin-left: 8px; }
.main-content.dashboard-freeze {
    height: 100vh;
    overflow: hidden;
}
.dashboard-freeze .page-content {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
}
.dashboard-dual-grid {
    width: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}
.dashboard-business-panel {
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
    background: var(--bg-card);
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: clamp(16px, 2.2vh, 24px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: 4px solid var(--primary);
}
.dashboard-business-sale { border-top-color: #28a745; }
.dashboard-business-contract { border-top-color: var(--primary); }
.dashboard-business-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: clamp(12px, 2vh, 22px);
    border-bottom: 1px solid var(--border);
}
.dashboard-business-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dashboard-business-title h3 { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.3; }
.dashboard-business-title p { color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
.dashboard-business-count {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-page);
    color: var(--text-secondary);
    font-size: 12px;
}
.dashboard-metric-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 1.6vh, 16px);
    margin: clamp(14px, 2.4vh, 26px) 0;
}
.dashboard-metric {
    min-width: 0;
    min-height: clamp(108px, 17vh, 148px);
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-page);
    padding: clamp(12px, 1.8vh, 18px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    color: inherit;
    font: inherit;
}
button.dashboard-metric { cursor: pointer; transition: transform .16s, border-color .16s, box-shadow .16s; }
button.dashboard-metric:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 5px 16px rgba(0, 122, 255, .10); }
.dashboard-metric > span { color: var(--text-secondary); font-size: 13px; }
.dashboard-metric > strong {
    max-width: 100%;
    margin: 7px 0 3px;
    color: var(--text-primary);
    font-size: clamp(21px, 2.25vw, 34px);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dashboard-metric > small { color: var(--text-light); font-size: 11px; }
.dashboard-metric-paid > strong { color: var(--success); }
.dashboard-metric-unpaid > strong { color: var(--danger); }
.dashboard-metric-rate > strong { color: var(--primary); }
.dashboard-progress-head { display: flex; justify-content: space-between; color: var(--text-secondary); font-size: 12px; }
.dashboard-progress-head strong { color: var(--text-primary); }
.dashboard-progress { height: 12px; margin-top: 8px; border-radius: 999px; background: var(--bg-page); overflow: hidden; }
.dashboard-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #28a745, #34c759); }
.dashboard-business-contract .dashboard-progress span { background: linear-gradient(90deg, var(--primary-dark, #0066d6), var(--primary)); }
.dashboard-insights {
    min-height: 0;
    height: clamp(150px, 24vh, 190px);
    margin-top: clamp(12px, 2vh, 18px);
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 10px;
}
.dashboard-insight-card { min-width: 0; border: 1px solid var(--border); border-radius: 14px; background: #fff; padding: 10px; overflow: hidden; }
.dashboard-insight-head { height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.dashboard-insight-head > strong { font-size: 12px; color: var(--text-primary); white-space: nowrap; }
.dashboard-insight-head > button { border: 0; background: transparent; color: var(--primary); cursor: pointer; font-size: 10px; padding: 2px; white-space: nowrap; }
.dashboard-trend-legend { display: flex; align-items: center; gap: 3px; color: var(--text-light); font-size: 9px; white-space: nowrap; }
.dashboard-trend-legend i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; margin-left: 2px; }
.legend-total, .trend-total { background: #34c759; }
.legend-paid, .trend-paid { background: #ff9500; }
.dashboard-business-contract .legend-total, .dashboard-business-contract .trend-total { background: var(--primary); }
.dashboard-trend-chart { height: calc(100% - 24px); min-height: 92px; display: flex; align-items: stretch; justify-content: space-between; gap: 3px; }
.dashboard-trend-month { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.dashboard-trend-bars { flex: 1 1 auto; width: 100%; min-height: 0; display: flex; align-items: flex-end; justify-content: center; gap: 2px; border-bottom: 1px solid var(--border); }
.dashboard-trend-bars i { width: min(9px, 38%); min-height: 0; border-radius: 3px 3px 0 0; display: block; }
.dashboard-trend-month > span { height: 18px; line-height: 18px; color: var(--text-light); font-size: 9px; white-space: nowrap; }
.dashboard-top-list { height: calc(100% - 24px); display: flex; flex-direction: column; justify-content: center; }
.dashboard-top-row { width: 100%; min-width: 0; flex: 1 1 0; border: 0; border-bottom: 1px solid var(--border); background: transparent; padding: 3px 0; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 4px; color: inherit; cursor: pointer; text-align: left; }
.dashboard-top-row:last-child { border-bottom: 0; }
.dashboard-top-row:hover { background: var(--primary-light); }
.dashboard-top-no { width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 5px; background: var(--bg-page); color: var(--text-secondary); font-size: 9px; }
.dashboard-top-name { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.dashboard-top-name strong, .dashboard-top-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-top-name strong { color: var(--text-primary); font-size: 10px; font-weight: 600; }
.dashboard-top-name small { color: var(--text-light); font-size: 9px; margin-top: 2px; }
.dashboard-top-row b { color: var(--danger); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dashboard-top-empty { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--success); font-size: 12px; }
.dashboard-panel-note { margin-top: auto; padding-top: 7px; color: var(--text-light); font-size: 10px; text-align: center; }
@media (max-width: 900px) {
    .dashboard-scope-control > span { display: none; }
    .dashboard-scope-control button { padding: 0 7px; }
    .dashboard-scope-control input { width: 105px; }
    .main-content.dashboard-freeze { height: auto; min-height: 100vh; overflow: visible; }
    .dashboard-freeze .page-content { overflow: visible; display: block; }
    .dashboard-dual-grid { grid-template-columns: 1fr; }
    .dashboard-business-panel { height: auto; margin-bottom: 16px; }
    .dashboard-insights { height: auto; min-height: 320px; grid-template-columns: 1fr; }
    .dashboard-insight-card { min-height: 145px; }
}
@media (max-height: 720px) and (min-width: 901px) {
    .dashboard-business-panel { padding: 14px; }
    .dashboard-business-header { padding-bottom: 10px; }
    .dashboard-metric-grid { margin: 12px 0; gap: 10px; }
    .dashboard-metric { min-height: 96px; padding: 11px; }
    .dashboard-insights { height: 142px; margin-top: 9px; }
    .dashboard-panel-note { padding-top: 8px; }
}

/* ============================================================
   2026-09-11 数据大屏：下半部分两列网格 + 点击弹窗明细
   全部带 .dashboard- 前缀，避免影响其他页面表格/弹窗
   ============================================================ */
.dashboard-secondary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 720px) {
    .dashboard-secondary-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   2026-09-11 数据大屏：底部「客户销量排行」面板（铺满空白、横向条形）
   全部带 .dashboard-rank- / .rank- 前缀，避免影响其他页面
   ============================================================ */
.dashboard-rank-card {
    background: var(--bg-card);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 18px 20px;
}
.dashboard-rank-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.dashboard-rank-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}
.dashboard-rank-title .stat-icon { width: 36px; height: 36px; border-radius: 11px; }
.dashboard-rank-title .stat-icon svg { width: 18px; height: 18px; }
.dashboard-rank-sub {
    font-size: 12px;
    font-weight: 500;
    color: var(--primary);
    background: var(--primary-light);
    padding: 2px 9px;
    border-radius: 999px;
}
.dashboard-rank-total { font-size: 13px; color: var(--text-secondary); }
.dashboard-rank-total strong { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }

.dashboard-rank-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.dashboard-rank-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.dashboard-rank-row:hover { background: var(--primary-light); }
.rank-no {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-page);
}
.rank-no-1 { background: linear-gradient(135deg, #FFD60A, #FF9F0A); color: #5A3B00; } /* 金牌 */
.rank-no-2 { background: linear-gradient(135deg, #E6E6EB, #C2C4CC); color: #3A3A3C; } /* 银牌 */
.rank-no-3 { background: linear-gradient(135deg, #F2B07A, #D98A3D); color: #5A2E00; } /* 铜牌 */
.rank-name {
    flex: 0 0 140px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rank-bar-wrap {
    flex: 1 1 auto;
    min-width: 60px;
    height: 22px;
    background: var(--bg-page);
    border-radius: 999px;
    overflow: hidden;
}
.rank-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-dark, var(--primary)), var(--primary));
    transition: width 0.4s ease;
}
.rank-amount {
    flex: 0 0 112px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.rank-count {
    flex: 0 0 48px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
    .dashboard-rank-title { font-size: 15px; }
    .rank-name { flex-basis: 88px; }
    .rank-amount { flex-basis: 88px; }
    .rank-count { flex-basis: 40px; }
}

/* 弹窗内容容器 */
.dashboard-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 顶部统计条：左"笔数"右"合计"，背景色块突出 */
.dashboard-detail-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: var(--primary-light, #f0f6ff);
    border-radius: 10px;
    border: 1px solid rgba(0, 122, 255, 0.10);
}
.dashboard-detail-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.dashboard-detail-label {
    font-size: 12px;
    color: var(--text-light, #6b7280);
    letter-spacing: 0.5px;
}
.dashboard-detail-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #111827);
    font-variant-numeric: tabular-nums;
}
.dashboard-detail-value.highlight {
    color: var(--success, #1E9E45);
}
.dashboard-detail-value.danger {
    color: var(--danger, #DC2626);
}

/* 弹窗内的明细表格：紧凑、与销售列表风格一致 */
.dashboard-table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    font-size: 13px;
}
.dashboard-table thead th {
    background: var(--bg-page, #f7f8fa);
    color: var(--text-secondary, #374151);
    font-weight: 600;
    text-align: center; /* 与全局表头一致：居中 */
    padding: 8px 10px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    white-space: nowrap;
}
.dashboard-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-table tbody tr:last-child td { border-bottom: none; }
.dashboard-table tbody tr:hover td { background: var(--bg-hover, #f9fafb); }
.dashboard-table td strong { font-weight: 600; }
.dashboard-table td[style*="text-align:right"],
.dashboard-table td[style*="text-align: right"] {
    font-variant-numeric: tabular-nums;
}

/* ===================== 通用表格增强：列宽拖拽 + 表头双击排序（Grid 组件） ===================== */
.grid-th { position: relative; overflow: visible; user-select: none; }
.grid-sortable { cursor: pointer; }
.grid-sortable:hover { background: var(--bg-hover, #f1f5f9); }
.grid-th .grid-sort-ind { font-size: 11px; color: var(--primary, #2563eb); margin-left: 2px; font-weight: 700; }
.grid-th.sort-active { background: rgba(37, 99, 235, 0.12); }
.col-resizer {
    position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
    cursor: col-resize; z-index: 3; touch-action: none;
}
.col-resizer:hover, .col-resizer:active { background: var(--primary, #2563eb); opacity: 0.5; }
/* 拖拽进行中：整表禁止选中文本，避免误选 */
table.grid-resizing, table.grid-resizing * { user-select: none !important; }

/* ===================== 系统设置：公司信息与收款账户 ===================== */
.acct-list { display: flex; flex-direction: column; gap: 8px; }
.acct-row {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1.5fr auto;
    gap: 8px; align-items: center;
}
.acct-input {
    width: 100%; box-sizing: border-box;
    padding: 7px 10px; font-size: 13px;
    border: 1px solid var(--border, #d1d5db); border-radius: 6px;
    background: var(--bg-card, #ffffff); color: var(--text-primary, #111827);
}
.acct-input:focus { outline: none; border-color: var(--primary, #2563eb); }
.acct-del { flex-shrink: 0; }
.acct-actions { display: flex; gap: 10px; margin-top: 10px; }
@media (max-width: 860px) {
    .acct-row { grid-template-columns: 1fr 1fr; }
    .acct-del { justify-self: end; grid-column: span 2; }
}

/* ===================== 打印出库销售单：收款账户勾选弹窗 ===================== */
.pacct-tip { margin: 0 0 12px; font-size: 13px; color: var(--text-secondary, #6b7280); }
.pacct-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; margin-bottom: 8px;
    border: 1px solid var(--border, #d1d5db); border-radius: 8px;
    cursor: pointer; font-size: 13px;
}
.pacct-item:hover { border-color: var(--primary, #2563eb); }
.pacct-item input[type=checkbox] { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.pacct-text { flex: 1; min-width: 0; word-break: break-all; }
.pacct-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

/* ===================== 销售管理「冻结窗格」（Excel 效果，2026-09-11） =====================
   页面整体不滚动：搜索栏 / 筛选栏 / 汇总条固定不动，只有订单表格区域内部滚动；
   表头同样冻结在表格顶部（sticky），行数据在表头下方穿过。 */
.main-content.main-freeze {
    height: 100vh;
    overflow: hidden;
}
.main-freeze .page-content {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* 搜索/筛选/汇总条：不参与压缩，始终完整显示 */
.main-freeze .page-content > * {
    flex-shrink: 0;
}
/* 订单表格卡片：占据剩余全部高度，内部滚动 */
.main-freeze .sales-table-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.main-freeze .sales-table-card .table-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;          /* 纵向滚行，横向滚动兼容窄屏（原 overflow-x 保留效果） */
}
/* 表头冻结：行滚动时表头钉在表格顶部；不透明底色防止行文字透出 */
.main-freeze .sales-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg-card, #ffffff);
    box-shadow: 0 1px 0 var(--border, #e5e7eb);   /* 底部分隔线，滚动时表头与行有边界 */
}

/* ===================== 全系统表格数字列对齐约定（2026-09-11） =====================
   约定：文字列（中英文）靠左，数字列（金额/数量/单价等）居中；
   各模块数字列的 th/td 加 class="num" 即可生效，等宽数字保留 */
table th.num,
table td.num {
    text-align: center;
    font-variant-numeric: tabular-nums;
}