/* 全年供应链 UI —— 对齐哈他 ERP 全站规范（feedback_hata_erp_ui_rules）。
   主色 Tailwind green · 侧栏 160px · body 13px · KPI 中性色。 */

:root {
    --jg-green-50:  #f0fdf4;
    --jg-green-100: #dcfce7;   /* 侧栏 active 底 */
    --jg-green-200: #bbf7d0;   /* 边框 */
    --jg-green-500: #22c55e;   /* 主色 */
    --jg-green-600: #16a34a;   /* hover · 侧栏 active 字 */
    --jg-green-700: #15803d;   /* active · link */
    --jg-ink:       #262626;   /* KPI 数值中性深灰 */
}

/* ── 字号：全站 13px（哈他对齐 Foodmax，Unfold 默认 14 偏大）── */
body { font-size: 13px; }

/* ── 侧栏宽度 ──
   不用 CSS 压宽度：Unfold 的宽度是 Alpine 内联样式（可拖拽，下限 220px），
   外层 wrapper 与 #nav-sidebar 共用同一个值。CSS 只压得住内层压不住外层，
   两者就会错开，中间空出一条灰带（踩过）。宽度改由 theme.js 设 localStorage。

   哈他规范是 160px，但那是 iframe workspace 结构：顶部一级 tab 分流，
   侧栏只放 4 字二级条目。这里所有模块都在侧栏、最长条目 6 字（月度成本录入），
   160px 会截断，所以取框架下限 220px —— 同样紧凑，且不与框架冲突。 */
#nav-sidebar-inner { height: 100dvh; position: sticky; top: 0; }

/* 侧栏内边距收紧，把宽度让给文字（Unfold 默认按 288px 留的 px-6） */
#nav-sidebar-inner > :nth-child(3) > * { padding-left: 12px; padding-right: 12px; }
#nav-sidebar-inner a { padding-left: 10px; padding-right: 10px; }

/* 结构 header · search · app_list · user —— 中间可滚，首尾不压缩。
   注：不覆盖 navigation.html，之前那样改 DOM 把导航整片搞塌过。 */
#nav-sidebar-inner > :first-child,
#nav-sidebar-inner > :nth-child(2),
#nav-sidebar-inner > :last-child { flex: 0 0 auto; }
#nav-sidebar-inner > :nth-child(3) {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
}
#nav-sidebar-inner > :nth-child(3)::-webkit-scrollbar { width: 6px; }
#nav-sidebar-inner > :nth-child(3)::-webkit-scrollbar-thumb {
    background: rgb(0 0 0 / .16); border-radius: 3px;
}
@media (prefers-color-scheme: dark) {
    #nav-sidebar-inner > :nth-child(3)::-webkit-scrollbar-thumb {
        background: rgb(255 255 255 / .18);
    }
}

/* 侧栏字号：一级 / 二级同为 14px */
#nav-sidebar-inner h2,
#nav-sidebar-inner a { font-size: 14px; }
#nav-sidebar-inner a { min-height: 45px; }

/* 侧栏 active：浅绿底 + 绿字 */
#nav-sidebar-inner a[aria-current="page"],
#nav-sidebar-inner a.bg-primary-50,
#nav-sidebar-inner a.text-primary-600 {
    background: var(--jg-green-100) !important;
    color: var(--jg-green-600) !important;
}

/* ── 面包屑隐藏：侧栏 + 页头 h1 已两处指位，面包屑冗余 ── */
#content > .px-4 nav[aria-label="Breadcrumbs"],
nav[aria-label="Breadcrumbs"] { display: none; }

/* ── 数字：等宽对齐 ── */
.field-unit_cost, .field-input_cost, .field-labor_cost,
.field-transferable_cost, .field-loss_rate, .field-total_cost,
td[class*="field-"] { font-variant-numeric: tabular-nums; }

/* ── input 去 spinner：全站数字手动输入 ── */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

/* ── 侧栏品牌区 ────────────────────────────────────────────
   logo 图（含「生鲜供应链卷王」小字）+ 右侧「全年供应链」加粗。

   注意 SITE_HEADER 不能置空：Unfold 的模板是
   `{% elif branding %}{% include site_icon %}{% endif %}` ——
   站点名一空，连 logo 都不渲染。 */
[class*="h-[65px]"] .text-important {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0;
    white-space: nowrap;
    /* 文字块本身 grow 占满 logo 右边的空间，居中就是在这块里居中 */
    text-align: center;
    /* 跟右侧顶栏标题同一个行高（那边是 leading-5 = 20px）——
       行高不一致，两边即使都「垂直居中」，看起来也差着几个像素 */
    line-height: 20px;
}

/* logo 高度要跟侧栏宽度配套：侧栏 220px 时 46px 的 logo 很合适，
   收到 160px（对齐哈他）之后，logo + 文字排不下，「全年供应链」
   被挤成「年供应」。缩到 28px，两者都完整。 */
[class*="h-[65px]"] img {
    height: 28px;
}

/* 文字块与 logo 等高，两者被同一个 items-center 一起居中 —— 位置必然一致。
   前几次都在调「让文字自己居中」，可文字块高度只有一行（20px）、
   logo 有 46px，两个高度不同的盒子各自居中，看着就是没对齐。
   等高才是对齐的前提。 */
[class*="h-[65px]"] .flex-col {
    min-height: 28px;
    display: flex;
    justify-content: center;   /* flex-col 时这一条管垂直 */
}

