/* Manage 页样式 —— 配色沿用 pmConsole（D:\NodeJS_Projects\pmConsole）那套
   Ant Design 5 的默认 token，两个后台看起来是一家的。

   刻意**不**照抄 antd 组件的默认尺寸：那边行高 54px、输入框 32px，
   放到「50 行 × 8 列 + 22 个字段核对」的运维表上，一屏就看不了几行。
   所以这里只借配色、边框、圆角、阴影，密度仍按原 IntaWeb 的紧凑档位。 */

:root {
  /* antd 5 语义色 */
  --primary: #1677ff;
  --primary-hover: #4096ff;
  --primary-bg: #e6f4ff;
  --success: #52c41a;
  --warning: #faad14;
  --error: #ff4d4f;

  /* antd 5 文字层级与边框 */
  --text: rgba(0, 0, 0, 0.88);
  --text-2: rgba(0, 0, 0, 0.45);
  --border: #d9d9d9;
  --split: #f0f0f0;
  --bg: #f0f2f5;
  --card: #ffffff;
  --head-bg: #fafafa;

  --radius: 6px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02);
  --shadow-pop: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
}

/* ---------------------------------------------------------------- 菜单 */
.menubar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 46px;
  padding: 0 20px;
  background: var(--card);
  border-bottom: 1px solid var(--split);
  position: sticky;
  top: 0;
  z-index: 100;
}

.menubar .brand {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-right: 20px;
  letter-spacing: .2px;
}

/* 右上角用户区：头像 + 用户名，鼠标停留展开 Change Password / Sign out。
   展开方式与主菜单一致（纯 CSS hover / focus-within，无 JS）；
   字号与颜色跟主菜单的 .menu-title 一致（都继承 body 的 13px + --text）。 */
.userbox {
  position: relative;
  margin-left: auto;
}

.user-trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 8px 0 6px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  font: inherit;
  color: var(--text);
  /* 与主菜单的 .menu-title 一致：停留即展开，不靠点击，光标不必显示成手形 */
  cursor: default;
  transition: background .15s;
}

.user-trigger:hover { background: rgba(0, 0, 0, 0.04); }

.user-trigger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* 头像：浅蓝圆底 + 人像线稿，跟主色走 */
.avatar {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary);
}

.user-name { line-height: 1; }

.user-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--split);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow-pop);
  z-index: 110;
}

/* 与主菜单一致：鼠标停留就展开；键盘 Tab 进来也能看到（focus-within） */
.userbox:hover .user-menu,
.userbox:focus-within .user-menu { display: block; }

/* 触发器与下拉之间那 4px 视觉间隙同样是个坑，用透明伪元素盖住，
   否则鼠标穿过时菜单先收起（与 .menu > li > ul::before 完全一致） */
.user-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 6px;
}

.user-menu a,
.user-menu .linklike {
  display: block;
  padding: 6px 12px;
  border-radius: 4px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
}

.user-menu a:hover,
.user-menu .linklike:hover { background: rgba(0, 0, 0, 0.04); }

.user-menu .sep { border-top: 1px solid var(--split); margin: 4px 0; }

.menu, .menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu > li {
  position: relative;
  display: inline-block;
}

.menu-title {
  display: block;
  padding: 6px 12px;
  border-radius: var(--radius);
  color: var(--text);
  cursor: default;
  transition: background .15s;
}

.menu > li:hover > .menu-title {
  background: rgba(0, 0, 0, 0.04);
}

/* 当前所在分区：下拉没展开时也能看出位置（配色与子项的 .active 一致）。
   不带这个的话，只有在悬停展开后才看得出自己在哪个菜单里。 */
.menu > li > .menu-title.active {
  color: var(--primary);
  background: var(--primary-bg);
}

.menu > li > ul {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 190px;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--split);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow-pop);
}

/* 标题与下拉之间那 4px 视觉间隙是个坑：鼠标向下移动穿过它时 li:hover 会
   瞬间失效，下拉先收起来，点击就落在下面的内容上（表现为「点菜单没反应」，
   子项越靠下越容易碰上）。用一层透明伪元素把缝隙盖住，外观不变、悬停不断。 */
.menu > li > ul::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 6px;
}

.menu > li:hover > ul { display: block; }

.menu ul li a,
.menu ul li .todo {
  display: block;
  padding: 6px 12px;
  border-radius: 4px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
}

.menu ul li a:hover { background: rgba(0, 0, 0, 0.04); }
.menu ul li a.active { color: var(--primary); background: var(--primary-bg); }
.menu ul li .todo { color: var(--text-2); opacity: .6; cursor: not-allowed; }
.menu ul li.sep { border-top: 1px solid var(--split); margin: 4px 0; }

