/* ============================================================
   components.css —— DESIGN.md §4 组件类
   .btn* / .card / .kpi-card / .input / .combobox / .table / .badge* /
   .progress / .modal / .nav / 红字单据 / 操作员切换
   金额列统一 tabular-nums + 右对齐；仅用 400/500/600/700 四档字重。
   ============================================================ */

/* ---------- Reset & Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--color-ink);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Layout ---------- */
.layout { display: flex; min-height: 100vh; }
.container {
  flex: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-6);
  width: 100%;
}
.section { margin-bottom: var(--space-8); }
.section-title {
  font-size: 18px; font-weight: 600; color: var(--color-brand);
  margin: 0 0 var(--space-4);
}

/* ---------- Buttons ---------- */
.btn { height: 36px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 600;
       border: 1px solid transparent; cursor: pointer; transition: all .15s ease; display:inline-flex;
       align-items:center; gap:6px; }
.btn-primary { background: var(--color-primary); color:#fff; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:active { background: var(--color-primary-active); }
.btn-secondary { background:#fff; color: var(--color-brand); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--gray-50); }
.btn-ghost { background: transparent; color: var(--gray-600); }
.btn-ghost:hover { background: var(--gray-100); color: var(--color-brand); }
.btn-danger { background:#fff; color: var(--color-danger); border-color: var(--color-danger); }
.btn-danger:hover { background: var(--color-danger-soft); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 6px; }

/* ---------- Cards ---------- */
.card { background: var(--bg-surface); border:1px solid var(--border); border-radius:12px;
        padding:20px; box-shadow: var(--shadow-sm); }
.kpi-card { padding:16px 20px; border-left-width:3px; }
.kpi-card.accent-in  { border-left-color: var(--color-success); }
.kpi-card.accent-out { border-left-color: var(--color-danger); }
.kpi-card.accent-net { border-left-color: var(--color-primary); }
.kpi-card .label { font-size:12px; font-weight:600; letter-spacing:.04em; color: var(--gray-500);
                   text-transform:uppercase; }
.kpi-card .value { font-size:28px; font-weight:700; color: var(--color-brand);
                   font-variant-numeric: tabular-nums; margin-top:6px; }
.kpi-card .value.money-in { color: var(--color-money-in); }
.kpi-card .value.money-out { color: var(--color-money-out); }
.kpi-card .sub { font-size:12px; color: var(--gray-500); margin-top:4px; }

/* KPI 网格 */
.kpi-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; }
@media (max-width: 1023px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .kpi-grid { grid-template-columns: 1fr; } }

/* ---------- Inputs ---------- */
.input { height:36px; padding:0 12px; border:1px solid var(--border); border-radius:8px;
         background: var(--bg-surface); font-size:14px; color: var(--color-brand);
         font-variant-numeric: tabular-nums; transition: border .15s, box-shadow .15s; }
.input::placeholder { color: var(--gray-400); }
.input:focus { outline:none; border-color: var(--color-focus);
                box-shadow: 0 0 0 3px rgba(99,91,255,0.20); }

/* 日期输入框：保留浏览器原生日历图标区域，同时提供显式日历按钮 */
.date-field { position:relative; display:flex; gap:6px; align-items:center; }
.date-field .input { flex:1; min-width:0; }
.date-picker-btn { height:36px; padding:0 10px; font-size:16px; line-height:1; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor:pointer; opacity:0.7; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity:1; }
.hidden-date-picker { position:absolute; right:0; top:0; width:36px; height:36px; padding:0; border:0; opacity:0; pointer-events:none; }

/* ---------- Combobox（键盘录单核心组件，阶段 0 仅样式落盘） ---------- */
.combobox { position: relative; }
.combobox .input { width:100%; }
.combobox-pop { position:absolute; z-index:50; top:calc(100% + 4px); left:0; right:0;
                background:#fff; border:1px solid var(--border-strong); border-radius:8px;
                box-shadow: var(--shadow-lg); max-height:280px; overflow:auto; padding:4px; }
.combobox-item { padding:8px 10px; border-radius:6px; font-size:14px; cursor:pointer;
                 display:flex; justify-content:space-between; gap:8px; }
.combobox-item.active { background: var(--color-primary-soft); }
.combobox-item .meta { color: var(--gray-500); font-size:12px; }
.combobox-item.new::after { content:"+ 新建"; color: var(--color-primary); font-size:12px; font-weight:600; }

/* ---------- Navigation（侧边栏 · 简道云进销存风格分组） ---------- */
.nav { width:220px; background: var(--bg-surface); border-right:1px solid var(--border);
       padding:16px 12px; flex-shrink: 0; overflow-y:auto; }
.nav-brand { display:flex; align-items:center; gap:10px;
             font-size:17px; font-weight:700; color: var(--color-brand);
             padding:6px 10px 18px; letter-spacing:-0.01em; }
.nav-logo { display:inline-flex; align-items:center; justify-content:center;
            width:30px; height:30px; border-radius:8px;
            background: var(--color-primary); color:#fff; font-size:16px; font-weight:800; }
.nav-logo-img { height:32px; width:32px; object-fit:contain; border-radius:6px;
                display:inline-block; box-shadow:0 1px 2px rgba(10,37,64,0.18); background:transparent; }

/* 登录后顶部用户条（退出登录） */
.topbar { display:flex; align-items:center; justify-content:flex-end; gap:12px;
          padding:8px 2px 0; color:var(--gray-600); font-size:13px; }
.topbar-user { font-weight:600; color:var(--color-brand); }
.nav-group { margin-bottom:6px; }
.nav-group:last-child { margin-bottom:0; }
.nav-section { padding:14px 12px 6px; font-size:11px; font-weight:700;
               letter-spacing:0.08em; color: var(--gray-500); text-transform:none; }
.nav-group:first-child .nav-section { padding-top:4px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px;
            font-size:14px; font-weight:500; color: var(--gray-600); cursor:pointer;
            text-decoration:none; transition: background .15s ease, color .15s ease; }
.nav-ico { display:inline-flex; align-items:center; justify-content:center;
           width:18px; text-align:center; font-size:14px; line-height:1; }
.nav-item:hover { background: var(--gray-100); color: var(--color-brand); }
.nav-item.active { background: var(--color-primary-soft); color: var(--color-primary);
                   font-weight:600; }
.nav-item.active .nav-ico { filter: none; }
@media (max-width: 639px) {
  .nav { width:100%; border-right:none; border-bottom:1px solid var(--border);
         display:flex; flex-wrap:wrap; gap:4px; padding:10px; }
  .nav-brand { width:100%; padding:4px 10px 8px; }
  .nav-group { margin-bottom:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
  .nav-section { width:100%; padding:6px 12px 2px; }
  .layout { flex-direction: column; }
}

/* ---------- Badges / Tags ---------- */
.badge { display:inline-flex; align-items:center; padding:2px 10px; border-radius:999px;
         font-size:12px; font-weight:600; }
.badge-progress { background: var(--color-info-soft); color: var(--color-info); }
.badge-done { background: var(--color-success-soft); color: var(--color-success); }
.badge-warn { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-done { background: var(--color-success-soft); color: var(--color-success); }

/* ---------- 进度条（订单履约 / 看板复用，圆角 + 主色渐变填充） ---------- */
.progress { height:8px; border-radius:999px; background: var(--gray-200); overflow:hidden; width:100%; }
.progress > span { display:block; height:100%;
                   background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover));
                   border-radius:999px; transition: width .35s ease; }

/* ---------- Modals / Dialogs ---------- */
.modal-mask { position:fixed; inset:0; background: rgba(10,37,64,0.45); z-index:30;
              display:flex; align-items:center; justify-content:center; }
/* 修复阶段 0 帮助弹窗关不掉：类选择器 .modal-mask 的 display:flex 会压过 UA 的
   [hidden]{display:none}，导致 shortcuts.js 设 m.hidden=true 视觉无反应。
   显式提升 [hidden] 优先级，让 hidden 属性真正隐藏遮罩。 */
.modal-mask[hidden] { display: none; }
/* 弹窗基础尺寸：不写 width，让 max-width 真正生效；
   默认 max-width 560px 兼容旧的帮助/确认类小弹窗；订单类弹窗通过内联
   style="max-width:1040px" 等覆盖以放大。 .login-pick 用自身 max-width:360px 覆盖。 */
.modal { background:#fff; border-radius:14px; box-shadow: var(--shadow-2xl);
         max-width: min(560px, 92vw); padding:24px; animation: modal-in .18s ease; }
@keyframes modal-in { from { opacity:0; transform: translateY(8px) scale(.98); }
                      to { opacity:1; transform:none; } }
.modal h2 { margin:0 0 16px; font-size:22px; font-weight:600; color: var(--color-brand); }
.kbd { display:inline-block; min-width:20px; text-align:center; padding:2px 6px;
       border:1px solid var(--border-strong); border-bottom-width:2px; border-radius:6px;
       font-family: var(--font-mono); font-size:12px; background: var(--bg-subtle);
       color: var(--gray-700); }
.help-row { display:flex; align-items:center; gap:12px; padding:8px 0;
            border-bottom:1px solid var(--border); }
.help-row:last-child { border-bottom:none; }
.help-row .desc { color: var(--gray-600); font-size:14px; }

/* ---------- 数据表格 Table ---------- */
.table { width:100%; border-collapse:collapse; font-size:14px; }
.table th { text-align:left; padding:10px 12px; background: var(--gray-100);
            color: var(--gray-600); font-weight:600; font-size:13px;
            border-bottom:1px solid var(--border); white-space:nowrap; position:sticky; top:0; }
.table td { padding:9px 12px; border-bottom:1px solid var(--border); color: var(--color-brand);
            font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tbody tr:hover { background: var(--gray-50); }
.table .num { text-align:right; }
.table .money-in { color: var(--color-money-in); }
.table .money-out { color: var(--color-money-out); }
.table .nowrap { white-space:nowrap; }
.table-wrap { max-height: 560px; overflow:auto; }
/* 固定列宽表格（2026-08-12）：表头与内容严格按 th width 对齐，
   auto 布局下超长客商名会把表头挤到右侧；fixed 布局列宽恒定、内容超宽自动换行。 */
.table.table-fixed { table-layout: fixed; }
.table-fixed th, .table-fixed td { overflow-wrap: break-word; word-break: break-word; }
.table-fixed td:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 单元格内容超长截断（2026-09-07 新增） */
.cell-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.doc-red { color: var(--color-money-out); }              /* 负向金额红字 */

/* ---------- 已清行（FIFO 估算/原始已清，置灰不可选） ---------- */
.row-settled { color: var(--gray-400); background: var(--gray-50); }
.row-settled .doc-red { color: var(--gray-400); }
.tag-settled { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:10px;
  font-size:11px; line-height:1.6; color: var(--gray-500); background: var(--gray-100);
  border: 1px solid var(--gray-200); }
/* 退货/红字单（原始应收为负）：红字风格，与"未结清"红字区分靠标签+禁勾选+左侧红条 */
.tag-return { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:10px;
  font-size:11px; line-height:1.6; color: var(--color-danger); background: #fdeef3;
  border: 1px solid #f6c2d4; }
.switch-inline { display:inline-flex; align-items:center; gap:6px; margin-left:auto; }
.switch-inline input { width:auto; }
/* ---------- 对账列表：客商汇总行（可点击下钻） ---------- */
.summary-row { cursor: pointer; }
.summary-row:hover td { background: var(--gray-100); }

/* ---------- 订单行 ---------- */
.order-row { display:flex; align-items:center; justify-content:space-between; gap:16px;
             padding:14px 16px; border-bottom:1px solid var(--border); }
.order-row:last-child { border-bottom:none; }
.order-main { min-width:0; }
.order-code { font-family: var(--font-mono); font-size:13px; color: var(--gray-500); }
.order-company { font-size:15px; font-weight:600; color: var(--color-brand);
                 margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.order-side { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.order-meta { font-size:12px; color: var(--gray-500); text-align:right; }
.order-progress { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }

/* ---------- Toast ---------- */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
         background: var(--color-brand); color:#fff; padding:10px 18px; border-radius:8px;
         font-size:14px; box-shadow: var(--shadow-lg); z-index:40; opacity:0;
         transition: opacity .2s ease; pointer-events:none; }
.toast.show { opacity:1; }

/* ---------- 档案页布局辅助（阶段 1，复用上述设计变量） ---------- */
.tabbar { display:flex; gap:8px; margin-bottom: var(--space-4); }
.tabbar .btn { box-shadow:none; }
.toolbar { display:flex; align-items:center; gap:12px; margin-bottom: var(--space-4); flex-wrap:wrap; }
.toolbar-hint { font-size:13px; color: var(--gray-500); }
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px 16px; margin:4px 0 8px; }
.form-grid .field { display:flex; flex-direction:column; gap:6px; font-size:13px; color: var(--gray-600); }
.form-grid .field .input { width:100%; }
.form-grid .field-check { flex-direction:row; align-items:center; gap:8px; grid-column: 1 / -1; }
.form-grid .field-check input { width:16px; height:16px; }
.modal-actions { display:flex; align-items:center; justify-content:space-between;
             gap:10px; margin-top:16px; flex-wrap:wrap; }
.modal-actions > .btn { white-space:nowrap; }
.modal-actions-group { display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
                       flex:1 1 auto; min-width:0; }
/* 订单明细表「商品」单元格：商品名 + 单位 badge 同行展示，避免换行错位 */
.prod-cell { display:flex; align-items:flex-start; gap:8px; min-width:0; }
.prod-name { flex:1 1 auto; min-width:0; word-break:normal; overflow-wrap:break-word; line-height:1.45; }
.unit-tag { flex:0 0 auto; padding:1px 8px; border-radius:999px; font-size:11px;
            font-weight:600; color:var(--gray-600); background:var(--gray-100);
            border:1px solid var(--border); white-space:nowrap; margin-top:2px; }
/* 订单弹窗明细表数字输入框：填满单元格（避免 88/90px 硬编码溢出挤压布局） */
#edit-items .edit-qty, #edit-items .edit-price, #edit-items .edit-prod,
#convert-items .conv-qty,
#pur-items .pur-qty, #pur-items .pur-price,
#new-items .new-qty, #new-items .new-price {
  width:100%; min-width:60px; box-sizing:border-box; text-align:right;
}
#edit-items .edit-prod { text-align:left; min-width:160px; }
/* 订单编辑弹窗：明细行首列（已转 tag / 删除按钮）居中 */
#edit-items > tr > td:first-child { text-align:center; vertical-align:middle; }
/* 合计/抹零 等单据底栏：默认单行右对齐（修复 .doc-sum 此前漏写 display:flex 导致纵向堆叠） */
.doc-sum { display:flex; align-items:center; justify-content:flex-end; gap:18px; flex-wrap:wrap; }
.delete-msg { font-size:15px; font-weight:600; color: var(--color-brand); margin:8px 0; }
.delete-warn { font-size:13px; color: var(--gray-600); line-height:1.7;
               background: var(--color-danger-soft); border:1px solid var(--color-danger);
               border-radius:8px; padding:10px 12px; }

/* 可点击订单行（2026-08-12）：hover 高亮 + 手型 */
.order-row { cursor: pointer; transition: background-color .12s ease; }
.order-row:hover { background: var(--gray-50); }
.order-row:hover td { border-color: var(--border-strong); }

/* ============================================================
   销售订单页（orders.html）视觉增强 · 2026 重做
   仅用 tokens.css 变量，不硬编码颜色；不动其它页面既有结构。
   ============================================================ */

/* 区段副标题（替代原顶部两段长文字说明） */
.section-sub { font-size:13px; color: var(--gray-500); margin:0 0 var(--space-5); line-height:1.6; }

/* 顶部筛选栏：搜索框 + 状态分段 + 操作按钮 */
.filterbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom: var(--space-4); }
.filterbar-spacer { flex:1 1 auto; }
.filterbar .field-inline { display:inline-flex; align-items:center; gap:6px; font-size:13px;
                           color: var(--gray-600); margin:0; }
.filterbar .field-inline .input { width:auto; }
.period-tag { font-size:13px; color: var(--gray-600); }
.period-tag .num { color: var(--color-brand); font-weight:600; }
.filter-count { font-size:13px; color: var(--gray-500); white-space:nowrap; }

/* 搜索框（带前导放大镜图标，纯内联 SVG，无外部依赖） */
.filter-search { position:relative; display:flex; align-items:center; }
.filter-search .input { padding-left:34px; width:240px; }
.filter-search-icon { position:absolute; left:11px; width:16px; height:16px; color: var(--gray-400);
                      pointer-events:none; }

/* 状态分段筛选控件（全部 / 进行中 / 已完成） */
.seg { display:inline-flex; align-items:center; background: var(--gray-100);
      border-radius:999px; padding:3px; gap:2px; }
.seg-item { border:none; background:transparent; padding:6px 14px; border-radius:999px;
            font-size:13px; font-weight:500; color: var(--gray-600); cursor:pointer;
            transition: all .15s ease; white-space:nowrap; }
.seg-item:hover { color: var(--color-brand); }
.seg-item.active { background:#fff; color: var(--color-primary); font-weight:600;
                   box-shadow: var(--shadow-sm); }

/* 状态标签（新建/执行中/已完成 等）— 销售订单与采购订单共用 */
.tag { display:inline-block; padding:1px 9px; border-radius:999px; font-size:12px;
       line-height:20px; font-weight:600; white-space:nowrap;
       color: var(--gray-600); background: var(--gray-100); border:1px solid var(--border); }
.tag-active { color: var(--color-primary); background: var(--color-primary-soft);
              border-color: var(--color-primary); }
/* 履约进度单元格：进度条 + 百分比 */
.progress-cell { display:flex; align-items:center; gap:10px; }
.progress-pct { font-size:12px; font-weight:600; color: var(--gray-500);
                min-width:38px; text-align:right; font-variant-numeric: tabular-nums; white-space:nowrap; }

/* 表格斑马纹（偶数行浅底） */
.table.striped tbody tr:nth-child(even) { background: var(--gray-50); }

/* 订单列表行：覆盖通用 .order-row 的 flex 布局，恢复为表格行；
   保留点击能力（data-open + 事件委托），并加 hover 高亮 + 手型光标 */
.table tbody .order-row { display: table-row; cursor: pointer; transition: background-color .12s ease; }
.table tbody .order-row:hover { background: var(--color-primary-soft); }
.table tbody .order-row:hover td { border-color: var(--border-strong); }

/* 单据列表可点击行（销售/采购/收付款单：点击打开详情弹窗，T-单据点击打开） */
.table tbody .clickable-row { display: table-row; cursor: pointer; transition: background-color .12s ease; }
.table tbody .clickable-row:hover { background: var(--color-primary-soft); }
.table tbody .clickable-row:hover td { border-color: var(--border-strong); }

/* 客户档案深链：列表内客户/客商名 → /customer/<cid>（主色链接，行内可点不触发行详情） */
.cust-link { color: var(--color-link); text-decoration: none; cursor: pointer; }
.cust-link:hover { color: var(--color-primary-hover); text-decoration: underline; }
/* 在可点击单据行内，客户链接 hover 时不被行高亮抢走焦点 */
.clickable-row .cust-link { background: transparent; }

/* 订单行内可用库存提示：录单/转单时直接在商品行下显示可用量，本单超出则标红 */
.stock-hint { margin-top: 4px; font-size: 12px; line-height: 1.35; color: var(--gray-500); white-space: nowrap; }
.stock-hint-warn { color: var(--color-warning); }
.stock-hint-alert { color: var(--color-danger); font-weight: 500; }