/* 品牌区容器 65px、右侧顶栏 h-16（64px），两边都靠 items-center 居中，
   本来就该对齐。之前我给文字块加了 height:100% 一类的规则去「强行居中」，
   反而把它从父容器的居中体系里拽了出来 —— 去掉，让它回到默认行为。 */
[class*="h-[65px]"] #site-name {
    justify-content: center;
}

/* ★ 收窄输入框本身还不够 —— 撑住宽度的是**外面那层包裹 div**：
   Unfold 给它挂了 min-w-56（14rem = 224px）。输入框 width:100% 只是
   填满这个 224px 的父层，量出来还是 224，看着像 CSS 没生效。 */
/* 姓名一列容易被挤到只剩两个字，给个下限 */
body.model-employee.change-list #result_list td:nth-child(2) { min-width: 72px; }

/* ── 字段说明收进「?」 ────────────────────────────────────────
   说明文字有用，但常年占两三行、把表单撑得又高又花，而人只在第一次
   填的时候需要看一眼。收进标签后面的问号里：平时干净，要看随时有。 */
.jg-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px; height: 15px;
    margin-left: 5px;
    border: 1px solid var(--color-base-300);
    border-radius: 50%;
    font-size: 10px;
    line-height: 1;
    color: var(--color-base-500);
    background: transparent;
    cursor: help;
    vertical-align: middle;
    flex: 0 0 auto;
}
.jg-tip:hover { border-color: #22c55e; color: #22c55e; }

/* 提示气泡。用 ::after 画，不额外插 DOM —— 少一层，也不会被表单收走 */
.jg-tip::after {
    content: attr(data-tip);
    position: absolute;
    z-index: 60;
    left: 0; top: 100%;
    margin-top: 6px;
    width: max-content;
    max-width: 300px;
    padding: 7px 10px;
    border-radius: 6px;
    background: var(--color-base-800);
    color: #fff;
    font-size: 12px;
    line-height: 1.6;
    text-align: left;
    white-space: normal;
    /* 默认不占位也不挡点击 —— visibility 而不是 display，
       这样有淡入，也不会因为重排让页面抖一下 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s;
}
.jg-tip:hover::after, .jg-tip:focus-visible::after {
    opacity: 1;
    visibility: visible;
}
/* 气泡是绝对定位，得有个定位参照；标签本身来当 */
.field-line label { position: relative; }

/* ── 表单控件宽度统一（全站）────────────────────────────────
   两件事：

   ① 日期框会溢出格子 11~12px，压到右边那格的标签上。撑住它的不是
      输入框自己，是外面那层包裹 div 的 min-w-56（14rem = 224px）——
      输入框 width:100% 只是填满这个 224px 的父层。之前只在加工单
      表头治过，这次全站治。

   ② 控件宽度原来跟着一行放几个字段变：一行 3 个是 200px，
      一行 2 个变 425px，一行 1 个变 672px。于是「籍贯」的输入框
      是「性别」的两倍宽，同一张表看着忽宽忽窄。
      给个统一上限，一行放几个都一样宽，只是留白不同。 */
.field-line > .grow [class*="min-w-"] { min-width: 0 !important; }
.field-line > .grow { min-width: 0; }
.field-line > .grow input:not([type="checkbox"]):not([type="radio"]),
.field-line > .grow select,
.field-line > .grow .select2-container {
    max-width: 250px;
}
/* ★ 标签列**固定宽度**，输入框才能对齐同一条竖线。

   上一版让标签「按文字宽度走」，结果标签字数不同、输入框起点就跟着飘：
   「工号」的框从 80px 起、「性别」从 52px 起、「公司邮箱」从 236px 起 ——
   一张表上量出 17 种起点（52 到 237），看着就是乱。

   168px 是量出来的：最长的标签「个人计时费率(元/人时)」连问号 162px，
   再留 6px 余量。3 列的格子 449px，168 + 250 还差 30px 富余。 */
.field-line > div:first-child:not(:only-child) {
    min-width: 168px !important;
    width: 168px !important;
    flex: 0 0 168px;
}
.field-line > div:first-child label { white-space: normal; }

/* 开关（在职、缴社保）这类布尔字段，Unfold 把标签和开关放在**同一个** div 里，
   没有单独的标签列 —— 上面那条按「第一个子 div」定宽的规则会连开关一起挤。
   :not(:only-child) 把它排除掉，再单独把它的标签撑到同样的 168px，
   开关才落在跟别的输入框同一条竖线上。 */
.field-line > div:only-child > div:first-child {
    min-width: 168px !important;
    width: 168px !important;
    flex: 0 0 168px;
}

/* 长文本例外 —— 地址、备注、原因这类，挤成 260px 就看不全了 */
.field-line > .grow input[name="address"],
.field-line > .grow input[name="remark"],
.field-line > .grow input[name="leave_reason"],
.field-line > .grow input[name="contract_entity"],
.field-line > .grow input[name="position"],
.field-line > .grow input[name="name"],
.field-line > .grow textarea {
    max-width: 460px;
}

/* ── 侧栏：选中项的底色铺满整条 ──────────────────────────────
   原来绿底只占中间一段（左右各空 24px，那是 ol 的 px-6），
   看着像贴了半张纸。把左右内边距从 ol 挪到每个 a 上：底色就能铺满，
   而文字的横向位置一点不动。

   ★ 内边距必须给**所有**导航项，不能只给选中的那个 —— 只给选中项加
   padding，点一下文字就往右跳一截（哈他那边栽过这个）。
   选中态只负责改颜色，不改盒子。 */
/* 两层内边距要一起挪：ol 的 px-6（24px）和它外面那层的 12px。
   只挪一层，底色还是差 12px 到不了边。 */
nav ol.px-6,
aside ol.px-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
nav ol.px-6 > li > a,
aside ol.px-6 > li > a {
    margin-left: -12px !important;
    margin-right: -12px !important;
    /* 侧栏 160px 时留 24px 首行缩进就够；原来 36 是按 220px 宽算的，
       窄下来之后文字会被挤到只剩几个字 */
    padding-left: 24px !important;
    padding-right: 16px !important;
    border-radius: 0 !important;
}

/* ── 已选条件标签 ────────────────────────────────────────────
   筛选框一多，选过什么全靠一个个下拉去看 —— 把生效的条件列成一排，
   点 × 去掉一条。样式跟着搜索行走，不另起一块。 */
.jg-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 2px;
}
.jg-chips-title {
    font-size: 12px;
    color: var(--color-base-500);
    margin-right: 2px;
}
.jg-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--color-base-200);
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    line-height: 20px;
    color: var(--color-base-700);
    text-decoration: none;
}
.jg-chip:hover { border-color: #22c55e; color: #16a34a; }
.jg-chip-k { color: var(--color-base-500); }
.jg-chip-v { font-weight: 600; }
.jg-chip-x { color: var(--color-base-400); font-size: 13px; }
.jg-chip:hover .jg-chip-x { color: #16a34a; }
.jg-chip-clear { border-style: dashed; color: var(--color-base-500); }
@media (prefers-color-scheme: dark) {
    .jg-chip { background: var(--color-base-900); }
}

/* ── 列表页顶部：搜索 + 筛选下拉 ────────────────────────────
   跟哈他（sslx.me）同一套布局：搜索框一行，下面是筛选下拉的网格。
   筛选块由 filter_bar.js 从右侧抽屉搬过来（见那里的说明）。 */
.jg-filter-bar {
    /* ★ 用 flex 不用 grid。
       grid 下量出来格子按 2,4,1,3,5 跳着落位、行高被撑到 222px ——
       Unfold 自己的样式里有东西在干扰网格轨道，排查成本高于收益。
       flex 换行的行为是可预测的：一格 200px，排满就换行。 */
    display: flex !important;
    /* 不写 row 的话方向会是 column（外层容器的 flex-col 传下来），
       所有筛选竖着堆成一列 —— 量出来每个都在左 249 */
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start;
    gap: 10px 14px;
    width: 100%;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
.jg-filter-bar > * { flex: 0 0 200px; min-width: 0; }
/* 抽屉的空壳和遮罩搬完就没用了 */
#changelist-filter-close { display: none !important; }

.jg-filter-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jg-filter-item > label {
    font-size: 12px;
    color: var(--color-base-500);
    font-weight: 500;
}
/* ★ 必须排除 #searchbar：搜索框外面已经有 Unfold 自带的边框壳
   （bg-white border rounded-default 那个 div），这条规则再给里面的
   input 加一圈边框和圆角，两层套在一起就成了「搜索框里还有一个
   搜索框」。搜索框的样式全部交给外面那层壳。 */
.jg-filter-select,
.jg-filter-item input:not(#searchbar) {
    width: 100%;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--color-base-200);
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    color: var(--color-base-700);
}
.jg-filter-select:focus,
.jg-filter-item input:not(#searchbar):focus {
    outline: 2px solid #22c55e;
    outline-offset: -2px;
}
.jg-daterange { display: flex; gap: 6px; }
.jg-daterange-cell { flex: 1 1 0; min-width: 0; }
@media (prefers-color-scheme: dark) {
    .jg-filter-select, .jg-filter-item input:not(#searchbar) {
        background: var(--color-base-900);
        border-color: var(--color-base-700);
    }
}
/* 「显示数量 / 清空全部筛选」跟筛选排在一起，别浮到列表右上角 */
.jg-filter-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    margin-top: 2px;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
.jg-filter-actions a, .jg-filter-actions button {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
}
/* 日期钻取搬进筛选块之后，排成一排小链接 */
.jg-date-item { flex: 0 0 auto !important; }
.jg-date-hierarchy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    min-height: 34px;
}
.jg-date-hierarchy a {
    padding: 4px 10px;
    border: 1px solid var(--color-base-200);
    border-radius: 6px;
    font-size: 13px;
    color: var(--color-base-700);
    text-decoration: none;
    white-space: nowrap;
}
.jg-date-hierarchy a:hover { border-color: #22c55e; color: #16a34a; }

/* ══════════════════════════════════════════════════════════
   跟哈他（sslx.me）对齐的骨架：160px 侧栏 + 52px 顶部条
   两个站以后可能合并，顶栏、侧栏、表格这些骨架保持一致 ——
   下面的数值都是从哈他线上量出来的，不是拍的。
   ══════════════════════════════════════════════════════════ */

/* ── 顶部条：52px 白底，tab + 右侧用户区 ───────────────────── */
.jg-top-nav {
    display: flex;
    align-items: stretch;
    height: 52px;
    /* 左 8px 跟内容区的左内边距同一个值 —— 第一个 tab 的左沿
       和下面表格卡片的左沿对齐，顶栏和内容区看着是一竖条。
       右 24px 跟哈他一致，「退出」的右外沿两边才对得齐。 */
    padding: 0 24px 0 8px;
    background: #fff;
    border-bottom: 1px solid var(--color-base-200);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    position: sticky;
    top: 0;
    z-index: 50;
}
.jg-top-nav a.tab {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 16px;
    font-size: 14px;
    color: var(--color-base-500);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color .15s;
    white-space: nowrap;
}
.jg-top-nav a.tab:hover { color: #22c55e; }
.jg-top-nav a.tab.active {
    /* 跟侧栏选中项同一套配色：#dcfce7 底 + #15803d 字 */
    color: #15803d;
    background: #dcfce7;
    border-radius: 4px;
    font-weight: 600;
}
.jg-top-nav .right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}
.jg-top-nav .user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-base-700);
    white-space: nowrap;
}
.jg-top-nav .avatar {
    width: 26px; height: 26px;
    background: #22c55e;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 26px;
    font-weight: 600;
    font-size: 12px;
}
.jg-top-nav .jg-top-link {
    color: var(--color-base-500);
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid var(--color-base-200);
    border-radius: 4px;
    white-space: nowrap;
}
.jg-top-nav .jg-top-link:hover {
    color: #16a34a;
    border-color: #22c55e;
    background: #f0fdf4;
}
@media (prefers-color-scheme: dark) {
    .jg-top-nav { background: var(--color-base-900); }
}