.linklike {
  background: none;
  border: 0;
  padding: 6px 12px;
  border-radius: 4px;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.linklike:hover { background: rgba(0, 0, 0, 0.04); }

/* -------------------------------------------------------------- 消息条 */
/* antd Alert：浅色底 + 左侧色条 */
.messages {
  list-style: none;
  margin: 0;
  padding: 0;
}

.messages .msg {
  padding: 8px 16px;
  border-bottom: 1px solid var(--split);
  border-left: 3px solid transparent;
}

.messages .success { background: #f6ffed; border-left-color: var(--success); color: rgba(0, 0, 0, 0.85); }
.messages .warning { background: #fffbe6; border-left-color: var(--warning); color: rgba(0, 0, 0, 0.85); }
.messages .error   { background: #fff2f0; border-left-color: var(--error); color: rgba(0, 0, 0, 0.85); }

/* ---------------------------------------------------------------- 页面 */
main { padding: 16px 20px 40px; }

.page-head {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

h1 {
  font-size: 17px;
  margin: 0;
  font-weight: 600;
  color: var(--text);
}

/* 只有一张居中卡片的页面（Upload）：标题收窄到卡片宽度并居中，
   否则 h1 贴整页最左边，和下面的卡片对不上。
   560px 必须和 .upload 的 max-width 一致。 */
.page-head.centered {
  max-width: 560px;
  margin: 0 auto 12px;
  justify-content: center;
}

/* 筛选条：多数页面单独占一行；Invoices List 把它塞进 .page-head，
   跟在标题右边（源码 dfm 里标题、单选、下拉、红字提示本来就排在同一行） */
.filters {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* 跟着标题时得给固定 flex-basis：默认 auto 会让换行判定用整条的 max-content
   宽度（用户下拉里那条最长的公司名会把它撑到 800 以上），稍窄就掉到下一行。
   320px 是「窄屏才换行」的阈值。 */
.page-head .filters {
  flex: 1 1 320px;
  min-width: 0;
}

.filters .inline { display: inline-flex; align-items: center; gap: 6px; }
.filters .radios { display: inline-flex; gap: 14px; }
.filters .radios label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

/* 原版提示语是红色，antd 的 error 色更接近 pmConsole */
.hint, .save-hint {
  color: var(--error);
  font-size: 11px;
}

/* ---------------------------------------------------------------- 表格 */
.table-wrap {
  background: var(--card);
  border: 1px solid var(--split);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow-card);
  overflow: auto;
  scrollbar-width: thin;
}

.table-wrap::-webkit-scrollbar { height: 10px; }
.table-wrap::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 6px;
}
.table-wrap::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.3); }

table.grid {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

table.grid th,
table.grid td {
  padding: 5px 9px;
  border-bottom: 1px solid var(--split);
  text-align: left;
}

/* 原单号是固定格式的长串，是唯一允许省略的列（其余列都是短值，宁可横向滚） */
table.grid td.ref {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

table.grid thead th {
  background: var(--head-bg);
  color: var(--text);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}

table.grid tbody tr:hover { background: var(--head-bg); }
table.grid tbody tr:last-child td { border-bottom: 0; }

a.tracking {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

a.tracking:hover { color: var(--primary-hover); text-decoration: underline; }

/* 行内操作列（Confirm / Undo / Delete / Modify）统一靠右 */
td.confirm-cell { text-align: right; }

/* 发票号是可下载的链接，风格与 TrackingId 一致 */
a.invoice {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

a.invoice:hover { color: var(--primary-hover); text-decoration: underline; }

/* View No Master Adj.：客户名一列可点，整列居中（源码 RenderCell 的 AColumn=4
   是 taCenter），未选客户时格子里是 "Select user"。 */
table.grid th.pick,
table.grid td.pick-cell { text-align: center; }

a.pick { color: var(--primary); text-decoration: none; }
a.pick:hover { color: var(--primary-hover); text-decoration: underline; }

/* View Unprinted Adj.：Action / Release 两列是行内按钮，居中放更好点；
   td 里的 form 是块级元素，不加 margin 会让行高变得比其它行高。 */
table.grid th.act,
table.grid td.act-cell { text-align: center; }

table.grid td.act-cell form { margin: 0; }

/* Invoice Company 的 Header / Footer 两列是多行文案（源码 RenderCell 用
   <br /> 拼接），table.grid 的全局 nowrap 得在这里放开，否则四行会挤成一行 */
table.grid td.lines {
  white-space: normal;
  min-width: 200px;
}

/* 表头排序：整格可点，当前排序列高亮（升降箭头由模板输出）。
   不在排序状态的列也挂一个淡色双向箭头 —— 否则它与右边不能点的列长得一模一样，
   看不出哪列能点。悬停时箭头跟着文字一起变蓝。 */
table.grid thead th a.sort {
  display: block;
  color: inherit;
  text-decoration: none;
}

table.grid thead th a.sort:not(.active)::after {
  content: "\21C5";
  margin-left: 4px;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.25);
}

table.grid thead th a.sort:hover,
table.grid thead th a.sort.active { color: var(--primary); }

table.grid thead th a.sort:hover::after { color: var(--primary); }

/* 计数与金额列右对齐，数值上下对得齐 */
table.grid th.num,
table.grid td.num-cell { text-align: right; }

/* antd 的小号默认按钮 */
.mini {
  padding: 1px 9px;
  height: 22px;
  font-size: 12px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card);
  cursor: pointer;
  transition: all .15s;
}

.mini:hover { color: var(--primary); border-color: var(--primary); }

/* 撤销不可逆，给它一点警示色 */
.mini.danger { color: var(--error); }

.mini.danger:hover {
  color: #fff;
  background: var(--error);
  border-color: var(--error);
}

/* 跳转型操作（Modify）也用按钮外观：<a> 默认是 inline，
   上面那份 padding/height 对行内元素不生效，得先变成行内 flex */
a.mini {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* 还没做的页面：占位链接（点上去不至于 404） */
.pending {
  color: var(--text-2);
  text-decoration: underline dotted;
  cursor: not-allowed;
}

/* Action 列（Invoices List）：表头与按钮同轴居中。
   td 里的 Undo 包在 form 里，form 默认是块级撑满整格，
   光靠 text-align 只能挪动表单内部的内容，得先把 form 收成内容宽。 */
table.grid th.action,
table.grid td.action-cell { text-align: center; }

table.grid td.action-cell form {
  display: inline-flex;
  justify-content: center;
}

.notfound {
  color: var(--text-2);
  font-size: 13px;
  text-align: center;
  margin: 48px 0;
}

/* View No Master Adj.：iwlMsgNotFound 是红字（clWebRED） */
.notfound.red { color: var(--error); }

/* ---------------------------------------------------------------- 分页 */
.pager {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 12px;
}

.pager a, .pager .disabled {
  padding: 2px 10px;
  height: 26px;
  line-height: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  background: var(--card);
  transition: all .15s;
}

.pager a:hover { color: var(--primary); border-color: var(--primary); }
.pager .disabled { color: rgba(0, 0, 0, 0.25); cursor: default; }
.page-info { color: var(--text-2); }

/* ---------------------------------------------------------------- 弹窗 */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.modal {
  background: var(--card);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  width: min(1020px, 96vw);
  max-height: 94vh;
  overflow: auto;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--split);
  font-weight: 600;
  font-size: 14px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.modal-close {
  color: var(--text-2);
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
}

.modal-close:hover { color: var(--text); }

.modal form { padding: 14px 16px 16px; }

/* 字段少、全是单列的弹窗：System → Additional Charges（三个字段）与
   Invoices → Credit（四个）。默认 1020px 是给 Credit 当初那种一行四字段的
   宽表单留的，这里收窄到单列输入框的宽度。
   --label-col 是标签列的宽度：各弹窗的标签长短不一，子类改这一个值就行。 */
.modal.narrow {
  width: min(440px, 96vw);
  --label-col: 132px;
}

/* 每行两列：标签列固定宽度且靠右，各标签长短不一，这样每行控件的左边缘才齐平。
   User Name / Notes 两行直接吃满右列（1fr），只有下拉、金额那几行按需写死宽度。 */
.modal.narrow .row > label {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}

/* text-align 是继承属性，不收回来的话输入框里的字也会变右对齐 */
.modal.narrow .row > label > input,
.modal.narrow .row > label > select {
  width: auto;
  min-width: 0;
  text-align: start;
}

.modal.narrow .row > label > input.num { text-align: right; }

/* Logistics：下拉 150px 够放 FedEx / UPS，不撑满 */
.modal.narrow .row-logistics > label {
  grid-template-columns: var(--label-col) 150px;
  flex: 0 1 auto;
}

/* Charge Amount / Credit Amount：金额框 110px，CAD 紧跟在后面 */
.modal.narrow .row-amount > label {
  grid-template-columns: var(--label-col) 110px auto;
  flex: 0 1 auto;
}

/* -------------------------------------------------- Invoices → Credit 弹窗 */
/* 四个字段比 Additional Charges 多一行，Notes 又需要宽度：弹窗加宽 1/4
   （440 → 550）；标签最长就 "User Name:"，标签列从 132 收到 90 就已富余。 */
.modal.narrow.credit {
  width: min(550px, 96vw);
  --label-col: 90px;
  --field-w: 177px;
}

/* User Name 与 Logistics 两个下拉同宽（177px）。User Name 是客户公司全称，
   但让它吃满右列（四百多像素）会空出一大片；Logistics 只有 FedEx / UPS，
   本可以更窄，但两个下拉上下摆着不一样宽更难看。
   固定宽度而不是 1fr，弹窗再变宽它们也不会跟着长。 */
.modal.narrow.credit .row-user > label,
.modal.narrow.credit .row-logistics > label {
  grid-template-columns: var(--label-col) var(--field-w);
  flex: 0 1 auto;
}

/* .unit 的 padding-bottom 是给 .row.top 的四列 grid 对基线用的，
   放进 label 里靠 align-items: center 就够了 */
.modal.narrow .row .unit { padding-bottom: 0; }

/* ------------------------------------- Shipments → View No Master Adj. 弹窗 */
/* 源码 IWModalWindow1 里只有一行「Select User:」+ 下拉，两个按钮 Save / Cancel。
   440px 的 .modal.narrow 是给 Credit 四个字段留的，这里收到 340px；
   标签列 84px 刚好放下 "Select User:"。下拉吃满右列 —— 客户名是公司全称，
   越宽越少截断。 */
.modal.pick-user {
  width: min(340px, 96vw);
  --label-col: 84px;
}

.modal.pick-user .row > label > select { width: 100%; }

/* ---------------------------------------------------- Users → Manage 弹窗 */
/* 版式照源码实际窗口（16 个字段：Basic 5 项 + Invoice 11 项，其中 4 对短字段同行）。
   宽度收到 560px —— 单列窄表单，不照 .dfm 的绝对坐标。
   --label-col 是单列/成对行第一列的标签宽（最长的是 "Credit Period Days:"），
   --pair-label-col 是成对行第二列的标签宽，取最长的 "Deposit Currency:"（实测 101.5px），
   四个短字段（State / Country / Invoice Style / Deposit Currency）的控件左缘才能对齐。 */
.modal.users {
  width: min(560px, 96vw);
  --label-col: 120px;
  --pair-label-col: 104px;
}

.modal.users fieldset.group {
  border: 1px solid var(--split);
  border-radius: var(--radius);
  padding: 10px 14px 12px;
  margin: 0 0 12px;
}

.modal.users legend {
  font-weight: 600;
  font-size: 12px;
  padding: 0 6px;
}

/* 一行一个字段；成对的短字段由 .pair 自己排两列 */
.modal.users .fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 14px;
}

/* 标签列固定宽度且右对齐，各标签长短不一，控件的左边缘才能齐平。
   text-align 是继承属性，输入框里得收回来，否则填进去的字也右对齐。 */
.modal.users .fields > label,
.modal.users .pair > label {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  min-width: 0;
  text-align: right;
}

/* 同一行的两个字段（City/State、ZipCode/Country、账期/样式、保证金/币种）：
   第一列沿用 --label-col 与上方单列对齐；第二列统一用 --pair-label-col，
   四个字段的控件左缘才对得齐（Deposit Currency 的标签最长，以它为准）。 */
.modal.users .pair {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
}

.modal.users .pair > label + label {
  grid-template-columns: var(--pair-label-col) minmax(0, 1fr);
}

.modal.users .fields > label > input,
.modal.users .fields > label > select,
.modal.users .pair > label > input,
.modal.users .pair > label > select {
  width: 100%;
  min-width: 0;
  text-align: start;
}

.modal.users .fields + .save-hint {
  margin: 8px 0 0;
  /* 缩到控件左缘（标签列 + 列间距），否则红字会从 fieldset 最左侧顶出去 */
  padding-left: calc(var(--label-col) + 8px);
}

/* --------------------------------------- Users → Discount Rules 弹窗 + 列表 */
/* 版式照 modify_discount.png：单列窄窗口、标签右对齐；条件行是「下拉 + 数字 +
   Kgs」三格，Price Table 行是 View + 深红色的上传按钮。
   宽度不照 .dfm 的 346px（那是内容区），按最长的 "CAD * Enable while > 0" 排。 */
.modal.discount {
  width: min(380px, 96vw);
  --label-col: 100px;
}

/* 参考 modify_discount.png：标题居中（.dfm 里 IWLabel 就是 Align=Center），
   关闭叉号浮在最右侧 */
.modal.discount .modal-head { position: relative; justify-content: center; }
.modal.discount .modal-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* 三个按钮（Save / Delete / Cancel）在图上同款同色、居中一排 */
.modal.discount .modal-actions { justify-content: center; }

.modal.discount .fields { display: grid; grid-template-columns: minmax(0, 1fr); }

/* 一行一个字段：标签列固定宽度、左对齐（图上所有标签左边缘齐平），
   各控件的左缘靠这一列拉齐 */
.modal.discount .fld {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  margin-bottom: 8px;
  min-width: 0;
}

.modal.discount .fld > .lbl { text-align: left; white-space: nowrap; }

.modal.discount .fld > input,
.modal.discount .fld > select { width: 100%; min-width: 0; }

/* 条件行、折扣金额行、价目表行都在右列里再排成一行 */
.modal.discount .fld > .inline,
.modal.discount .fld > .cond,
.modal.discount .fld > .zone {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

.modal.discount .cond > select { width: 62px; }
.modal.discount .cond > input,
.modal.discount .fld > .inline > input { width: 76px; }
.modal.discount .unit { padding-bottom: 0; }

/* 提示语都是红色小字（源代码里 IWLabel13 / iwlNote 就是红的） */
.modal.discount .note { color: var(--error); font-size: 11px; }

/* 「Upload Table」：源码是 IWFileUploader 的深红按钮（.dfm:773 Maroon）。
   原生 file input 会跟着系统语言印「选择文件」，所以藏起来、拿 label 当按钮，
   选中的文件名另起一行小字显示。
   Invoice Company 的「Click to upload a new logo」是同一种控件
   （ManageInvoiceCompany.dfm 的 iwfuLogo），所以不挂在 .discount 下面。 */
.modal .upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 14px;
  border-radius: var(--radius);
  background: #800000;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

.modal .upload-btn:hover { background: #6b0000; }

.modal .upload-btn input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
}

.modal.discount .file-name {
  flex: 1 1 100%;
  font-size: 11px;
  color: var(--text-2);
  word-break: break-all;
}

/* Service Type 勾选区：源码是固定高度的滚动区（.dfm:701-705，115px） */
.modal.discount .svc { margin-top: 10px; }
.modal.discount .svc > .lbl { display: block; margin-bottom: 6px; }

.modal.discount .svc-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: 132px;
  overflow-y: auto;
  padding: 4px 6px;
}

.modal.discount .svc-box label {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  cursor: pointer;
}

.modal.discount .svc-box input { height: 13px; padding: 0; margin: 0; }

/* [hidden] 的 display:none 来自 UA 样式表，会被上面的 display:grid/flex 盖掉 */
.modal.discount .fld[hidden],
.modal.discount .svc-box label[hidden] { display: none; }

/* Min. Charge 列：源码把 > 0 的那格整格标红（RenderCell :441-444） */
table.grid td.charge-red { color: var(--error); }

/* ------------------------------------------ System → Invoice Company 弹窗 */
/* 版式照 modify_invoice_company.png：标签右对齐、各控件左缘齐平；
   Company Name / Full Name / Prefix 三个短框宽度不一（图上 121 / 193 / 121，
   按 1.33 倍字号换算到这里），Header / Footer 六行等宽，
   Logo 行是「下拉 + 深红上传按钮」。 */
.modal.company {
  width: min(600px, 96vw);
  --label-col: 112px;
}

/* 标题居中、关闭叉号浮在最右侧（同 .modal.discount 的处理） */
.modal.company .modal-head { position: relative; justify-content: center; }
.modal.company .modal-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* flex: 0 1 auto 让这几行不撑满弹窗（同 .modal.narrow .row-logistics）
   Company Name / Full Name 两个文本框同宽，上下两行的控件右缘对齐 */
.modal.company .row-cname > label,
.modal.company .row-fullname > label {
  grid-template-columns: var(--label-col) 240px;
  flex: 0 1 auto;
}

/* 这一行里下拉吃满剩余宽度：label 用 flex: 1 1 auto + 第二列 1fr，
   按钮按内容定宽（flex: 0 0 auto），行内剩下的空间全给下拉。 */
.modal.company .row-logo > label {
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  flex: 1 1 auto;
  min-width: 0;
}

.modal.company .row-prefix > label {
  grid-template-columns: var(--label-col) 120px;
  flex: 0 1 auto;
}

/* Header / Footer 六行等宽：控件吃满右列（.modal.narrow 默认只给 auto） */
.modal.company .row-wide > label > input { width: 100%; }

/* 上传按钮紧跟在下拉右边：宽度只由文字撑，左右留白收到 10px，
   别把空间从下拉那里抢走（.row 是 flex-wrap: wrap，这一行也不允许折行）。 */
.modal.company .row-logo { flex-wrap: nowrap; }
.modal.company .upload-btn {
  flex: 0 0 auto;
  padding: 0 10px;
  white-space: nowrap;
}

/* ------------------------------------------- System → Charge Rules 弹窗 */
/* 版式照 modify_charge_rule.png：标签右对齐、控件左缘齐平；
   Pay Account（只读）/ Charge Type 两个长控件 160px，
   Threshold / Discount Rate 两个短框 60px 且数字右对齐，
   每行下面的红字提示缩进到控件左缘。 */
.modal.rule {
  width: min(400px, 96vw);
  --label-col: 100px;
}

/* 标题居中、关闭叉号浮在最右侧（同 .modal.discount / .modal.company） */
.modal.rule .modal-head { position: relative; justify-content: center; }
.modal.rule .modal-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* Save / Delete / Cancel 同款蓝色、居中一排（.dfm:541-544） */
.modal.rule .modal-actions { justify-content: center; }

.modal.rule .row > label {
  grid-template-columns: var(--label-col) 160px;
  flex: 0 1 auto;
}

/* Threshold [60px] CAD / Discount Rate [60px]：短框 + 单位 */
.modal.rule .row-num > label {
  grid-template-columns: var(--label-col) 60px auto;
  flex: 0 1 auto;
}

.modal.rule .save-hint {
  margin: 0 0 10px calc(var(--label-col) + 10px);
}

/* ------------------------------------------- System → Pay Accounts 弹窗 */
/* 版式照 modify_pay_account.png：只有两行，标签右对齐、两个控件同宽 121px
   （.dfm:329-357），Save / Cancel 在右下角。源码 iwrModifyAccount 只有 305px
   宽，容得下 "Account No.:" 这种标签就够。 */
.modal.account {
  width: min(360px, 96vw);
  --label-col: 84px;
}

/* 标题居中、关闭叉号浮在最右侧（同 .modal.discount / .company / .rule） */
.modal.account .modal-head { position: relative; justify-content: center; }
.modal.account .modal-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.modal.account .row > label {
  grid-template-columns: var(--label-col) 121px;
  flex: 0 1 auto;
}

/* ------------------------------------------ System → Service Types 弹窗 */
/* 版式照 modify_service_type.png：同样两行，但两个控件都比 Pay Accounts 那边宽
   —— "FedEx First Overnight" 这种名字 121px 装不下（.dfm:294-322 源码也是
   161px，5 列网格里最宽的就是 Service Type）。 */
.modal.service {
  width: min(410px, 96vw);
  --label-col: 100px;
}

/* 标题居中、关闭叉号浮在最右侧（同 .modal.account） */
.modal.service .modal-head { position: relative; justify-content: center; }
.modal.service .modal-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.modal.service .row > label {
  grid-template-columns: var(--label-col) 220px;
  flex: 0 1 auto;
}

/* -------------------------------------------- System → Charge Types 弹窗 */
/* 版式照 modify_charge_type.png：四行（比前两页多一行「Calc Fuel Surcharge:」），
   三个输入控件仍同宽 220px；标签列放到 150px —— 源码 .dfm:406-417 那个
   "Calc Fuel Surcharge:" 是 System 各页里最长的标签。 */
.modal.charge {
  width: min(448px, 96vw);
  --label-col: 150px;
}

/* 标题居中、关闭叉号浮在最右侧（同 .modal.account / .service） */
.modal.charge .modal-head { position: relative; justify-content: center; }
.modal.charge .modal-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.modal.charge .row > label {
  grid-template-columns: var(--label-col) 220px;
  flex: 0 1 auto;
}

/* 单选那一行不能用 <label> 包两个 radio（一个 label 只能对一个控件），
   改成同样的两列：标签列右对齐，右列里两个选项横向隔开一段（源码
   iwrbYes Left=176 / iwrbNo Left=248，.dfm:419-449）。 */
.modal.charge .row-fuel {
  display: grid;
  grid-template-columns: var(--label-col) auto;
  column-gap: 10px;
  align-items: center;
}

.modal.charge .row-fuel > .row-label { text-align: right; }

.modal.charge .fuel-options {
  display: flex;
  gap: 36px;
}

.modal.charge .fuel-options > label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.row label {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 顶部一行：TrackingID / User Name / Ref. Name / Orig Ref.
   固定四列，Input 吃满剩余宽度 —— 否则 934px 视口下 Orig Ref. 会掉到第二行 */
.row.top {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 2px;
}

.row.top > label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.row.top > label > input,
.row.top > label > select {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

/* 计费行：Pay a/c / Srv Type / Srv Pkg / Weight / 单位 */
.row.billing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.3fr) 96px auto;
  align-items: end;
  gap: 10px 14px;
}

.row.billing > label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.row.billing > label > input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.w-md { min-width: 0; }
.w-md input, .w-md select { width: 190px; }
.w-sm input { width: 130px; }
.w-xs { min-width: 0; }
.w-xs input { width: 110px; }

input, select {
  font: inherit;
  height: 28px;
  padding: 0 8px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

input:focus, select:focus {
  border-color: var(--primary-hover);
  box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
}

/* 只读字段：antd 「禁用」观感（#f5f5f5），与白底的两个下拉区分开 */
input[readonly] {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text);
}

input.num { text-align: right; }
.unit { color: var(--text-2); padding-bottom: 6px; }

.save-hint { margin: 0 0 12px 0; }

.parties {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.parties fieldset {
  border: 1px solid var(--split);
  border-radius: var(--radius);
  padding: 10px 14px 12px;
  margin: 0;
  flex: 1 1 0;
}

.parties legend {
  font-weight: 600;
  font-size: 12px;
  padding: 0 6px;
  color: var(--text);
}

.parties label {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.parties label input { flex: 1 1 auto; }

.split { display: flex; gap: 10px; }
.split label { flex: 1 1 0; }

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid var(--split);
  margin-top: 6px;
  padding-top: 12px;
}

/* 底部一排按钮统一成 .btn / .primary 的 28px。.btn-cancel 是改密页与上传页
   的 32px 规格，原样混进来会比 Save 高出一头（Credit 弹窗的 Delete）。 */
.modal-actions .btn-cancel {
  height: 28px;
  padding: 0 14px;
  font-size: 13px;
}

.btn, .primary {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
}

.btn:hover { color: var(--primary); border-color: var(--primary); }

.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

.btn.disabled {
  color: rgba(0, 0, 0, 0.25);
  border-color: var(--border);
  cursor: default;
}

.btn.disabled:hover { color: rgba(0, 0, 0, 0.25); border-color: var(--border); }

/* ---------------------------------------------------------------- 登录 */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
}

.login-box {
  background: var(--card);
  padding: 28px 32px 32px;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid var(--split);
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-card);
}

.login-box h1 {
  font-size: 19px;
  margin: 0 0 6px;
  text-align: center;
  color: var(--text);
}

.login-box label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
}

.login-box input { height: 32px; }

.login-box button {
  margin-top: 4px;
  height: 32px;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font: inherit;
  cursor: pointer;
  transition: background .15s;
}

.login-box button:hover { background: var(--primary-hover); }

.login-error { color: var(--error); font-size: 12px; margin: 0; }

/* -------------------------------------------------------------- 等待遮罩 */
/* 点链接 / 提交表单后、新页面回来之前的那段空窗，MySQL 查询期间给个可见的「在忙」。
   盖住整个视口（含菜单栏），半透明白底让用户还能看到自己刚点了哪里。 */
.loading-mask {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 0.66 太透，底下的表格文字会透上来；加重并轻度模糊，只留轮廓不抢注意力 */
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(2px);
  /* 鼠标要拦住，防止等待中又点一下 */
  cursor: progress;
}

/* .loading-mask 的 display:flex 会盖掉 hidden 属性的默认样式，必须显式收 */
.loading-mask[hidden] { display: none; }

/* 白卡片把转圈和文字从满屏底色里“托”起来，靠阴影而不是靠透明度分图层 */
.loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 168px;
  padding: 24px 32px;
  background: var(--card);
  border: 1px solid var(--split);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 转圈在上、文字在下：靠 .loading-box 的 column 排；下面两个 span 都显式 block，
   万一卡片样式没加载到（缓存旧 CSS）也不会变成一行并排、宽高失效 */
.spinner {
  display: block;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: 4px solid rgba(22, 119, 255, 0.22);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: loading-spin 0.8s linear infinite;
}

.loading-text {
  display: block;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text);
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------- 改密页 */
/* 改密页：标题 + 卡片作为一个整体在可视区居中。
   min-height 减掉顶栏 46px 与 main 的上下内边距（16 + 40），刚好铺满一屏、不额外画出滚动条；
   纵向用子元素 margin:auto 而不是 align-items:center —— 窗口太矮、内容高于容器时
   auto 会退化成 0，卡片仍从顶部开始、可以正常滚动，不会把上半截裁掉。 */
.pwd-page {
  display: flex;
  justify-content: center;
  min-height: calc(100vh - 102px);
}

.pwd-page .pwd {
  width: 100%;
  max-width: 380px;
  margin: auto 0;
}

/* 兜底：若改密页模板还是旧结构（`.pwd` 直接挂在 main 下、没有 .pwd-page 包裹，
   例如浏览器里还留着旧 HTML），也让它居中。用 main 的直接子选择器，与新结构
   互斥，不会两层重复居中。旧结构下标题在卡片外，也和卡片作为整体一起居中。 */
main:has(> .pwd) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 46px);
}

