/* 录入件的样式（console.css 已过 600 行，录入体验这一块单独成文件）：金额框、字段级报错、必填/选填标记、
   本单汇总、可搜索下拉、确认弹窗、叠层弹窗。颜色与间距只取 console.css :root 的变量。 */

/* ---------- 金额框：右对齐、等宽数字、THB 单位贴在框内右侧 ---------- */
.amount-field { position: relative; display: inline-flex; align-items: center; width: 100%; max-width: 34em; }
.inline-form .amount-field { width: 11em; }
.amount-field input { width: 100%; text-align: right; font-variant-numeric: tabular-nums; padding-right: 3.2em; }
.amount-unit { position: absolute; right: var(--space-2); color: var(--muted); font-size: 11px; pointer-events: none; }
.form-grid .amount-field { max-width: none; }
table .amount-field { width: 9em; }

/* ---------- 字段级报错：红框 + 字段下面一行字 ---------- */
input.field-invalid, select.field-invalid, textarea.field-invalid { border-color: var(--danger) !important; box-shadow: 0 0 0 1px var(--danger); }
.field-error { display: block; color: var(--danger); font-size: 12px; line-height: 1.4; margin-top: 2px; }
.form-row > .field-error { grid-column: 2; }
@media (max-width: 700px) { .form-row > .field-error { grid-column: 1; } }
/* 行内表单（一排控件）：报错在文档流里、换到输入框下一行，宽度跟着这个字段走（contain: inline-size——字数再多也不把这一格撑宽、
   不挤动同排）；同排其余控件顶端对齐，不跟着变高的这一格上下居中。长的整句不写在这里，放表单顶部的报错条（field-errors.js routeError）。 */
.inline-form label:has(> .field-error) { flex-wrap: wrap; }
.inline-form label > .field-error { flex: 1 0 100%; contain: inline-size; }
.inline-form:has(> label > .field-error) { align-items: flex-start; }

/* 表单级报错条（field-errors.js showInlineError 有话时加 .form-alert，并挪到表单最前面）：发生了什么 + 该做什么，整句可读 */
.bill-notice.form-alert { border-color: var(--danger); background: rgba(229, 72, 77, .08); color: var(--text); line-height: 1.5; }
.bill-notice.form-alert > span { flex: 1 1 20em; min-width: 0; }
.bill-notice.form-alert > span::before { content: '! '; color: var(--danger); font-weight: 700; }

/* ---------- 必填 * / 选填：按控件自己的 required 自动标，不靠各表单手写 ---------- */
.form-row:has(> input[required], > select[required], > textarea[required], > .amount-field > input[required], > .picker > select[required]) > .form-row-label::after {
  content: ' *'; color: var(--danger);
}
.form-row:not(:has(> input[required], > select[required], > textarea[required], > .amount-field > input[required], > .picker > select[required])):has(> input:not([type=checkbox]):not([type=search]):not([disabled]):not([readonly]), > textarea:not([disabled]), > .amount-field > input:not([disabled])) > .form-row-label::after {
  content: '（选填）'; color: var(--muted); opacity: .75;
}
.field-hint { grid-column: 2; color: var(--muted); font-size: 12px; }
@media (max-width: 700px) { .field-hint { grid-column: 1; } }

/* ---------- 本单汇总（表单里放一个 .summary-slot，live-summary.js 往里画 .live-summary） ---------- */
.summary-slot { grid-column: 1 / -1; }
.summary-slot[hidden] { display: none; }
.live-summary {
  margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius);
  font-variant-numeric: tabular-nums;
}
.summary-title { color: var(--muted); font-size: 12px; margin-bottom: var(--space-1); }
.summary-row { display: flex; justify-content: space-between; gap: var(--space-4); padding: 2px 0; }
.summary-row .num { white-space: nowrap; }
.summary-total { border-top: 1px solid var(--border); margin-top: var(--space-1); padding-top: var(--space-1); font-weight: 600; font-size: 14px; }
.summary-note { margin: var(--space-2) 0 0; color: var(--muted); font-size: 12px; }
.live-summary-warn { border-color: var(--warn); }
.live-summary-error { border-color: var(--danger); }
.live-summary-error .summary-note { color: var(--danger); }

/* ---------- 可搜索下拉：搜索框叠在下拉上面 ---------- */
/* 可搜下拉：搜索框 + 下拉同在一个格子里上下排（picker.js 包的 .picker），不占表单网格的第二个格子 */
.picker { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; width: 100%; max-width: 34em; }
.picker > select, .picker > .picker-search { width: 100%; max-width: none; }
.picker-search[hidden] { display: none; }
.form-row:has(.picker-search:not([hidden])) > .form-row-label { align-self: start; padding-top: 8px; }
.form-grid .picker, .dialog-form .picker { max-width: none; }

/* ---------- 确认弹窗 ---------- */
.overlay-panel.form-dialog.form-dialog-narrow { max-width: 520px; }
.overlay-stacked { background: rgba(0, 0, 0, .45); }
.confirm-facts { margin: 0 0 var(--space-3); display: grid; gap: var(--space-1); }
.confirm-facts > div { display: flex; justify-content: space-between; gap: var(--space-4); }
.confirm-facts dt { color: var(--muted); }
.confirm-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.confirm-points { margin: 0 0 var(--space-3); padding-left: 1.2em; line-height: 1.6; }
.confirm-form .confirm-reason { grid-template-columns: 1fr; }
.confirm-form .confirm-reason .form-row-label { text-align: left; }
.confirm-form textarea { width: 100%; }

/* 弹窗底部按钮：DOM 里主按钮在前（回车提交它，见 form-dialog.js dialogActionsHtml），看起来从右往左：主按钮、次要按钮、取消 */
.dialog-actions { flex-direction: row-reverse; justify-content: flex-start; }

/* 「保存并继续新建」之类的次要按钮 */
.dialog-actions .btn-secondary { background: transparent; border: 1px solid var(--border); color: var(--text); }

/* 窄屏：行内录入表单（详情里的记一笔付款/收款）每个控件占满一行 */
@media (max-width: 520px) {
  .inline-form { flex-direction: column; align-items: stretch; }
  .inline-form > label, .inline-form > select, .inline-form > input, .inline-form > button, .inline-form .amount-field { width: 100% !important; max-width: none; }
  .inline-form label input { width: 100% !important; }
}

/* 窄屏：弹窗底部按钮主按钮占一整行放最上，其余并排，不挤成竖排小字 */
@media (max-width: 520px) {
  .dialog-actions { flex-wrap: wrap; }
  .dialog-actions .btn { flex: 1 1 auto; }
  .dialog-actions .btn-primary, .dialog-actions .btn-danger { flex: 1 1 100%; order: -1; }
}

/* ---------- 企业账号的成员企业编辑器（finance-user-memberships.js）：一行一个企业＋角色＋能看薪资＋默认进入 ---------- */
.fu-ms-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.fu-ms-row select { width: auto; flex: 1 1 9em; }