/* ── 列表表格：跟哈他一样紧凑 ─────────────────────────────── */
#result_list thead th {
    background: rgb(250, 250, 250);
    padding: 6px 8px !important;
}
#result_list tbody td,
#result_list tbody th { padding: 6px 8px !important; }
@media (prefers-color-scheme: dark) {
    #result_list thead th { background: var(--color-base-800); }
}

/* 侧栏 160px：菜单项与分组标题一律不换行。
   ★ 选择器必须落在 #nav-sidebar 上 —— 写 `aside a, nav a` 匹配不到，
     「供应商管理」被拆成「供应商管 / 理」两行。 */
#nav-sidebar a,
#nav-sidebar span,
#nav-sidebar h2,
#nav-sidebar h3 { white-space: nowrap; }
/* 收窄后左右内边距也要跟着收，否则文字还是顶到边 */
#nav-sidebar ul > li > a,
#nav-sidebar ol > li > a { padding-left: 12px; padding-right: 8px; }

/* ── 新建按钮（对齐哈他 .foodmax-addbtn）────────────────────
   绿底白字、90x36、圆角 6px，落在筛选卡右下角。
   .jg-addslot 是 header 里的隐藏槽，按钮被 filter_bar.js 搬走之后
   槽就空了；万一搬不走（页面没有筛选块），槽里那颗仍要能看见，
   所以这里不给槽设 display:none。 */