main:has(> .pwd) .pwd {
  width: 100%;
  max-width: 380px;
}

.pwd {
  max-width: 380px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--split);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* 首次登录提示：antd 的 warning 浅底 + 左侧色条 */
.pwd .notice {
  margin: 0 0 14px 0;
  padding: 8px 12px;
  font-size: 13px;
  color: #ad6800;
  background: #fffbe6;
  border: 1px solid #ffe58f;
  border-radius: var(--radius);
}

.pwd label {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-2);
}

/* 字段块：label 在上、输入框在下，输入框右侧留 34px 给「小眼睛」 */
.pwd .pwd-field {
  margin-bottom: 12px;
}

.pwd .pwd-field > label {
  display: block;
  margin: 0 0 4px 0;
  font-size: 13px;
  color: var(--text-2);
}

.pwd-input {
  position: relative;
}

.pwd-input input {
  display: block;
  width: 100%;
  height: 32px;
  padding-right: 34px;
}

/* 明文/密文切换：内联 SVG 眼睛，按下后换成带斜杠的那只 */
.pwd .eye {
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}

.pwd .eye:hover {
  color: var(--primary);
  background: var(--primary-bg);
}

.pwd .eye:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.pwd .eye svg {
  width: 17px;
  height: 17px;
}

.pwd .eye .i-eye-off { display: none; }
.pwd .eye[aria-pressed="true"] .i-eye { display: none; }
.pwd .eye[aria-pressed="true"] .i-eye-off { display: block; }

