/* ============================================================
 * 智企办公 · 客户端专属业务样式（public/client/styles/client.css）
 * ------------------------------------------------------------
 * 位置：客户端目录 —— 商家端**不得引用**。
 * 内容：客户端**业务功能**样式 —— 采购模板（.hc-tpl-modal 弹窗加载/编辑面板）
 *       与模板抽屉（#tpl-drawer 左栏列表 / 右栏明细 / 概览条 / 底部操作区）。
 * 判据：含业务语义（模板、采购模式、概览统计），非通用版式 → 归本文件；
 *      通用版式（表格 / 卡片 / 工具条）一律归 shared/base.css 或本端 pages.css。
 * 由 client.css 按轴拆分而来（2026-10-07 阶段④）；未改一字，仅搬移位置。
 * ============================================================ */

.hc-tpl-modal .tpl-empty{margin:8px 0}
/* 加载模式二选一：整块可点的大按钮（同一套模板既能叠加采购、也能做月度固定采购） */
.hc-tpl-modal .tpl-modes{display:flex;flex-direction:column;gap:10px;margin:6px 0 12px}
.hc-tpl-modal .tpl-fd{display:flex;flex-direction:column;gap:6px;margin-bottom:6px;font-size:13px;color:var(--t3)}
.hc-tpl-modal .tpl-fd > span{font-weight:600;color:var(--t2)}
/* 编辑面板（草稿态）：搜索加行 + 行内改数量 / 移除 */
.hc-tpl-modal .tpl-search{margin:10px 0}
.hc-tpl-modal .tpl-res{max-height:240px;overflow:auto;margin-top:8px}
.hc-tpl-modal .tpl-add-row{display:flex;align-items:center;gap:10px;padding:8px 2px;border-top:1px solid var(--line5)}
.hc-tpl-modal .tpl-add-row:first-child{border-top:0}
.hc-tpl-modal .tpl-add-mid{flex:1 1 auto;min-width:0}
.hc-tpl-modal .tpl-sp-sel{width:auto;max-width:230px;height:30px;flex:0 0 auto;font-size:12px}
.hc-tpl-modal .tpl-add-pr{flex:0 0 auto;min-width:76px;font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.hc-tpl-modal .tpl-ed-n{font-size:13px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-tpl-modal .tpl-ed-m{display:flex;align-items:center;gap:8px;margin-top:3px;font-size:12px;color:var(--t5);flex-wrap:wrap}
#tpl-drawer .tpl-dr{flex:1 1 auto;min-height:0;display:flex}
/* 左栏 248px（二次对齐设计稿：232 → 248）。左栏头 42px；列表项 62px / r12 / padding 10。 */
#tpl-drawer .tpl-dr-l{flex:0 0 248px;width:248px;min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--line3);background:var(--canvas)}
#tpl-drawer .tpl-dr-lhead{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;height:42px;padding:0 14px;border-bottom:1px solid var(--line3);font-size:14px;font-weight:700;color:var(--t1)}
/* 数量徽章：26×20 胶囊、米黄底棕字（设计稿口径）。 */
#tpl-drawer .tpl-dr-lhead b{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:20px;padding:0 7px;border-radius:10px;background:var(--pri-weak);color:var(--warn-ink);font-size:12px;font-weight:600}
#tpl-drawer .tpl-dr-lscroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:4px}
#tpl-drawer .tpl-li:hover{background:var(--page)}
#tpl-drawer .tpl-li-n{font-size:14px;font-weight:500;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tpl-drawer .tpl-li-m span{overflow:hidden;text-overflow:ellipsis}
/* 左栏列表项（2026-09-19 重设计）：名称行加分类色点；项数 b 作深色强调、选中时转棕字，时间退回次要灰。
 * 色点三档色值写在这里（渲染层只出 d0/d1/d2 类名）—— 客户端 JS 不写死色，由门禁 hardcoded-color 盯。 */
#tpl-drawer .tpl-li-h{display:flex;align-items:center;gap:7px;min-width:0}
#tpl-drawer .tpl-li-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--line2)}
#tpl-drawer .tpl-li-dot.d0{background:var(--pri)}
#tpl-drawer .tpl-li-dot.d1{background:var(--dot-teal)}
#tpl-drawer .tpl-li-dot.d2{background:var(--dot-coral)}
#tpl-drawer .tpl-li-m b{color:var(--t3);font-weight:600}
#tpl-drawer .tpl-dr-r{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column}
/* 右栏头：16/22 内距、白底、**无下边框**（设计稿口径 —— 靠底色差分段，不靠线）。 */
#tpl-drawer .tpl-dr-rhead{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:16px 22px;background:var(--canvas)}
/* 左组：38×38 圆角 12 米黄底模板图标 + 名称 17px / 元信息 11px */
#tpl-drawer .tpl-dr-id{display:flex;align-items:center;gap:10px;min-width:0}
#tpl-drawer .tpl-dr-ic{flex:0 0 38px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--pri-weak);color:var(--warn-ink)}
#tpl-drawer .tpl-dr-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
#tpl-drawer .tpl-dr-tn{font-size:18px;font-weight:700;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tpl-drawer .tpl-dr-meta{font-size:12px;color:var(--t4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 编辑态：名称输入框 42px 高 / r10 / 蓝描边 + 一行说明；头部的取消·保存是 h38 的紧凑版 */
#tpl-drawer .tpl-dr-ednm{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
#tpl-drawer .tpl-dr-ednm .tpl-ed-hint{font-size:12px;color:var(--t4)}
#tpl-drawer .tpl-dr-rops{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
/* 右栏头「编辑」：74×34 蓝描边胶囊（设计稿口径），强度介于纯文字链与底部墨黑主按钮之间 */
#tpl-drawer .tpl-dr-edit{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 18px;border:1px solid var(--pri);border-radius:999px;background:var(--canvas);font-size:13px;font-weight:500;color:var(--pri);cursor:pointer}
#tpl-drawer .tpl-dr-edit:hover{background:var(--pri-weak)}
#tpl-drawer .tpl-more-t{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--line2);background:var(--sf);border-radius:999px;font-size:15px;font-weight:700;line-height:1;color:var(--t4);cursor:pointer}
#tpl-drawer .tpl-more-t:hover{border-color:var(--pri);color:var(--pri-600)}
#tpl-drawer .tpl-more-p{left:auto;right:0;min-width:148px}
#tpl-drawer .tpl-dr-rscroll{flex:1 1 auto;min-height:0;overflow:auto}
/* 底部操作区（二次对齐设计稿）：左提示文案 + 右按钮组，两端对齐；白底 + 顶部细线。
 * 按钮统一 h42 / r999 / 13.5px：主按钮墨黑填充，次按钮白底 --line2 描边。 */
#tpl-drawer .tpl-dr-rfoot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px 18px;border-top:1px solid var(--line3);background:var(--canvas)}
#tpl-drawer .tpl-rf-tip{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--t4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tpl-drawer .tpl-rf-btns{flex:0 0 auto;display:flex;align-items:center;gap:10px}
#tpl-drawer .tpl-ehead{display:flex;align-items:flex-start;gap:12px;padding:14px 22px 0}
#tpl-drawer .tpl-search{flex:1 1 auto;min-width:0}
#tpl-drawer .tpl-res{max-height:240px;overflow:auto;margin-top:8px}
#tpl-drawer .tpl-ecnt{flex:0 0 auto;font-size:13px;color:var(--t5);white-space:nowrap}
#tpl-drawer table.tpl-dtbl{width:100%;table-layout:fixed}
/* 表格容器：白底、圆角 14、裁掉首末行直角（设计稿把表格抬成一张白卡放在灰底上）。
 * 行分隔靠 tbody 行间 border-top —— 表头不再单独描边。 */
#tpl-drawer .tpl-tblzone{padding:14px 22px 0}
#tpl-drawer .tpl-tblwrap{background:var(--canvas);border-radius:14px;overflow:hidden;padding:var(--pad-card)}
/* 模板概览条（2026-09-19 全量重设计 / 二次对齐设计稿）：4 张统计卡，纯由条目实时推导、不落库。
 * 白卡浮在 --page 灰底上，**无描边**（靠底色差分层）；数字 22px Bold + tabular-nums（金额逐位对齐）；
 * 单位 11px 次要色靠 baseline 对齐跟在数字后 —— 不让「12 项」挤成一个大字串。
 * 「供货状态」卡有缺货项时转 warn 语义色，其余保持中性 —— 只有真需要人注意时才着色。 */
#tpl-drawer .tpl-ov{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 22px 0}
#tpl-drawer .tpl-ov-c{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid transparent;border-radius:14px;background:var(--canvas)}
#tpl-drawer .tpl-ov-k{font-size:12px;color:var(--t3)}
#tpl-drawer .tpl-ov-vr{display:flex;align-items:baseline;gap:4px;min-width:0}
#tpl-drawer .tpl-ov-v{font-size:22px;font-weight:700;color:var(--t1);line-height:1.1;font-variant-numeric:tabular-nums}
#tpl-drawer .tpl-ov-u{font-size:12px;color:var(--t5)}
/* 币符：13px 粗体暖色，与数字同 baseline —— 让「¥」比数字矮一档但不掉色 */
#tpl-drawer .tpl-ov-cur{font-size:14px;font-weight:700;color:var(--warn)}
#tpl-drawer .tpl-ov-dot{flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--ok)}
/* 表头 38px、--sf 底、11px Medium --t3；数据行 64px（对齐设计稿缩略图 44 + 上下留白） */
#tpl-drawer .tpl-dtbl th{height:38px;white-space:nowrap;background:var(--sf);font-size:12px;font-weight:500;color:var(--t3)}
#tpl-drawer .tpl-dtbl td{height:64px;vertical-align:middle}
#tpl-drawer .tpl-dtbl tbody tr+tr td{border-top:1px solid var(--line3)}
/* 名称列：13px 主名 + 10.5px 副信息（品牌 · 编码），副信息长时省略号截断 */
#tpl-drawer .tpl-dtbl-nm{font-size:14px;font-weight:500;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tpl-drawer .tpl-dtbl-sub{font-size:11.5px;color:var(--t4);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tpl-drawer .tpl-dtbl-oc{font-size:13px;color:var(--t4);word-break:break-all}
#tpl-drawer .tpl-dtbl-qty{text-align:center;white-space:nowrap;font-size:14px;font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums}
#tpl-drawer .tpl-dtbl-qty i{font-size:12px;font-weight:400;font-style:normal;color:var(--t5)}
/* 参考金额列（2026-09-19 新增）：数字右对齐 + tabular-nums，金额位对齐才好竖着比大小。
 * 编辑态同列改成「删除」文字链（tpl-dtbl-edop），居右 —— 两态共用同一列宽，
 * 查看态与编辑态互切时末列不跳动（该列宽由表头 th 的 108px 钉死）。 */
#tpl-drawer .tpl-dtbl-amt{text-align:right;white-space:nowrap;font-size:14px;font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums}
#tpl-drawer .tpl-dtbl-edop{text-align:right}
#tpl-drawer .tpl-dtbl-empty{padding:28px 16px;text-align:center;color:var(--t4);font-size:14px}
#tpl-drawer .tpl-dr-empty{padding:40px 20px;text-align:center;color:var(--t4);line-height:1.8;font-size:14px}
#tpl-drawer .tpl-more-p a{font-size:14px}