.jg-addslot { display: inline-flex; align-items: center; }

.jg-addbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    height: 36px;
    padding: 0 16px;
    border-radius: 6px;
    background: #22c55e;
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.jg-addbtn:hover { background: #16a34a; }

/* 筛选卡最后一行：左边「清空筛选」等，右边新建 */
.jg-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.jg-filter-actions .jg-addbtn { margin-left: auto; }

/* ── 列表行高对齐哈他（42px）────────────────────────────────
   量出来我们是 45、哈他 42。不是内边距的事（两边都是 6px/8px）——
   Unfold 直接在每个单元格上挂了字面类 h-[45px]。行里最高的一格
   内容才 36，所以 42 装得下，不会挤到任何东西。
   （查的办法：CDP 的 CSS.getMatchedStylesForNode，比对着猜快得多。） */
/* ★ 必须连 tbody th 一起 —— Django 把「可点进去的那一列」渲染成 <th>，
   只压 td 的话那一格仍然是 45，整行就跟着它 45。 */
#result_list tbody td,
#result_list tbody th { height: 42px !important; }

/* ── 剩下两处跟哈他的差值 ─────────────────────────────────── */

/* 侧栏底色：哈他 rgb(249,250,251)，我们默认是 rgb(250,250,250)。
   差一格灰阶，单看都正常，两个站并排开着就看得出来。 */
#nav-sidebar { background: rgb(249, 250, 251); }
@media (prefers-color-scheme: dark) {
    #nav-sidebar { background: var(--color-base-900); }
}

/* 搜索框：哈他 382x32，我们 320x35。
   宽度撑在外层包裹 div 上，只改 input 不动 —— 跟表单那边同一个坑。 */
#toolbar #searchbar {
    height: 32px !important;
    width: 382px !important;
    /* ★ 别写 max-width:100% —— 外层包裹是 w-80（320px），
       100% 就等于把宽度又压回 320，白设。 */
    max-width: none !important;
}
/* 包裹层跟着放开，否则输入框只是溢出，不是真的变宽 */
#toolbar div:has(> #searchbar),
#toolbar div:has(#searchbar) { width: auto !important; max-width: none !important; }

/* ── 侧栏与内容区之间的空隙 ───────────────────────────────
   Unfold 给内容区外层挂了 px-4（左右各 16px），侧栏右沿和表格左沿
   之间就空出一条。侧栏加宽到 200 之后这条更显眼 —— 收到 8px，
   两块连成一片。右侧不动，表格右边留白本来就该有。 */
.\@container.px-4 { padding-left: 8px !important; }

/* ── 右上角：通知铃铛 + 个人中心下拉 ───────────────────────
   把原来散在左上角（「我的通知」）和左下角（头像）的个人相关入口
   收到一处。侧栏留给业务菜单，个人的东西全在右上角。 */

.jg-top-nav .right { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.jg-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: var(--color-font-default);
}
.jg-bell:hover { background: var(--color-base-100); }
.jg-bell .material-symbols-outlined { font-size: 20px; }
.jg-bell-dot {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    line-height: 15px;
    text-align: center;
    font-weight: 600;
}