.pwd .field-error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--error);
}

/* Django 自带的密码规则说明一串 <li>，压成小字 */
.pwd .field-help {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-2);
}

.pwd .field-help ul {
  margin: 0;
  padding-left: 16px;
}

.pwd button[type="submit"] {
  height: 32px;
  padding: 0 16px;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font: inherit;
  cursor: pointer;
  transition: background .15s;
}

/* 次级按钮（Cancel / No / OK）：白底细边框，与主按钮同高。
   改密页与上传页共用，所以不带前缀，免得两页各写一遍。 */
.btn-cancel {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  text-decoration: none;
  transition: color .15s, border-color .15s;
}

.btn-cancel:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.btn-cancel:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* -------------------------------------------------------------- Upload xls */
/* 上传页：比改密页宽一点的卡片，水平居中、顶部对齐（结果页内容多，不垂直居中） */
.upload {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 24px 18px;
  background: var(--card);
  border: 1px solid var(--split);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.upload .upload-field { margin-bottom: 16px; }

.upload .upload-field > label {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  color: var(--text);
}

.upload .upload-field select {
  width: 100%;
  height: 32px;
}

/* 文件框不走全局的 28px 高——那会把原生的「选择文件」按钮裁掉一半 */
.upload input[type="file"] {
  width: 100%;
  height: auto;
  padding: 6px 8px;
  font-size: 12px;
}

.upload-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 18px;
}

