/* ══════════════════════════════════════════════════════════════
   profit.css —— 盈利结构两页（毛利分层 / 返利分摊）的样式。

   三条自律，和 dept.js 那一组同一套：
   · 类名一律带 `pf-` 前缀，一个 app.css 的通用类都不覆盖
     （.panel / .tbl / .kpi / .chip / .cl-title 只用，不改）；
   · 颜色、圆角、间距、字号全部走 app.css 里已有的 CSS 变量与颜料组
     （--pg-* / --good / --bad / --sp-* / --r-*），不自己发明配色；
   · 「双拼」定版：工作区浅色，每页顶上一块 .cl-title 主角区 —— 这里只补
     两页各自要多出来的那几件东西，主角区本身的漆面归 app.css。

   涨跌色 .pf-dl 是**自带一份**而不是复用 app.css 的 .dlt：.dlt 是
   dept.js 那一组正在改的文件里的类，两条开发线共用一个未定的类名，
   一边一改另一边就掉色。三行 CSS 的重复换掉这个耦合，划算。
   ══════════════════════════════════════════════════════════════ */

/* ── 主角区 ──────────────────────────────────────────────── */
.pf-head{ display:flex; align-items:flex-start; gap:var(--sp-5); flex-wrap:wrap; }
.pf-head .pf-hl{ flex:1 1 360px; min-width:0; }
.pf-head .pf-hl p{ margin:var(--sp-2) 0 0; color:var(--dk-ink2);
                   font-size:13px; line-height:1.75; max-width:76ch; }
.pf-head .pf-hl p b{ color:var(--dk-ink); font-weight:650; }
.pf-head .pf-hl p code{ font-family:var(--mono); font-size:12px;
                        background:rgba(255,255,255,.6); border:1px solid var(--dk-line2);
                        border-radius:4px; padding:0 4px; color:var(--dk-ink); }