/* details/summary 做的下拉：不依赖 JS，键盘也能开 */
.jg-user { position: relative; }
.jg-user > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    cursor: pointer;
    list-style: none;              /* 去掉浏览器默认的小三角 */
    font-size: 13px;
}
.jg-user > summary::-webkit-details-marker { display: none; }
.jg-user > summary:hover { background: var(--color-base-100); }
.jg-user .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #22c55e;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
.jg-user-caret { font-size: 18px; opacity: .55; }
.jg-user[open] .jg-user-caret { transform: rotate(180deg); }

.jg-user-menu {
    position: absolute;
    top: 38px;
    right: 0;
    min-width: 190px;
    padding: 4px;
    border: 1px solid var(--color-base-200);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .10);
    z-index: 60;
}
.jg-user-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--color-base-200); }
.jg-user-full { font-size: 13px; font-weight: 600; }
.jg-user-mail { font-size: 11px; color: var(--color-font-subtle); margin-top: 2px; }
.jg-user-menu a {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--color-font-default);
    text-decoration: none;
}
.jg-user-menu a:hover { background: var(--color-base-100); }
/* 退出是个 <button>（POST 表单），不是链接 —— 样式要跟上面两项一致，
   否则最后一项看着像另一个东西 */
.jg-user-menu form { margin: 0; }
.jg-user-menu .jg-user-out {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    font-size: 13px;
    text-align: left;
    color: #dc2626;
    cursor: pointer;
}
.jg-user-menu .jg-user-out:hover { background: var(--color-base-100); }

@media (prefers-color-scheme: dark) {
    .jg-user-menu { background: var(--color-base-900); }
}

/* 侧栏左下角那块用户信息 —— 内容已经搬到右上角，这里收掉。
   ★ 它是侧栏 nav 的最后一个直接子元素，没有稳定的类名可用；
     按「包含用户菜单按钮」来认，比按位置认稳。 */
#nav-sidebar > div:last-child:has(button[id*="user"]),
#nav-sidebar [class*="border-t"]:has(.truncate):last-child { display: none !important; }

/* ── 个人信息页 ─────────────────────────────────────────── */
.jg-me { padding: 16px 8px; }
.jg-me-card {
    max-width: 900px;
    padding: 20px 24px 24px;
    border: 1px solid var(--color-base-200);
    border-radius: 8px;
    background: #fff;
}
.jg-me-card h2 { font-size: 14px; font-weight: 600; margin: 18px 0 2px; }
.jg-me-card h2:first-child { margin-top: 0; }
.jg-me-hint { font-size: 12px; color: var(--color-font-subtle); margin-bottom: 12px; }
.jg-me-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; }
.jg-me-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jg-me-wide { grid-column: 1 / -1; }
.jg-me-item label { font-size: 12px; color: var(--color-font-subtle); }
.jg-me-ro { font-size: 13px; padding: 7px 0; }
.jg-me-item input {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--color-base-200);
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    width: 100%;
}
.jg-me-item input:focus { outline: 2px solid #86efac; outline-offset: -1px; }
.jg-me-err { font-size: 12px; color: #dc2626; }
.jg-me-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--color-base-200);
}
.jg-me-actions .jg-addbtn { border: 0; cursor: pointer; }
.jg-me-link { font-size: 13px; color: var(--color-font-subtle); }

@media (prefers-color-scheme: dark) {
    .jg-me-card, .jg-me-item input { background: var(--color-base-900); }
}

/* ── 二级页签 ───────────────────────────────────────────── */
.jg-sub-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 40px;
    padding: 0 8px;
    background: #fff;
    border-bottom: 1px solid var(--color-base-200);
}
.jg-sub-nav .sub {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--color-font-subtle);
    text-decoration: none;
    white-space: nowrap;
}
.jg-sub-nav .sub:hover { background: var(--color-base-100); }
.jg-sub-nav .sub.active {
    background: #f0fdf4;
    color: #15803d;
    font-weight: 500;
}
@media (prefers-color-scheme: dark) {
    .jg-sub-nav { background: var(--color-base-900); }
    .jg-sub-nav .sub.active { background: rgba(34, 197, 94, .18); color: #86efac; }
}

/* ── 搜索 + 筛选 + 操作：一张卡片（照哈他 foodmax-filter-topbar）──
   关键词是筛选网格的第一格，占两列宽；其余条件每格一列。
   底部一条分隔线，左「搜索」右「新建」。 */
.jg-filter-card {
    /* ★ 卡片被塞进一个 flex 行容器里（Unfold 的 toolbar 那层是
       sm:flex-row），作为 flex 子项它只会按内容撑开 —— 筛选少的页面
       就缩成半屏宽，右边空一大块。占满整行。 */
    width: 100%;
    flex: 1 0 100%;
    /* ★ 左右各 -12px 抵掉外层容器的 padding:12px。
       不抵的话卡片是 221~1671、表格是 209~1683 —— 上下两块边不齐，
       中间那一圈空白看着像卡片缩在里面。抵完两者严丝合缝。 */
    margin: 12px -12px;
    padding: 16px 20px;
    border: 1px solid var(--color-base-200);
    border-radius: 8px;
    background: #fff;
}
/* 标签在左、控件在右，一行一条 —— 原来标签压在控件上面，
   每个条件占两行高，五六个条件就把卡片撑得很厚。
   横排之后同样的条件只占一半的高度。 */
.jg-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 20px;
}
.jg-filter-card .jg-filter-item {
    display: flex;
    flex-direction: row;      /* 左右排 */
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.jg-filter-card .jg-search-cell { grid-column: span 2; }
.jg-filter-card .jg-filter-item > label {
    flex: 0 0 auto;
    min-width: 56px;
    font-size: 13px;
    color: var(--color-font-default);
    line-height: 32px;
    white-space: nowrap;
}
/* 控件吃掉标签之外的所有宽度 */
.jg-filter-card .jg-filter-item > select,
.jg-filter-card .jg-filter-item > form,
.jg-filter-card .jg-filter-item > #toolbar { flex: 1 1 auto; min-width: 0; }
.jg-filter-card .jg-filter-item select {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--color-base-200);
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
}
/* 搜索框回到跟其他控件一样的高度和宽度 —— 它现在是网格里的一格，
   不再需要之前那条 382px 的固定宽度 */