/* 结果页只有一个 OK：space-between 会把唯一的子项顶到最左，加 .end 收到右边
   （确认页的 Yes / No 要分列两端，不能动） */
.upload-actions.end { justify-content: flex-end; }

.upload button[type="submit"] {
  height: 32px;
  padding: 0 16px;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font: inherit;
  cursor: pointer;
  transition: background .15s;
}

.upload button[type="submit"]:hover { background: var(--primary-hover); }

/* 错误：antd error 浅底；格式错误的 detail 是带换行的，要保留 */
.upload-error {
  margin: 0 0 14px;
  padding: 8px 12px;
  font-size: 13px;
  color: #a8071a;
  background: #fff2f0;
  border: 1px solid #ffccc7;
  border-radius: var(--radius);
  white-space: pre-line;
}

.upload-summary {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 6px 12px;
  margin: 0 0 16px;
  font-size: 13px;
}

.upload-summary dt { color: var(--text-2); }
.upload-summary dd { margin: 0; color: var(--text); }

/* 追踪号 / GUID 一类的等宽内容（结果页的存档名、重复票清单都用它） */
.mono {
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
}

.upload-question {
  margin: 18px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.upload-done {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--success);
}

.upload-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 0 18px;
}

.upload-stats > div {
  padding: 8px 10px;
  background: var(--head-bg);
  border: 1px solid var(--split);
  border-radius: var(--radius);
}