/* 第二段是「口径上的告诫」，比第一段轻一档 —— 它要被读到，但不该和标题抢。 */
.pf-head .pf-hn{ font-size:12px; color:var(--dk-ink3); line-height:1.7; }
.pf-head .pf-hn b{ color:var(--dk-ink2); }
.pf-head .pf-hr{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.pf-head .fl{ font-size:12px; color:var(--dk-ink3); }

/* 导出条：chip + 一行「导的是哪一份」。那行说明不是装饰 —— 它是防
   「屏幕上按净销量权重看的、Excel 里却是按金额权重」的唯一一道可见防线，
   所以印在页面上而不是挂在悬停里。窄屏时它折到 chip 下面，不省掉。 */
.pf-x{ display:inline-flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.pf-x em{ font-style:normal; font-size:10.5px; color:var(--dk-ink3); line-height:1.6;
          max-width:40ch; }
.pf-xw{ display:block; color:var(--warn); font-weight:600; }

/* 期间轴取不到时的替代件。刻意**不做成灰掉的下拉** —— 一个点不开的下拉
   只会让人反复点；写清楚「取不到、所以不能切」才停得住手。 */
.pf-nopick{ display:inline-flex; align-items:baseline; gap:var(--sp-2);
            padding:6px 12px; border:1px dashed var(--dk-line2); border-radius:var(--r-xs);
            background:rgba(255,255,255,.45); color:var(--dk-ink); font-size:13px; }
.pf-nopick em{ font-style:normal; font-family:system-ui,sans-serif;
               font-size:10.5px; color:var(--dk-ink3); }

/* ── 控件条（切分维度 / 摊法 / 池键） ─────────────────────── */
.pf-bar{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
         margin:0 0 var(--sp-4); }
.pf-bar .fl{ font-size:11px; letter-spacing:.06em; color:var(--ink3); }
.pf-seg{ display:inline-flex; gap:var(--sp-1); flex-wrap:wrap; }
.pf-hint{ flex:1 1 260px; min-width:0; font-size:11px; color:var(--ink3); line-height:1.65; }
.pf-hint b{ color:var(--ink2); font-weight:650; }

/* 已生效的筛选：可撤销才算筛选，撤不掉的只是陷阱。 */
.pf-fchip{ display:inline-flex; align-items:center; gap:6px; cursor:pointer;
           border:1px solid var(--brand-border); background:var(--brand-soft);
           color:var(--brand); border-radius:var(--r-pill); padding:5px 10px 5px 12px;
           font-size:12px; }
.pf-fchip b{ font-family:var(--mono); font-weight:650; }
.pf-fchip i{ font-style:normal; opacity:.55; font-size:11px; }
.pf-fchip:hover{ background:var(--panel); }
.pf-fchip:hover i{ opacity:1; color:var(--bad); }

/* 被禁的摊法。它**摆在这里**是有意的：藏掉之后，下一个人只会觉得
   「按毛利摊更合理」然后去后端加回来。点它得到的是服务端的拒答。 */
.pf-ban{ border-style:dashed !important; color:var(--ink3) !important; }
.pf-ban:hover{ border-color:var(--deny-line) !important; color:var(--bad) !important; }
.pf-ban.on{ background:var(--deny-soft) !important; border-color:var(--deny-line) !important;
            color:var(--bad) !important; border-style:solid !important; }

/* 拒答卡上面那条复位条：拒答卡只能「回经营总览」，而这一页最常见的拒答
   是「维度写错了」—— 那时人要的是改回来，不是离开。 */
.pf-reset{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
           margin:0 0 var(--sp-3); padding:var(--sp-3) var(--sp-4);
           border:1px solid var(--warn-line); background:var(--warn-soft);
           border-radius:var(--r-sm); font-size:12.5px; color:var(--warn); }
.pf-reset span{ color:var(--ink2); }

/* ── 闭合校验块 ──────────────────────────────────────────── */
.pf-clo{ border-left:3px solid var(--good); }
.pf-clo.bad{ border-left-color:var(--bad); }
.pf-clo.none{ border-left-color:var(--line-2); }
.pf-clo-hd{ display:flex; align-items:center; gap:var(--sp-3);
            flex-wrap:wrap; margin-bottom:var(--sp-3); }
.pf-idt{ font-family:var(--mono); font-size:12px; color:var(--ink2);
         background:var(--panel-2); border:1px solid var(--line);
         border-radius:var(--r-xs); padding:5px 10px; }
.pf-clo-t td:first-child{ color:var(--ink2); }
.pf-clo-t td.rsn{ max-width:44ch; }
.pf-clo-n{ margin:var(--sp-3) 0 0; font-size:11.5px; color:var(--ink3); line-height:1.75; }
.pf-clo-n.bad{ color:var(--bad); }
.pf-clo-c{ text-align:center !important; }

.pf-badge{ display:inline-block; font-size:11px; font-weight:650; letter-spacing:.02em;
           padding:3px 10px; border-radius:var(--r-pill);
           background:var(--good-soft); border:1px solid var(--good-line); color:var(--good); }
.pf-badge.bad{ background:var(--deny-soft); border-color:var(--deny-line); color:var(--bad); }
/* 判定三态各有各的底：同源=琥珀（差值不能读）、独立=绿（可以读）、
   判不开=中性灰。**判不开绝不能画成红/否** —— 「没有证据」和「否」
   在这一页上会导出完全相反的动作。 */
.pf-badge.warn{ background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn); }
.pf-badge.ok{ background:var(--good-soft); border-color:var(--good-line); color:var(--good); }
.pf-badge.na{ background:var(--panel-2); border-color:var(--line-2); color:var(--ink2); }
.pf-badge.sm{ padding:1px 7px; font-size:11px; }

/* ── 涨跌色（自带一份，见文件头） ─────────────────────────── */
.pf-dl{ font-weight:650; }
.pf-dl.up{ color:var(--good); }
.pf-dl.down{ color:var(--bad); }
.pf-dl.flat{ color:var(--ink3); }
.pf-dl[title]{ text-decoration:underline dotted rgba(139,147,173,.5); text-underline-offset:3px; }

.pf-polar{ display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap;
           margin:0 0 var(--sp-4); font-size:11px; color:var(--ink3); line-height:1.7; }
.pf-polar b{ color:var(--ink2); font-size:11.5px; }
.pf-polar .up{ color:var(--good); font-weight:650; }
.pf-polar .down{ color:var(--bad); font-weight:650; }
.pf-polar em{ flex:1 1 300px; min-width:0; font-style:normal; }

/* ── 毛利分层：责任人图例与逐层表 ─────────────────────────── */
.pf-owners{ display:flex; gap:var(--sp-4); flex-wrap:wrap;
            margin:0 0 var(--sp-3); font-size:11.5px; color:var(--ink2); }
.pf-ol{ display:inline-flex; align-items:center; gap:6px; }
.pf-ol i{ width:10px; height:10px; border-radius:3px; display:inline-block; }

.pf-fig{ margin-bottom:var(--sp-3); }

/* 层号是一枚带责任人颜色的方牌 —— 颜色在瀑布、图例、表里是同一套，
   读者不用在三个地方各认一次。 */
.pf-lid{ display:inline-block; font-family:var(--mono); font-size:11px; font-weight:650;
         color:#fff; background:var(--c,#8b93ad); border-radius:4px;
         padding:1px 6px; margin-right:8px; }
.pf-lnm{ color:var(--ink); }
.pf-own{ text-align:left !important; font-family:inherit !important; color:var(--ink2); }
.pf-own i{ width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:6px; }
/* 「结论列」比邻列重一档：剩余毛利率与它的同环比才是这张表要人读走的东西。 */
.pf-lt td.pf-key, .pf-bt td.pf-key, .pf-st td.pf-key{ background:var(--panel-2); }
.pf-lt td.rsn{ max-width:30ch; }
.pf-worst{ display:inline-block; margin-left:8px; font-size:10px; padding:1px 7px;
           border-radius:var(--r-pill); background:var(--deny-soft);
           border:1px solid var(--deny-line); color:var(--bad);
           font-family:system-ui,sans-serif; }

/* 当前期间那一行：只加一道左标，不整行上色 —— 整行底色会和斑马纹打架。 */
.pf-bt tr.pf-cur td:first-child{ box-shadow:inset 3px 0 0 var(--brand); }

/* ── 归因块（环比 / 同比并排） ─────────────────────────────
   两档并排而不是叠成两屏：「环比在恶化、同比反而好转」是这一页最常见的
   一种形态，分成两屏读者要靠记忆去对，并排才对得上。窄屏自动落成一列。 */
.pf-ids{ display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:var(--sp-4); }
.pf-id{ border:1px solid var(--line); border-radius:var(--r-sm);
        padding:var(--sp-3) var(--sp-4) var(--sp-4); background:var(--panel-2); min-width:0; }
.pf-id-h{ display:flex; align-items:center; gap:var(--sp-2);
          flex-wrap:wrap; margin-bottom:var(--sp-3); }
.pf-id-h>b{ font-size:14px; color:var(--ink); }
.pf-id-b{ font-family:var(--mono); font-size:11px; color:var(--ink3); }
.pf-id-t{ margin-top:var(--sp-2); }
.pf-id-t td:first-child{ color:var(--ink2); }
.pf-id-t td.rsn{ max-width:34ch; }
.pf-id-n{ margin:var(--sp-3) 0 0; font-size:11px; color:var(--ink3); line-height:1.75; }

/* 「这一层自己」两列与右边「累计」四列之间的分界。两种 pt 问的不是同一个
   问题，挨着排却长得一样，是这张表最容易读错的地方 —— 给它一道竖线。 */
.pf-lt td.pf-self, .pf-lt th:nth-child(6){ border-left:2px solid var(--line-2); }
/* 「压得最多的一层」格：层号牌 + 该层自己贡献的 pt，一格答完。 */
.pf-wl{ white-space:nowrap; }
.pf-lid.sm{ font-size:10px; padding:1px 5px; margin-right:6px; }
/* 展示名三态：master 档把原始编码收成一枚小码牌（名字是名字、编码是编码）；
   code_only 档挂一枚「无主数据」的标 —— 它是缺口，不是页面没做完。 */
.pf-code{ font-family:var(--mono); font-size:10px; color:var(--ink3);
          background:var(--panel-2); border:1px solid var(--line);
          border-radius:4px; padding:0 5px; margin-left:6px; }
.pf-nocode{ font-size:10px; color:var(--warn); background:var(--warn-soft);
            border:1px solid var(--warn-line); border-radius:var(--r-pill);
            padding:1px 7px; margin-left:6px; }

/* ── 同源判定块 ──────────────────────────────────────────── */
.pf-vd{ border-left:3px solid var(--line-2); }
.pf-vd.warn{ border-left-color:var(--warn); }
.pf-vd.ok{ border-left-color:var(--good); }
.pf-vd.na{ border-left-color:var(--ink3); }
.pf-vd-h{ display:flex; align-items:center; gap:var(--sp-3);
          flex-wrap:wrap; margin-bottom:var(--sp-2); }
.pf-vd-l{ font-size:13px; color:var(--ink); }
.pf-vd-c{ margin:0 0 var(--sp-3); font-size:12.5px; color:var(--ink2); line-height:1.85; }
.pf-vd-c b{ color:var(--ink); }
.pf-vd-t td:first-child{ color:var(--ink2); width:1%; white-space:nowrap; }
.pf-vd-t td.n{ font-family:inherit !important; }
.pf-vd-t td.rsn{ max-width:40ch; }

/* ── 说明段与截断提示 ────────────────────────────────────── */
.pf-note{ margin:var(--sp-4) 0 0; padding:var(--sp-3) var(--sp-4);
          background:var(--panel-2); border:1px solid var(--line);
          border-radius:var(--r-xs); font-size:11.5px; color:var(--ink2); line-height:1.85; }
.pf-note b{ color:var(--ink); }
.pf-note em{ font-style:normal; text-decoration:underline; text-underline-offset:2px; }
.pf-note code{ font-family:var(--mono); font-size:11px; background:var(--panel);
               border:1px solid var(--line); border-radius:4px; padding:0 4px; }

/* 截断永远可见：多少条、印了几条、这一刀是谁切的。 */
.pf-trunc-w{ margin:0 0 var(--sp-3); }
.pf-trunc{ display:inline-flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
           font-size:11px; color:var(--ink3); line-height:1.7; }
.pf-trunc b{ color:var(--ink2); font-family:var(--mono); }
.pf-trunc .chip{ margin-left:var(--sp-2); }

/* ── 返利分摊：摊法披露 / 范围警告 / 敏感度 ───────────────── */
.pf-warn{ margin:0 0 var(--sp-4); padding:var(--sp-3) var(--sp-4);
          border:1px solid var(--warn-line); background:var(--warn-soft);
          border-radius:var(--r-sm); }
.pf-warn b{ display:block; font-size:12.5px; color:var(--warn); margin-bottom:4px; }
.pf-warn p{ margin:0; font-size:11.5px; color:var(--ink2); line-height:1.8; }
/* 差值免责条跟着判定三态走。判不开一档刻意用中性灰而不是红：
   它说的是「还没有证据」，不是「不同源」。 */
.pf-warn.na{ border-color:var(--line-2); background:var(--panel-2); }
.pf-warn.na b{ color:var(--ink); }

/* 披露块和数字同等大小，不折叠 —— 这一页的产出有一半在这里。 */
.pf-disc{ border-left:3px solid var(--pg-mauve); }
.pf-disc-t td:first-child{ color:var(--ink2); width:1%; white-space:nowrap; }
.pf-disc-t td.n{ font-family:inherit !important; }
.pf-disc-t td.n code{ font-family:var(--mono); font-size:11.5px; }
.pf-disc-t td.rsn{ max-width:56ch; }
.pf-red{ color:var(--bad); }

.pf-forbid{ margin-top:var(--sp-4); padding:var(--sp-3) var(--sp-4);
            border:1px solid var(--deny-line); background:var(--deny-soft);
            border-radius:var(--r-sm); }
.pf-forbid b{ display:block; font-size:12.5px; color:var(--bad); margin-bottom:4px; }
.pf-forbid p{ margin:0; font-size:11.5px; color:var(--ink2); line-height:1.85; }
.pf-forbid-n{ margin-top:var(--sp-2) !important; color:var(--ink3) !important; }

.pf-sum .pf-kpis{ margin-bottom:0; }
.pf-kpis .kpi .l{ font-size:10.5px; letter-spacing:.06em; color:var(--ink3); }
.pf-kpis .kpi .v{ margin-top:6px; font-size:19px; }
.pf-kpis .kpi .d{ margin-top:6px; font-size:10.5px; color:var(--ink3); line-height:1.6;
                  white-space:normal; }

.pf-cat{ text-align:left !important; font-family:inherit !important; color:var(--ink2); }
/* 兜底行：底色压一档 + 顶上一道线，让它明显不是一个 SKU。
   它没有毛利率，所以那几格是「—」而不是 0 —— 闭合不是靠抹平得来的。 */
.pf-st tr.pf-unalloc td{ background:var(--panel-2); color:var(--ink2);
                         border-top:2px solid var(--line-2); }
.pf-st tr.pf-unalloc td:first-child b{ color:var(--warn); }

.pf-pn td:first-child{ font-family:var(--mono) !important; font-size:11.5px; }
.pf-pn td.rsn{ max-width:52ch; }

/* ── 窄屏 ────────────────────────────────────────────────
   两页的表都靠 .tblwrap 横滚（壳会量出真的滚得动的那几张并打提示），
   这里只把主角区与控件条收成一列。 */
@media(max-width:900px){
  .pf-head{ flex-direction:column; gap:var(--sp-3); }
  .pf-head .pf-hr{ width:100%; }
  .pf-hint{ flex-basis:100%; }
  .pf-polar em{ flex-basis:100%; }
}