.jg-filter-card #toolbar #searchbar { height: 30px !important; width: 100% !important; }
.jg-filter-card #toolbar > form > div { width: 100%; }

.jg-filter-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--color-base-200);
}
.jg-searchbtn {
    height: 36px;
    min-width: 90px;
    padding: 0 16px;
    border: 0;
    border-radius: 6px;
    background: #22c55e;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.jg-searchbtn:hover { background: #16a34a; }
.jg-filter-extra { display: flex; align-items: center; gap: 12px; font-size: 12px; }

@media (prefers-color-scheme: dark) {
    .jg-filter-card,
    .jg-filter-card .jg-filter-item select { background: var(--color-base-900); }
}

/* 日期区间：两个日期框 + 一个「至」，占两列（跟关键词一样宽） */
.jg-filter-card .jg-date-range { grid-column: span 2; }
.jg-filter-card .jg-date-range > .jg-range { flex: 1 1 auto; min-width: 0; }
.jg-range { display: flex; align-items: center; gap: 6px; }
.jg-range input[type="date"] {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--color-base-200);
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
}
.jg-range-sep { font-size: 12px; color: var(--color-font-subtle); }
@media (prefers-color-scheme: dark) {
    .jg-range input[type="date"] { background: var(--color-base-900); }
}

/* 搜索框里那个「/」快捷键徽标是个带边框的小方块，套在搜索框里面，
   看着像「搜索框里还有一个搜索框」。快捷键本身留着（键盘照样能用），
   只是不再画出来。 */
.jg-filter-card #toolbar kbd { display: none !important; }

/* ── 空状态：说清为什么空 ─────────────────────────────────── */
.jg-empty-scope { font-size: 13px; color: var(--color-font-subtle); }
.jg-empty-pools {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--color-base-200);
    border-radius: 8px;
    background: var(--color-base-50);
    max-width: 640px;
}
.jg-empty-pools-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.jg-empty-pools table { width: 100%; font-size: 13px; border-collapse: collapse; }
.jg-empty-pools th {
    text-align: left;
    font-weight: 500;
    color: var(--color-font-subtle);
    padding: 4px 8px;
    border-bottom: 1px solid var(--color-base-200);
}
.jg-empty-pools td { padding: 4px 8px; }
.jg-empty-pools .num { text-align: right; font-variant-numeric: tabular-nums; }
.jg-empty-pools .neg { color: #dc2626; }
.jg-empty-pools-note {
    margin-top: 10px;
    font-size: 12px;
    color: var(--color-font-subtle);
    line-height: 1.6;
}
@media (prefers-color-scheme: dark) {
    .jg-empty-pools { background: var(--color-base-900); }
}

/* ── 列表第一列是「点进去看详情」的入口，要看得出能点 ──────
   张丽博 2026-09-01 的原话是「销售单据无查看按钮，不能查看已录入单据」——
   其实点最前面的单号就能进去，但那一列渲染成和别的格子一样的黑字，
   完全看不出是个链接，所以没人会去点。
   （哈他那边也是黑字，这条不照抄它。）

   默认：加粗，和哈他的字重一致，安静但有分量。
   悬停：变绿加下划线，整行也跟着浅一层底色 —— 鼠标扫过去就知道点哪。 */
#result_list tbody th a,
#result_list tbody td a {
    font-weight: 600;
    cursor: pointer;
}
#result_list tbody th a:hover,
#result_list tbody td a:hover {
    color: #15803d;
    text-decoration: underline;
    text-underline-offset: 2px;
}
#result_list tbody tr:hover { background: #f6fdf8; }
#result_list tbody tr:hover th a { color: #15803d; }

@media (prefers-color-scheme: dark) {
    #result_list tbody tr:hover { background: rgba(34, 197, 94, .08); }
    #result_list tbody th a:hover,
    #result_list tbody td a:hover,
    #result_list tbody tr:hover th a { color: #86efac; }
}