.upload-stats dt { font-size: 12px; color: var(--text-2); }
.upload-stats dd {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.upload-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-2);
}

.upload-warnings {
  margin: 0 0 12px;
  padding: 8px 12px 8px 26px;
  font-size: 12px;
  color: #ad6800;
  background: #fffbe6;
  border: 1px solid #ffe58f;
  border-radius: var(--radius);
}

.upload-warnings li { margin: 2px 0; }

/* ---------------------------------------------------------------- Create Invoice */
/* 顶部那一整排：Logistics / User / Total 与 Refresh All DCT / Date / Create Invoice
   分属两个 form（前者 GET 重取清单，后者 POST 开票），外面套一层 flex 拼成一行，
   再整条挂进 .page-head 跟标题同排（与 Invoices List 的 .filters 一个做法）。
   上下间距由 .page-head 负责。 */
.create-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* 跟着标题时得给固定 flex-basis：默认 auto 会让换行判定用两个 form 的
   max-content 宽度（六个控件合计九百多），稍窄就把整条甩到下一行。
   640px 是「窄屏才换行」的阈值，与 .page-head .filters 的 320px 同一个道理。
   真放不下时仍会退化成两行，不会横着溢出。 */
.page-head .create-bar {
  flex: 1 1 640px;
  min-width: 0;
}

