/* ===== 业务中台界面风格规范（框架期 V0.1）===== */
:root {
  --primary: #1565C0;
  --primary-dark: #0D47A1;
  --primary-light: #E3F2FD;
  --bg: #F5F7FA;
  --card: #FFFFFF;
  --border: #E0E0E0;
  --text: #212121;
  --text2: #616161;
  --green: #2E7D32;
  --green-bg: #E8F5E9;
  --red: #C62828;
  --red-bg: #FFEBEE;
  --orange: #E65100;
  --orange-bg: #FFF3E0;
  --gray-bg: #ECEFF1;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
body { background: var(--bg); color: var(--text); font-size: 14px; }
a.link { color: var(--primary); text-decoration: none; }
a.link:hover { text-decoration: underline; }

/* ===== 登录页 ===== */
.login-page { position: fixed; inset: 0; background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%); display: flex; align-items: center; justify-content: center; }
.login-box { background: #fff; width: 380px; border-radius: 10px; padding: 40px 36px; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.login-box h1 { font-size: 20px; color: var(--primary-dark); text-align: center; margin-bottom: 6px; }
.login-box .sub { font-size: 12px; color: var(--text2); text-align: center; margin-bottom: 24px; }
.login-error { background: var(--orange-bg); color: var(--orange); font-size: 12.5px; padding: 9px 12px; border-radius: 5px; margin-bottom: 8px; text-align: center; }
.login-box label { display: block; font-size: 12px; color: var(--text2); margin: 14px 0 6px; }
.login-box input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 5px; font-size: 14px; }
.login-box input:focus { outline: none; border-color: var(--primary); }
.login-btn { width: 100%; margin-top: 24px; padding: 11px; background: var(--primary); color: #fff; font-size: 15px; border-radius: 5px; border: none; cursor: pointer; }
.login-btn:hover { background: var(--primary-dark); }

/* ===== 顶栏 ===== */
.topbar { height: 54px; background: var(--primary-dark); color: #fff; display: flex; align-items: center; padding: 0 20px; position: sticky; top: 0; z-index: 50; }
.topbar .logo { font-size: 16px; font-weight: 700; }
.topbar .env { font-size: 11px; background: rgba(255,255,255,.18); padding: 3px 8px; border-radius: 10px; margin-left: 12px; }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; }
.topbar .role-tag { background: #FFB300; color: #4E342E; font-size: 11px; padding: 3px 9px; border-radius: 10px; font-weight: 700; }
.topbar .logout { color: #fff; background: rgba(255,255,255,.15); padding: 6px 14px; font-size: 12px; border-radius: 4px; text-decoration: none; }

/* ===== 布局 ===== */
/* 左侧功能框全站冻结：吸顶在顶栏之下，自身独立滚动，不随主区滚动。 */
.layout { display: flex; min-height: calc(100vh - 54px); align-items: flex-start; }
.sidebar { width: 260px; background: #fff; border-right: 1px solid var(--border); padding: 12px 0; flex-shrink: 0;
           position: sticky; top: 54px; height: calc(100vh - 54px); overflow-y: auto; overscroll-behavior: contain; }
.sidebar .group { font-size: 11px; color: #90A4AE; padding: 12px 20px 6px; font-weight: 700; letter-spacing: 1px; }
.nav-item { display: flex; align-items: center; padding: 11px 20px; font-size: 13.5px; color: #455A64; cursor: pointer; border-left: 3px solid transparent; white-space: nowrap; }
.nav-item:hover { background: var(--bg); }
.nav-item.active { background: var(--primary-light); color: var(--primary-dark); border-left-color: var(--primary); font-weight: 700; }
.nav-sub { padding: 7px 20px 7px 38px; font-size: 12.5px; color: #78909C; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-sub:hover { background: var(--bg); color: var(--primary); }
.nav-sub.active { color: var(--primary-dark); font-weight: 700; }
.nav-item .badge { margin-left: auto; font-size: 10px; padding: 2px 7px; border-radius: 9px; background: var(--gray-bg); color: #78909C; }
.nav-item .badge.finance { background: var(--orange-bg); color: var(--orange); }
.nav-item .badge.active-mod { background: var(--green-bg); color: var(--green); }
/* 子菜单级隔离标记（2026-10-17）：客户/供应商往来台账移入「业务往来」后，
   模块名上没有 🔒，需要在这两条子菜单上单独标出来，否则员工只看到「点进去被弹回」。
   只用一个 🔒 + title 悬停说明：侧栏 260px，子菜单可用宽度约 202px，
   「供应商往来台账（应付）」已有 12 个字，再加「🔒隔离」四个字会溢出被 ellipsis 吃掉。 */
.nav-sub .badge { margin-left: 6px; font-size: 10px; padding: 1px 4px; border-radius: 8px; background: var(--orange-bg); color: var(--orange); }

/* ===== 主区 ===== */
.main { flex: 1; padding: 22px 26px; }
.page-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.page-desc { font-size: 12px; color: var(--text2); margin-bottom: 20px; }

/* ===== 组件 ===== */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; margin-bottom: 16px; }
.card h3 { font-size: 14.5px; margin-bottom: 12px; }
.card h3 .hint { font-size: 11px; font-weight: 400; color: #90A4AE; margin-left: 10px; }
.mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mod-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; cursor: pointer; position: relative; }
.mod-card:hover { box-shadow: 0 4px 14px rgba(21,101,192,.14); }
.mod-card .name { font-size: 15px; font-weight: 700; color: var(--primary-dark); margin-bottom: 6px; }
.mod-card .desc { font-size: 12px; color: var(--text2); line-height: 1.6; padding-right: 56px; }
.mod-card .status { position: absolute; top: 12px; right: 12px; font-size: 10px; padding: 2px 8px; border-radius: 9px; }
.st-placeholder { background: var(--gray-bg); color: #78909C; }
.st-active { background: var(--green-bg); color: var(--green); }
.st-locked { background: var(--orange-bg); color: var(--orange); }
.placeholder-hero { background: linear-gradient(120deg, var(--primary-light), #fff); border: 1px solid #BBDEFB; border-radius: 8px; padding: 22px 24px; margin-bottom: 16px; }
.placeholder-hero .t { font-size: 16px; font-weight: 700; color: var(--primary-dark); }
.placeholder-hero .d { font-size: 12.5px; color: var(--text2); margin-top: 8px; line-height: 1.8; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th { background: var(--bg); color: var(--text2); text-align: left; padding: 9px 12px; border: 1px solid var(--border); font-size: 12px; }
table.tbl td { padding: 9px 12px; border: 1px solid var(--border); }
.tag { display: inline-block; font-size: 10.5px; padding: 2px 8px; border-radius: 9px; }
.tag.dev { background: var(--gray-bg); color: #78909C; }
.tag.existing { background: var(--green-bg); color: var(--green); }
.tag.later { background: var(--orange-bg); color: var(--orange); }
.tag.closed { background: #ECEFF1; color: #90A4AE; text-decoration: line-through; }
.proto-note { border: 1px dashed var(--primary); background: #F3F8FE; border-radius: 6px; padding: 10px 14px; font-size: 12px; color: var(--primary-dark); line-height: 1.8; margin-bottom: 16px; }
.menu-list { list-style: none; }
.menu-list li { padding: 6px 0; }
.menu-list a { color: var(--primary); text-decoration: none; }
.toolbar { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; }
.toolbar input { padding: 8px 12px; border: 1px solid var(--border); border-radius: 5px; width: 220px; font-size: 13px; }
.btn-primary { background: var(--primary); color: #fff; padding: 8px 18px; font-size: 13px; border: none; border-radius: 4px; cursor: pointer; }
.btn-plain { background: #fff; color: var(--text2); border: 1px solid var(--border); padding: 8px 18px; font-size: 13px; border-radius: 4px; cursor: pointer; }
.lock-banner { background: var(--green-bg); color: var(--green); border: 1px solid #A5D6A7; border-radius: 6px; padding: 10px 14px; font-size: 12.5px; margin-bottom: 16px; }

/* ===== SOP 页 ===== */
.sop-step { border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 6px; padding: 12px 16px; margin-bottom: 12px; background: #FDFEFF; }
.sop-title { font-size: 13.5px; font-weight: 700; color: var(--primary-dark); margin-bottom: 6px; }
.sop-detail { font-size: 12.5px; color: var(--text); line-height: 1.8; }
.sop-check { font-size: 11.5px; color: var(--green); margin-top: 6px; background: var(--green-bg); border-radius: 4px; padding: 5px 10px; display: inline-block; }

/* ===== 跟单模块 ===== */
.stat-row { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.stat-card { flex: 1; min-width: 110px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; text-align: center; }
.stat-card .stat-num { display: block; font-size: 22px; font-weight: 700; color: var(--primary); }
.stat-card .stat-label { font-size: 11.5px; color: var(--text2); }
.stat-card.danger { border-color: #FFCDD2; background: #FFFBFC; }
.stat-card.danger .stat-num { color: var(--red); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: 1fr; } }
table.kv th { width: 110px; background: var(--bg); font-weight: 600; }
table.form-tbl th { width: 130px; background: var(--bg); font-weight: 600; vertical-align: middle; }
table.form-tbl input, table.form-tbl select { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; }
.toolbar select { padding: 8px 12px; border: 1px solid var(--border); border-radius: 5px; font-size: 13px; background: #fff; }
.row-exc td { background: #FFF8F8; }
.row-dim td { color: #B0BEC5; }
.lock-banner.warn { background: var(--orange-bg); color: var(--orange); border-color: #FFCC80; }
/* 状态标签 */
.tag.st-created { background: #ECEFF1; color: #546E7A; }
.tag.st-shipped { background: #E3F2FD; color: #1565C0; }
.tag.st-signed { background: #E8F5E9; color: #2E7D32; }
.tag.st-reconciled { background: #EDE7F6; color: #5E35B1; }
.tag.exc { background: #FFEBEE; color: var(--red); }

/* ===== 页签窗口（商品资料转换等功能模块：一个入口 + HTML 平行页签） ===== */
.tabbar { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.tab { padding: 9px 18px; font-size: 13.5px; color: var(--text2); text-decoration: none; border: 1px solid var(--border); border-bottom: none; border-radius: 6px 6px 0 0; background: #FAFBFC; position: relative; margin-bottom: -2px; }
.tab:hover { color: var(--primary); background: var(--primary-light); }
.tab.active { background: #fff; color: var(--primary-dark); font-weight: 700; border-bottom: 2px solid #fff; }
.tab .dot { display: inline-block; min-width: 16px; height: 16px; line-height: 16px; text-align: center; background: var(--red); color: #fff; border-radius: 8px; font-size: 10px; margin-left: 5px; padding: 0 4px; vertical-align: middle; }

/* ===== 表单页 ===== */
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 12px; color: var(--text2); margin-bottom: 5px; }
.form-row input, .form-row select, .form-row textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 5px; font-size: 13.5px; font-family: inherit; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--primary); }
.hint-file { font-size: 11px; color: #78909C; margin-left: 8px; }

/* ===== 状态流转 ===== */
.flow-steps { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.flow-step { font-size: 11px; padding: 4px 10px; border-radius: 10px; background: var(--gray-bg); color: #78909C; }
.flow-step.done { background: var(--green-bg); color: var(--green); font-weight: 700; }
.flow-step.current { background: var(--primary); color: #fff; font-weight: 700; }
.flow-arrow { color: #B0BEC5; font-size: 11px; }
.exc-tag { background: var(--red-bg); color: var(--red); font-size: 10.5px; padding: 2px 8px; border-radius: 9px; font-weight: 700; }

/* ===== 全局消息提示（flash 浮层，见 base.html）===== */
#flashBox { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; align-items: center; }
.flash-toast { cursor: pointer; max-width: 760px; font-size: 13px; line-height: 1.6;
  padding: 10px 18px; border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .16); }
.flash-toast.ok { background: var(--green-bg); color: var(--green); border: 1px solid #A5D6A7; }
.flash-toast.err { background: var(--red-bg); color: var(--red); border: 1px solid #EF9A9A; }
.flash-toast.info { background: var(--primary-light); color: var(--primary-dark); border: 1px solid #90CAF9; }

/* ===== 门店表头行内编辑（订单转置 · 内置数据）===== */
.hd-ta { width: 100%; box-sizing: border-box; font-size: 11.5px; line-height: 1.55;
  color: #37474F; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px;
  resize: vertical; font-family: inherit; max-height: 220px; }
.hd-ta:focus { outline: none; border-color: var(--primary); background: #FFFDF5; }
.hd-saved { font-size: 11px; color: var(--green); margin-left: 8px; }

/* ===== 报表分析：整条头部吸顶冻结（详情区自由滚动） =====
   三层吸顶：① 头部块（标题/描述/筛选/页签/KPI）② 明细卡标题 ③ 表格表头。
   ②③ 的 top 依赖 ① 的实测高度，由 report_base.html 写入 --rep-head-h / --rep-card-h。 */
:root { --rep-head-h: 0px; --rep-card-h: 26px; }
.rep-sticky { position: sticky; top: 54px; z-index: 30; background: var(--bg); padding: 4px 0; }
.rep-sticky > *:last-child { margin-bottom: 0; }
.rep-sticky .tabbar { margin-bottom: 8px; }

/* 明细卡标题吸顶（钉在头部块之下）。
   注意：标题的可视高度必须等于 --rep-card-h，表头才能严丝合缝贴在它下面。
   切忌把 h3 的 margin-bottom 也算进去——那会在标题与表头之间留出一条缝，
   滚动时下面的数据行会从缝里露出来（2026-10-12 实测踩坑）。 */
.rep-main .card h3 { font-size: 14px; position: sticky; top: calc(54px + var(--rep-head-h));
                     z-index: 22; background: var(--card); border-bottom: 1px solid #EEF2F7;
                     padding-bottom: 8px; margin-bottom: 0;
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 表格表头吸顶（钉在卡标题之下）。border-collapse 已是 separate，故用内阴影补底边线。 */
.rep-main .rep-table th { position: sticky; top: calc(54px + var(--rep-head-h) + var(--rep-card-h));
                          z-index: 21; box-shadow: inset 0 -1px 0 #E3EAF2; }

/* 表格整体居中：表头（列名）与明细单元格一致居中，数值列不再单独靠右 */
.rep-main .rep-table th,
.rep-main .rep-table td,
.rep-main .rep-table .rep-num { text-align: center; }

/* 报表页留白压紧（仅作用本页，不动全站） */
.rep-main { padding: 14px 20px 26px; }
.rep-main .page-title { font-size: 17px; margin-bottom: 2px; }
.rep-main .page-desc { margin-bottom: 8px; }
.rep-main .stat-row { margin-bottom: 10px; }
.rep-main .stat-card { padding: 10px 14px; }
.rep-main .stat-card .stat-num { font-size: 19px; }
.rep-main .card { padding: 13px 16px; margin-bottom: 12px; }
.rep-main .tab { padding: 7px 15px; }

/* ===== 新品到店跟踪：分类切换条 / 阈值设定面板 / 判定标签（2026-10-12）===== */
.cls-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
           margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.cls-lab { font-size: 12px; color: #607D8B; }
.cls-sp { flex: 1 1 auto; }
.cls-btn { display: inline-block; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px;
           background: #fff; font-size: 12.5px; color: #37474F; text-decoration: none; white-space: nowrap; }
.cls-btn:hover { border-color: var(--primary); color: var(--primary-dark); }
.cls-btn b { font-weight: 500; margin-left: 6px; color: #90A4AE; }
.cls-btn.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.cls-btn.on b { color: #E3F2FD; }

.th-panel { margin-top: 10px; padding: 12px 14px; border: 1px solid #CFD8DC; border-radius: 8px; background: #F7FAFC; }
.th-cols { display: flex; flex-wrap: wrap; gap: 28px; }
.th-col { min-width: 240px; }
.th-hd { font-size: 13px; font-weight: 500; color: #37474F; margin-bottom: 8px; }
.th-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.th-row > span { font-size: 12.5px; color: #607D8B; width: 108px; text-align: right; flex-shrink: 0; }
.th-row > input { width: 88px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px;
                  font-size: 12.5px; text-align: right; background: #FFFDF5; }
.th-row > em { font-size: 12px; color: #90A4AE; font-style: normal; width: 18px; }
.th-act { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px;
          border-top: 1px dashed var(--border); flex-wrap: wrap; }

.cls-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px;
           white-space: nowrap; border: 1px solid transparent; }
.cls-tag.cls-hot { background: #EAF3DE; color: #2E7D32; border-color: #C0DD97; }
.cls-tag.cls-cold { background: #FCEBEB; color: #B71C1C; border-color: #F7C1C1; }
.cls-tag.cls-watch { background: #F1EFE8; color: #5F5E5A; border-color: #D3D1C7; }
.cls-tag.cls-normal { background: #E6F1FB; color: #0C447C; border-color: #B5D4F4; }
.cls-tag.cls-idle { background: #FAFAFA; color: #9E9E9E; border-color: #E0E0E0; }

/* ===== 可搜索下拉（combobox，报表筛选门店用）===== */
.ssel { position: relative; display: inline-block; vertical-align: middle; }
.ssel > .ssel-input { width: 200px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 5px;
                      font-size: 13px; background: #fff; color: var(--text); }
.ssel > .ssel-input:focus { outline: none; border-color: var(--primary); }
.ssel-list { position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; max-height: 296px;
             overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 6px;
             box-shadow: 0 6px 18px rgba(0, 0, 0, .12); z-index: 60; }
.ssel-item { padding: 7px 12px; font-size: 12.5px; color: #37474F; cursor: pointer; white-space: nowrap; }
.ssel-item:hover { background: var(--primary-light); color: var(--primary-dark); }
.ssel-item .sc { color: #90A4AE; font-size: 11.5px; margin-left: 6px; }
.ssel-item.on { background: var(--primary-light); color: var(--primary-dark); font-weight: 500; }
.ssel-empty { padding: 8px 12px; font-size: 12px; color: #90A4AE; }

/* 商品维度筛选（5 个）的小标签 + 窄输入框 */
.dim-lab { font-size: 12px; color: #607D8B; margin-left: 4px; white-space: nowrap; }
.dm-sel > .ssel-input { width: 132px; padding: 7px 10px; font-size: 12.5px; }
.dm-sel > .ssel-input::placeholder { color: #B0BEC5; }