/* 导出按钮：跟「新建」并排，但不是主操作，所以用描边不用实心 */
.jg-exportbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--color-base-200);
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    color: var(--color-font-default);
    text-decoration: none;
    white-space: nowrap;
}
.jg-exportbtn:hover { border-color: #22c55e; color: #15803d; }
/* 「导出」和「新建」一起推到最右并排 —— 使用者要求「位置都靠近最右侧
   的新建按钮」。左边只留「搜索」。 */
/* ★ 右侧按钮要**成组**：只有第一个吃掉左边的空白，后面的紧挨着排。
   原来每个 .jg-exportbtn 都是 margin-left:auto —— flex 里两个 auto
   会把剩余空间对半分，于是「导出」孤零零飘在正中间，
   「导入 / 新建」在最右边，看着像两组不相干的按钮。
   用户 2026-09-02：「导出按钮靠近导入摆放」。 */
.jg-filter-actions .jg-exportbtn { margin-left: 8px; }
.jg-filter-actions .jg-exportbtn:first-of-type { margin-left: auto; }
.jg-filter-actions .jg-exportbtn + .jg-addbtn { margin-left: 8px; }
.jg-filter-actions .jg-addbtn:first-child { margin-left: auto; }

/* 表单页的「取消」：安静的文字链，离「保存」最远 */
.jg-cancel {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
    color: var(--color-font-subtle);
    text-decoration: none;
}
.jg-cancel:hover { color: #dc2626; text-decoration: underline; }

@media (prefers-color-scheme: dark) {
    .jg-exportbtn { background: var(--color-base-900); }
}

/* 未保存行的「移除」—— 安静的小字，别做成显眼的删除按钮，
   免得跟「停用」混淆（已保存的记录只能停用，不能删） */
.jg-row-remove {
    margin-left: 8px;
    font-size: 12px;
    color: var(--color-font-subtle);
    text-decoration: none;
    white-space: nowrap;
}
.jg-row-remove:hover { color: #dc2626; text-decoration: underline; }

/* 登记付款的三个选项 */
.jg-pay-modes { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.jg-pay-modes label { display: flex; align-items: center; gap: 8px; font-weight: 400; }

/* 撤销付款这类高风险确认页 */
.jg-warn { color: #b45309; }
.jg-danger { background: #dc2626 !important; }
.jg-danger:hover { background: #b91c1c !important; }
.jg-void-list { width: 100%; font-size: 13px; border-collapse: collapse; margin-top: 8px; }
.jg-void-list th {
    text-align: left; font-weight: 500; color: var(--color-font-subtle);
    padding: 4px 8px; border-bottom: 1px solid var(--color-base-200);
}
.jg-void-list td { padding: 4px 8px; }
.jg-void-list .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── 内联表：像 Excel 一样一行就是一行 ─────────────────────
   Unfold 的表格里塞了两样东西，把每行撑成三行高：一条移动端汇总行
   （「复制 侯菊桃(W0003) ¥90.76」，它只在小屏上有意义），
   以及每行一个「复制整行」链接。加行用「添加另一个」就够了。
   标记由 inline_remove.js 打上（那两样东西都没有可用的类名）。 */
@media (min-width: 1024px) {
    tr.jg-mobile-only { display: none !important; }
}
.jg-inline-copy { display: none !important; }

/* 行高压到一行：Unfold 给每格设了 min-h-[62.5px] */
[id$="-group"] tbody tr.form-row > td,
[id$="-group"] tbody tr.form-row > th {
    min-height: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    vertical-align: middle;
}
[id$="-group"] tbody tr.form-row input:not([type="checkbox"]),
[id$="-group"] tbody tr.form-row select {
    height: 32px;
}
/* select2 自己画的那个框也要跟着收，否则行还是被它撑高 */
[id$="-group"] tbody tr.form-row .select2-selection,
[id$="-group"] tbody tr.form-row .select2-container { height: 32px !important; }
[id$="-group"] tbody tr.form-row .select2-selection__rendered {
    line-height: 30px !important;
}
/* 「移除」跟备注框并排，不另起一行 —— 它单独占一行时每行高 60px，
   并排之后就是一行的高度。 */
[id$="-group"] tbody tr.form-row .field-remark {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
/* ★ min-width 不能是 0 —— 备注是最后一列、又要和「移除」并排，
   flex 会把它压到 26px 宽，看着像个不能填的小方块
   （张丽博 2026-09-01：「单据内备注栏不能编辑」，其实是挤没了）。
   给个保底宽度，宁可这一列宽一点。 */
[id$="-group"] tbody tr.form-row .field-remark input {
    flex: 1 1 auto;
    min-width: 120px;
}
[id$="-group"] tbody tr.form-row .field-remark .jg-row-remove { flex: 0 0 auto; }

/* 「操作记录」跟「取消」并排，但它不是危险操作 —— 悬停不变红 */
.jg-history:hover { color: #15803d !important; }

/* 列表里「付款状态」后面那个付款入口 */
.jg-pay-link {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 8px;
    border: 1px solid #22c55e;
    border-radius: 4px;
    font-size: 11px;
    color: #15803d;
    text-decoration: none;
    white-space: nowrap;
}
.jg-pay-link:hover { background: #22c55e; color: #fff; }

/* ── 采购明细：供应商「带出来的 vs 认过的」 ──────────────────
   灰色斜体 = 从单头带下来、还没人确认；黑色 = 采购确认过。
   见 supplier_confirm.js 里的说明。 */
.field-supplier.jg-sup-auto .select2-selection__rendered,
.field-supplier.jg-sup-auto select {
    color: #9ca3af !important;
    font-style: italic;
}
.jg-sup-ok {
    margin-left: 4px;
    padding: 1px 6px;
    font-size: 11px;
    line-height: 16px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    color: #b45309;
    cursor: pointer;
    white-space: nowrap;
}
.jg-sup-ok:hover { background: #fffbeb; border-color: #f59e0b; }
.jg-sup-ok.is-ok {
    color: #16a34a;
    border-color: transparent;
    background: transparent;
    cursor: default;
}
/* 「供应商已确认」是脚本用的开关，不给人看 —— 摆出来只会让人以为要自己勾。
   th 和 td 都要藏，只藏一边表格会错位一列。 */
.jg-has-supconfirm .field-supplier_confirmed,
.jg-has-supconfirm th.column-supplier_confirmed { display: none !important; }
/* 这个品还能从哪几家拿 —— 只提示，不替采购挑。
   跟「确认」按钮一样挂在 unfold 的 flex 行里，跟供应商同一行，
   不另起一行（另起一行会把行高从 47px 顶到 114px）。全名在 title 里。 */
.jg-sup-hint {
    margin-left: 4px;
    font-size: 11px;
    line-height: 15px;
    color: #6b7280;
    white-space: nowrap;
    cursor: help;
}

/* ── 加工单「批次余量」列 ────────────────────────────────
   这列 unfold 只给了 68–79px，「剩 8300.00 kg」被折成三行；再叠一句
   0 成本的红字就断成 5 行、行高 59px→102px。而实测 10 个批次 9 个是
   0 成本 —— 常态不是边角，一铺整张表就散了。
   给够宽度 + 不折行，警告压成一个小标记（整句在 title 里）。 */
.field-stock_ro { min-width: 150px; }
.jg-batch-left { white-space: nowrap; }
.jg-nocost {
    margin-left: 4px;
    padding: 0 4px;
    font-size: 11px;
    line-height: 16px;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 3px;
    white-space: nowrap;
    cursor: help;
}

/* ── 可多选的筛选器（销售渠道）────────────────────────────
   Django 自带的外键筛选天生单选。这个是勾选式的，
   每一项点一下切换「加进来 / 去掉」。渠道有 20 多个，
   要看「哈他那几家加起来」时不用来回切二十次。 */
.jg-multi-filter { font-size: 13px; }
.jg-multi-title { color: var(--color-base-500); margin-bottom: 4px; }
.jg-multi-list {
    max-height: 190px;
    overflow-y: auto;
    border: 1px solid var(--color-base-200);
    border-radius: 6px;
    padding: 2px;
    background: #fff;
}
.jg-multi-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.jg-multi-item:hover { background: var(--color-base-100); }
.jg-multi-item.is-on { color: #16a34a; font-weight: 600; }
.jg-multi-box {
    width: 14px; height: 14px; flex: none;
    border: 1px solid var(--color-base-300);
    border-radius: 3px;
    font-size: 11px; line-height: 12px; text-align: center;
}
.jg-multi-item.is-on .jg-multi-box {
    border-color: #16a34a; color: #16a34a;
}

/* ── 登记付款：一张单一行，各自填各自的金额 ────────────────
   刘晓缤 2026-09-02：「三张采购单每个的付款金额是不一样的」。 */
.jg-pay-table {
    width: 100%;
    margin: 14px 0;
    border-collapse: collapse;
    font-size: 13px;
}
.jg-pay-table th,
.jg-pay-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--color-base-200);
    text-align: left;
}
.jg-pay-table th {
    color: var(--color-base-500);
    font-weight: 600;
    white-space: nowrap;
}
.jg-pay-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.jg-pay-table .sub { color: var(--color-base-500); font-size: 11px; }
.jg-pay-table .owe { color: #d97706; font-weight: 600; }
.jg-pay-input {
    width: 120px;
    padding: 4px 8px;
    text-align: right;
    border: 1px solid var(--color-base-300);
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
}
.jg-pay-input:focus { border-color: #22c55e; outline: none; }

/* 按品找资源：那一行搜索框 */
.jg-find-bar { display: flex; gap: 10px; margin: 12px 0 4px; }
.jg-find-input {
    flex: 1;
    max-width: 340px;
    padding: 7px 12px;
    font-size: 14px;
    border: 1px solid var(--color-base-300);
    border-radius: 6px;
}
.jg-find-input:focus { border-color: #22c55e; outline: none; }
.jg-find-bar .jg-addbtn { border: 0; cursor: pointer; }

/* 已付清的「付款」按钮：灰掉，但**留在原位**。
   拿掉的话人会以为「这单怎么没有付款入口」；灰着并带一句说明，
   才知道是已经付完了。刘晓缤 2026-09-02。 */
.jg-pay-done {
    color: var(--color-base-400) !important;
    border-color: var(--color-base-200) !important;
    background: var(--color-base-50) !important;
    cursor: not-allowed;
    pointer-events: auto;          /* 还要能显示 title 提示 */
}


/* ── 只读字段里的宽表格：冲掉 Unfold 的 max-w-2xl ─────────────
   Unfold 把只读字段包在 .readonly.max-w-2xl 里（42rem 上限）——
   一张五列的横向表格塞进去只能占半屏，右边空一大片。
   用户 2026-09-02：「拉满红色框的表单设计模式」。
   ★ 只对显式标了 .jg-wide 的那几块生效，不动其余只读字段：
     那个 42rem 上限对大段文字是对的（一行八十个字没法读）。 */
.readonly:has(> .jg-wide) { max-width: none !important; }
.jg-wide { width: 100%; }


/* ── 采购明细：几列填的是名字，别挤成三个字 ──────────────────
   用户 2026-09-03：「二级类目 选择后显示不全」「产地，代办人…显示不全」。
   截图里「宝山加工—1」只显示成「宝山加」、「福建罗田」成了「福建罗」——
   录的时候看不出自己选的是哪一个，那这一列就等于没用。

   ★ 给的是 min-width 不是固定宽：内容短的时候还是让浏览器自己收窄，
     整表不会因此横向撑爆。
   ★ 只在宽屏生效（≥1280）—— 小屏上本来就要横滚，
     再压其它列只会更难用。 */
@media (min-width: 1280px) {
    [id$="-group"] tbody tr.form-row .field-category input,
    [id$="-group"] tbody tr.form-row .field-origin input,
    [id$="-group"] tbody tr.form-row .field-agent input {
        min-width: 110px;
    }
    [id$="-group"] tbody tr.form-row .field-category,
    [id$="-group"] tbody tr.form-row .field-origin,
    [id$="-group"] tbody tr.form-row .field-agent { min-width: 118px; }
}