/* 详情页「只读模式」按档口那一版排 —— 值是**白纸黑字**，不是灰框
 * （吴凡 2026-10-12 并排发了档口的「查看销售详情」和「编辑销售单」两张图：
 *  「希望详情页的编辑模式和只读模式按档口的详情页面样式来」）。
 *
 * ════════════════════════════════════════════════════════════
 * ★★★ 先说清楚：这一条**推翻了 09-12 定的**，不是我忘了。
 *
 *   09-12 下午他指着**哈他**的采购订单详情说「两站所有的商品档案、
 *   详情页，都改成这个样式」—— 哈他的只读值是**带框的**（灰底 + 细框 +
 *   直角），于是 `ui-tokens.css` 里写了
 *   `#content-main .ui-readonly-form .readonly { border; background:#fafafa }`。
 *   （那段注释还特意记了：上午他说「把很多框去掉」，我撤了框，
 *     下午又加回来 —— 看着矛盾，其实他一直要的是「和哈他一样」。）
 *
 *   10-12 他指的是**档口**，而档口的只读详情是**没有框**的：
 *   灰色标签 + 深色值，一行四组，干净。
 *
 *   ⚠️ 所以这不是「哪种好看」的问题，是**参照物换了**。
 *      下一个人再看到这两段注释，别再翻回去 ——
 *      要翻得先问他现在以哪一版为准。
 * ════════════════════════════════════════════════════════════
 *
 * ★ 为什么单开一个文件而不是写进 theme.css：
 *   `theme.css` 在 `ui-tokens.css` **前面**加载，同特异性压不过它。
 *   这一层排在 ui-tokens 后面、界面设置层前面 ——
 *   界面设置改的是变量，还得让它最后说话。
 *
 * ★ 为什么不直接改 `ui-tokens.css`：那个文件是
 *   `scripts/deploy_ui_tokens.sh` 从**哈他**那边生成的副本，
 *   改了下次同步就被盖掉（而且它是两站共用的规范层，
 *   按 CLAUDE.md 第一条，规范归机检窗口定）。
 */

/* ① 值：去框、去底色。特异性跟 ui-tokens 那条**一样**(1,2,0)，
      靠加载顺序在后面赢 —— 不是靠堆 !important。 */
#content-main .ui-readonly-form .readonly {
    border: 0 !important;
    background: transparent !important;
    padding: 7px 0 !important;
    min-height: 32px !important;
}

/* ② 标签灰、值深 —— 档口就是这个对比。
      只读态下标签只是「这是什么」，值才是人要看的东西。 */
.ui-readonly-form .field-line > div:first-child label {
    /* ★ 用 ui-tokens 里**真有**的那个变量：`--c-text-2`(#6b7280)。
          第一版我引了一个根本不存在的变量名，于是一直走
          `var(x, 兜底)` 的兜底色 —— **变量名打错不报错，
          只会悄悄用兜底值**，而兜底值碰巧也是灰的，看不出来。
          用例 `test_引的变量在token表里真的存在` 现在盯着这件事。 */
    color: var(--c-text-2) !important;
    font-weight: 400 !important;
}
#content-main .ui-readonly-form .readonly {
    color: var(--c-text) !important;
}

/* ③ 没值的时候显示的那个「-」也跟着淡下去 —— 它不是内容。
      ★ 不能把整格藏掉：空着和「这一格坏了」长得一样（这条栽过）。 */
#content-main .ui-readonly-form .readonly:has(> .jg-dash),
#content-main .ui-readonly-form .readonly > .jg-dash {
    color: var(--c-text-3) !important;
}

/* ④ 行与行之间留一点气口。去掉框之后，不留气口就糊成一片。 */
.ui-readonly-form .field-line { padding-top: 2px; padding-bottom: 2px; }

/* ⑤ 只读态里**剩下的输入框**也长成白纸黑字。
 *
 * 来历：吴凡 2026-10-12 截图，采购单只读页上「金额」那一列是三个
 * 带框的输入框。真因在 `apps/org/edit_lock.py`（表单自己声明的字段
 * 遍历不到，已经改成锁定时 `disabled`），这里只管它长什么样。
 *
 * ★ 只挑 `:disabled` —— 锁定态下它们**全都是** disabled 的。
 *   不加这个限定会把编辑态的框也抹平，那就彻底没法用了。
 */
.ui-readonly-form input:disabled,
.ui-readonly-form select:disabled,
.ui-readonly-form textarea:disabled {
    border: 0 !important;
    background: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    color: var(--c-text) !important;
    -webkit-text-fill-color: var(--c-text);   /* Safari 会把禁用框的字调灰 */
    opacity: 1 !important;
}

/* ⑥ 只读态不显示字段旁边那个「?」。
 *
 * 吴凡：「我方结算主体 ? 这样占了两行，可以去掉问号」。
 * 标签栏固定 6.5rem(104px)，「我方结算主体」六个字加上问号正好挤不下，
 * 问号被挤到第二行，那一格就从 36px 变成 38px 还歪着。
 *
 * ★ 跟着档口走：它的「查看销售详情」一个问号都没有，
 *   「编辑销售单」才有（完成时间那格）。**说明是给填的人看的**，
 *   看单子的人不需要「这一格该怎么填」。
 * ★ 只在只读态藏，编辑态照旧 —— 说明本身没删，还在 aria-label 里。
 */
.ui-readonly-form .jg-tip { display: none !important; }