/* ==========================================================================
   选址参谋 · 移动端测算族补充样式（m-tools.css）
   --------------------------------------------------------------------------
   挂在 /profit、/tools/rent、/tools/menu 三个页面上。
   全部作用域 body.m-app —— PC 端不会命中任何元素。

   mobile.css 的 3.2 / 3.4 两节已经把这族页面的排版重排过一遍
   （表单竖排、KPI 两列、明细表横滚、风险项单列）。本文件只补三件它没覆盖的事：

     1. /tools/rent 与 /tools/menu 没有常驻结论条 —— 输入改了看不到反馈；
     2. 表单控件字号还是 13~14px —— iOS 聚焦会放大整页；
     3. 结果区被跳到页顶时会被顶栏盖住 56px。
   ========================================================================== */

/* ==========================================================================
   1. 常驻结论条
   --------------------------------------------------------------------------
   底栏骨架复用 m-app.css 的 .m-dock（fixed + 抬到 tabbar 之上 + 让位逻辑），
   这里只补这一族特有的两条：数值的语气色、窄屏下第二条的截断。
   ========================================================================== */
body.m-app .mt-dock {
    padding: 8px var(--m-pad);
    gap: 8px;
}
body.m-app .mt-dock .m-dock-main {
    gap: 12px;
    overflow: hidden;
}
body.m-app .mt-dock .m-dock-i {
    flex: 0 1 auto;
    max-width: 50%;
}
body.m-app .mt-dock .m-dock-k {
    font-size: 10.5px;
    letter-spacing: .01em;
}
body.m-app .mt-dock .m-dock-v {
    font-size: 15px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 语气色跟着结果区走：mobile.css 里 .pf-kpi.is-ok/.is-warn/.is-bad 用的也是
   品牌 / 警告 / 危险三色，这里保持一致，避免同一页出现两套颜色语义 */
body.m-app .mt-dock .m-dock-v.is-ok { color: var(--brand); }
body.m-app .mt-dock .m-dock-v.is-warn { color: var(--warn); }
body.m-app .mt-dock .m-dock-v.is-bad { color: var(--danger); }
body.m-app .mt-dock .mt-dock-go {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 12px;
    font-size: var(--m-fs-sm);
}

/* ==========================================================================
   2. 表单控件
   --------------------------------------------------------------------------
   iOS Safari 对 16px 以下的输入框会在聚焦时自动放大整页，
   而这一族表单里全是数字框，用户每次点进去页面都会跳一下。
   ========================================================================== */
body.m-app .pf-side .input,
body.m-app .pf-side .select,
body.m-app .pf-form .input,
body.m-app .pf-form .select {
    min-height: 44px;
    font-size: 16px;
}
/* 数字框在 44px 高下不需要额外上下内边距，交给 flex 居中 */
body.m-app .pf-side .pf-qrow label,
body.m-app .pf-form .pf-qrow label {
    font-size: var(--m-fs-xs);
    color: var(--text-2);
}
/* 「单价与月租填一个」这类跟随提示，在输入框下方要留出呼吸 */
body.m-app .pf-side .tip { font-size: var(--m-fs-xs); line-height: 1.6; }

/* 加行 / 删除行这类小按钮（毛利页 SKU 编辑器）：热区补到 44 */
body.m-app .pf-sku-add { min-height: var(--m-hit); }

/* ==========================================================================
   3. 锚点与间距
   ========================================================================== */

/* 「看明细」把结果区滚到顶部时，顶部有 52px 的固定顶栏，
   不给 scroll-margin 就会被盖住第一行 KPI。 */
body.m-app .pf-kpis { scroll-margin-top: 62px; }

/* 首屏标题区收紧：pf-hero 桌面是 60px 上下留白，手机上那一屏要用来放
   「开始输入」的第一个框，标题占太高会让用户以为这页只有介绍。 */
body.m-app .pf-hero { padding: 16px 0 12px; }
body.m-app .pf-hero h1 { margin-bottom: 8px; }
body.m-app .pf-lede { margin-bottom: 10px; }

/* ==========================================================================
   4. 明细表横滚
   --------------------------------------------------------------------------
   横滚必须同时声明 overflow-y: hidden。只写 x 时，计算值会把 y 提升成 auto，
   iOS 上竖向起手的手势会被这个容器吃掉 —— 表现是「表格区域滑不动整页」。
   ========================================================================== */
body.m-app .pf-tablewrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
/* 公式卡同理：等宽长公式在 390px 下必然溢出 */
body.m-app .pf-formula {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   5. 成本构成行（.pf-cost-row）改两行
   --------------------------------------------------------------------------
   profit.css:175 是 grid-template-columns: 96px 1fr 108px，
   第三列写死 108px，而 .pf-cost-val 带 white-space:nowrap。
   数值栏里的文案是「2 个 · 毛利贡献 55.4%」这种长短不一的句子，
   一旦超过 108px 就直接顶出去 —— 实测在 820px 下右侧溢出 57px，
   整页能左右拖动。

   手机上的正确形态不是把三样东西塞一行，而是：
     第 1 行  名称（左）  …  数值（右，允许换行）
     第 2 行  进度条整行
   这样再长的数值文案也只是把第一行撑高，不会把页面撑宽。
   ========================================================================== */
body.m-app .pf-cost-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 5px;
}
body.m-app .pf-cost-row .pf-cost-name {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}
body.m-app .pf-cost-row .pf-cost-val {
    grid-column: 2;
    grid-row: 1;
    white-space: normal;          /* 允许换行：nowrap 是溢出的直接成因 */
    text-align: right;
    max-width: 62vw;              /* 极端长文案时给条上限，防止把名称列挤没 */
}
body.m-app .pf-cost-row .pf-cost-track {
    grid-column: 1 / -1;
    grid-row: 2;
}

/* ==========================================================================
   v2.3.0 · 菜品行（.pf-sku-row）重排
   --------------------------------------------------------------------------
   老问题（390px 实测）：
     行栅格是「2 列 + 40px 删除列 = 3 列」，名称占前两列，剩下 4 个数字框
     自动流进 3 列里 —— 第 3 个框（包装成本）被塞进那 40px 宽的删除列，
     标签被截成「包装…」，数字直接压在浏览器自带的上下箭头上，根本没法读。
     第 4 个框（销量占比）又掉到第 3 行第 1 列，右边空一大片。
   为什么不能只改 mobile.css 里那段：它把删除按钮当成网格里的第 3 列，
     只要数字框是 4 个，就一定会有一个掉进那一列。
   这里的做法是把删除按钮抽成绝对定位（不再占列），网格只保留 2 列，
     4 个数字框自然排成 2×2，永远不会再挤进删除列。
   顺带把数字输入框改成左对齐并去掉上下箭头：iOS 虽然不显示箭头，
     但安卓 Chrome 会显示，右对齐的数字和箭头只隔 2px，必然叠在一起。
   ========================================================================== */
body.m-app .pf-sku-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
}
body.m-app .pf-sku-row .pf-sku-name {
    grid-column: 1 / -1;
    grid-row: auto;
    /* 给右上角的删除按钮让位，否则长菜品名会钻到「×」底下 */
    padding-right: 46px;
}
body.m-app .pf-sku-row .pf-sku-f:not(.pf-sku-name) {
    grid-column: auto;
    grid-row: auto;
}
body.m-app .pf-sku-row .pf-sku-del {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-size: 17px;
    line-height: 1;
}
/* 数字框：左对齐 + 去箭头 + 预留右侧内边距（安卓仍可能画出箭头）
   注意必须显式 background-image:none —— app.css 里那个「上下三角」是画在
   input 上的背景图，appearance:textfield 只去掉原生 spinner，去不掉这张图。 */