.create-bar form {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.create-bar .inline { display: inline-flex; align-items: center; gap: 6px; }

/* User 下拉：空（没候选客户）和有内容必须长得一样。
   宽度写死而不是交给内容：由内容定宽时，公司名是四五十个字符的全称，
   会把整条筛选栏撑到一千二以上；而且换成短名或空的时候宽度一跳，
   「Total: N shipments」跟着移，很显眼。
   超长的名字在框里被截断，展开下拉仍是完整的（源码里也是这么个
   宽度有限的 combobox）；当前选中的那位待开票数旁边就有 Total: N，
   截不到也没丢信息。 */
.create-bar select[name="user_id"] { width: 253px; }

.create-total { font-size: 12px; color: var(--text-2); }

/* ``.dfm:30`` 的 IWLabel1「List of waiting to print」 */
.create-listlabel {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--text);
}

.pwd button[type="submit"]:hover { background: var(--primary-hover); }

/* 底部按钮一行：主按钮（Update password）靠左、Cancel 靠右（space-between）。
   强制改密时只剩一个按钮，space-between 不影响它仍靠左。 */
.pwd-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ---------------------------------------------------------------- Statistics */
/* 标题照 IWLabel1（.dfm:40,48，12pt 粗体，clBlue）；工具栏的四个控件与两个
   按钮跟它同一行，所以沿用 .page-head > .filters 的排法。 */
