/* ==========================================================================
   测算工具共用补充样式（/tools/rent 与 /tools/menu）

   这两个页面的骨架直接复用 profit.css 的 .pf-* 变量与组件，本文件只补
   「/profit 里没有、但两个工具都要用」的零件。刻意不在这里重定义 .pf-card /
   .pf-kpi / .pf-table —— 一旦复制一份，改了 /profit 的卡片内距，这边就悄悄不一致，
   而这两个页面的卖点恰恰是「和盈利测算同一套账」。

   所有颜色都走 app.css 的变量或 profit.css 已用过的色值，不引入新配色。
   ========================================================================== */

/* ---------------- KPI 四列（/tools/menu 用，6 个指标排两行会宽窄不一） ---------------- */
.pf-kpis.pf-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------------- 敏感度表：涨跌用同一套红绿，别在单元格里再写 style ---------------- */
.pf-sens-up { color: #ff8a93; }   /* 回本变长 = 变差 */
.pf-sens-down { color: var(--accent-teal-text); } /* 回本变短 = 变好 */
.pf-sens-flat { color: var(--muted); }

/* ---------------- SKU 编辑器（/tools/menu）----------------
   每行两排：第一排「菜品名 + 删除」，第二排「售价 / 食材 / 包装 / 占比」四个数字框，
   每个框上方带一行 10.5px 的字段名。

   为什么不排成一排六格：左栏内容宽只有 348px（1440 与 1920 下侧栏都是 396px 固定宽）。
   一排六格最少要 96+78+78+70+66+26 再加大 30px 间距 = 444px，实测溢出 96px，
   删除按钮被挤到卡片外面、必须横向拖侧栏才点得到。两排之后每个数字框有 70px 以上，
   「128.00」这种六位数字放得下；字段名跟着框走，窄屏也不会出现「不知道这格填什么」。 */
.pf-sku { display: flex; flex-direction: column; gap: 6px; }
/* input 的固有宽度约 20 个字符，作为 grid 子项时 min-width:auto 会把列撑开：
   390px 宽的手机上实测把布局视口顶到 423px（页面能被左右拖动）。必须显式归零。 */
.pf-sku-row > *, .pf-sku-row .input { min-width: 0; }
.pf-sku-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 26px;
    gap: 6px;
    align-items: end;
    padding: 8px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: #0e1622;
}
.pf-sku-f { display: block; min-width: 0; }
.pf-sku-f i {
    display: block; font-style: normal; font-size: var(--fs-xs, 13px); line-height: 1.4;
    color: var(--muted); margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-sku-row .pf-sku-name { grid-column: 1 / 5; grid-row: 1; }
/* 只写 grid-row、不写列号：四个数字框按顺序自动落到第二排的 1~4 列。
   删除按钮已经把第 1 排第 5 列占了，自动排布不会跟它抢位。 */
.pf-sku-row .pf-sku-f:not(.pf-sku-name) { grid-row: 2; }
.pf-sku-row .input { width: 100%; padding: 7px 8px; font-size: var(--fs-xs, 13px); }
.pf-sku-del {
    width: 26px; height: 26px; line-height: 1;
    background: transparent; border: 1px solid var(--line); border-radius: 6px;
    color: var(--muted); cursor: pointer; font-size: var(--fs-sm, 14px); padding: 0;
}
/* 输入框 32px、按钮 26px，差 6px 上下各分 3px，视觉上才和右边的输入框居中对齐 */
.pf-sku-row .pf-sku-del { grid-column: 5; grid-row: 1; margin-bottom: 3px; }
.pf-sku-del:hover { color: #ff8a93; border-color: rgba(239, 77, 90, .4); }
.pf-sku-add {
    width: 100%; height: 32px; margin-top: 4px;
    background: transparent; border: 1px dashed var(--line); border-radius: var(--radius-sm);
    color: var(--text-2); font-size: var(--fs-xs, 13px); cursor: pointer;
}
.pf-sku-add:hover { border-color: var(--brand); color: #9dc7ff; }
.pf-sku-sum {
    display: flex; flex-wrap: wrap; gap: 6px 16px;
    margin-top: 8px; font-size: var(--fs-xs, 13px); color: var(--muted);
}
.pf-sku-sum b { font-family: var(--mono); color: var(--text); font-weight: 600; }
.pf-sku-sum .is-warn { color: #f3bb5b; }
.pf-sku-sum .is-bad { color: #ff8a93; }

/* ---------------- 小标签：与 .pf-badge 同尺寸，但用于表格内的分类词 ---------------- */
.pf-tag {
    display: inline-block; font-size: var(--fs-xs, 13px); line-height: 1;
    padding: 3px 6px; border-radius: 4px; white-space: nowrap;
    border: 1px solid var(--line); color: var(--text-2); background: rgba(255, 255, 255, .03);
}
.pf-tag-t1 { color: #9dc7ff; border-color: rgba(47, 129, 247, .35); background: rgba(47, 129, 247, .12); }
.pf-tag-t2 { color: var(--accent-teal-text); border-color: rgba(23, 184, 166, .35); background: rgba(23, 184, 166, .12); }
.pf-tag-t3 { color: #f3bb5b; border-color: rgba(240, 169, 46, .35); background: rgba(240, 169, 46, .12); }

.pf-mini { font-size: var(--fs-xs, 13px); color: var(--muted); line-height: 1.7; }

/* ---------------- 成本行的第三列（.pf-cost-val）----------------
   profit.css 里它是 white-space:nowrap，第三列固定 108px（窄屏 92px）。
   /profit 的注脚只放一个百分比，塞得下；/tools/menu 的注脚要放「¥205,880」这种
   六位金额，390px 宽下实测宽 122px，被 nowrap 顶着溢出卡片 33px，整页跟着横向滚动。
   分两步收：所有屏宽下先允许列内收缩，窄屏再把注脚折到数值下面（见文件末尾）。
   列宽和字号都不动，桌面端观感与 /profit 完全一致。 */
.pf-cost-row > * { min-width: 0; }

/* ---------------- 菜品明细四个窄数字框（v2.6.0）----------------
   「数值统一左对齐」这条通用规则写在 profit.css（三个测算页都加载它），
   这里只覆盖 .pf-sku-row 这一类窄格子。
   全局 input[type="number"]（app.css）是 text-align:right + padding-right:30px，
   那 30px 是留给右侧「上下三角」视觉指示的占位。问题出在优先级上——
   .pf-sku-row .input（0,2,0）里的 padding:7px 8px 把右侧留位改回 8px，
   而箭头背景图仍然画在 right 3px 处，于是 71px 宽的格子里最后一位数字
   直接压在三角上（用户报的「售价/食材成本/包装成本/销量占比与箭头重叠」）。
   这里把指示图去掉（它本来只是个视觉提示，点了没有反应），
   字号降一档到 --fs-chart(14px)，「128.00」这种六位数字才装得进 55px 的内容宽。 */
.pf-sku-row input[type="number"] {
    text-align: left;
    padding-right: 8px;
    background-image: none;
    font-size: var(--fs-chart, 14px);
}

/* ---------------- 窄屏 ---------------- */
@media (max-width: 1080px) {
    .pf-kpis.pf-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .pf-kpis.pf-kpis-4 { grid-template-columns: 1fr; }

    /* 数值与注脚改上下两行：92px 的列里放不下「39.2% ¥205,880」，
       硬挤的结果就是溢出卡片。折行后行高由内容撑开，不需要写死高度。 */
    .pf-cost-row { align-items: start; }
    .pf-cost-row .pf-cost-val { white-space: normal; }
    .pf-cost-row .pf-cost-val em { display: block; margin-left: 0; }
}