body.m-app .pf-sku-row input[type="number"] {
    text-align: left;
    padding-right: 10px;
    background-image: none;
    -moz-appearance: textfield;
    appearance: textfield;
}
body.m-app .pf-sku-row input[type="number"]::-webkit-outer-spin-button,
body.m-app .pf-sku-row input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
body.m-app .pf-sku-row .pf-sku-f i {
    display: block;
    margin-bottom: 4px;
    text-align: left;
    font-size: var(--m-fs-xs);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.m-app .pf-sku-row .input { height: 42px; font-size: 16px; }

/* ==========================================================================
   v2.3.0 · 结果表在手机上改成卡片
   --------------------------------------------------------------------------
   「菜单单品毛利明细」11 列 / 719px、「定价建议」6 列 / 480px，
   而手机内容区只有 364px —— 只能横向拖着看。横滚的实际后果不是「不方便」，
   是「看到数字时表头已经滚走了」，等于白给。
   这里在 body.m-app 作用域内把 table 拆成卡片：每个 td 用 ::before 把
   data-label 画成行内小标签，一列不落、也不用滑。
   PC 端没有 .m-card 这个类（由 menu-tool.js 按设备加），完全不受影响。
   ========================================================================== */
body.m-app .pf-table.m-card {
    display: block;
    width: 100%;
    min-width: 0;
    border-collapse: separate;
    border: 0;
    font-size: var(--m-fs-sm);
}
body.m-app .pf-table.m-card thead { display: none; }
body.m-app .pf-table.m-card tbody { display: block; }
body.m-app .pf-table.m-card tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line-soft);
    border-radius: var(--m-r-sm);
    background: var(--panel-2);
}
body.m-app .pf-table.m-card td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 0;
    border: 0;
    min-width: 0;
    text-align: left;
}
body.m-app .pf-table.m-card td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--muted);
    font-variant-numeric: normal;
}
body.m-app .pf-table.m-card td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
body.m-app .pf-table.m-card td.pf-item-name {
    grid-column: 1 / -1;
    padding-bottom: 6px;
    margin-bottom: 2px;
    border-bottom: 1px dashed var(--line-soft);
    font-size: var(--m-fs);
    font-weight: 600;
    color: var(--text);
}
body.m-app .pf-table.m-card td.pf-item-name::before { display: none; }
/* 菜品名那一格里的类型标签单独占一行，别和名字挤在一起 */
body.m-app .pf-table.m-card td[data-label="类型"] {
    grid-column: 1 / -1;
    justify-content: flex-start;
}
/* 表格外层原来是为了横滚才存在的，改卡片后不再需要 */
body.m-app .pf-tablewrap:has(.pf-table.m-card) { overflow: visible; }