.stats-title {
  color: var(--primary);
  font-size: 15px;
  font-weight: 700;
}

/* From date / To date 与 Invoices → Create 的 ``Date:`` 同宽：两边都不写
   width，宽度交给浏览器对 ``input[type=date]`` 的默认值（mm/dd/yyyy +
   日历图标）。这里不要加固定像素：Create 那个框没设宽度，一加就比它宽一截。 */

/* 源码的警示都是 ShowMessage 弹窗，这里落到页面里：红色一行。 */
.stats-error,
.stats-notice {
  margin: 0 0 12px;
  color: var(--error);
  font-size: 12px;
}

.stats-pivot { margin-bottom: 14px; }

/* iwgAllInvoices 的 Caption（ShowSummary :286-287）贴左上，不居中 */
table.grid.pivot caption {
  caption-side: top;
  text-align: left;
  padding: 6px 9px;
  font-weight: 600;
  border-bottom: 1px solid var(--split);
}

/* 汇总表里「Total Sales / 月合计」是加粗的（源码只给 ShowSummary 的金额设了
   taRightJustify，没设字体；这里给首行与月份行一点重量，便于读数） */
table.grid.pivot tr.total td,
table.grid.pivot tr.month td { font-weight: 600; }

/* 明细表照 iwgTableRenderCell（:343-355）：行 0 蓝字、最后一行红字、
   Odd(ARow) 浅灰底（ARow 从 0 起算，所以第 1、3、5 行是灰的）、
   列 2..11 右对齐、列 12/13 居中。 */
table.grid.detail thead th { color: #0000ff; }

table.grid.detail tfoot td {
  color: #ff0000;
  font-weight: 600;
  border-top: 1px solid var(--border);
}

table.grid.detail tbody tr:nth-child(odd) td { background: #f2f2f2; }
table.grid.detail tbody tr:nth-child(odd):hover td { background: var(--head-bg); }

table.grid.detail th.mid,
table.grid.detail td.mid-cell { text-align: center; }