.erp-form, .erp-ds-form { display: grid; gap: var(--erp-space-4); }
/* Wave 14 (filter card layout) 2026-05-15 — erp-form-grid 從 1-col 改 responsive
   原狀：repeat(1, 1fr) 強制單欄；3 個 filter 直排桌機看起來空蕩（user 截圖反饋）
   修法：explicit responsive breakpoints — mobile 1 / tablet 2 / desktop 3 col
   不用 auto-fit 因 el-form-item 有 intrinsic width 干擾 collapse 邏輯 */
.erp-form-grid { display: grid; grid-template-columns: 1fr; gap: var(--erp-space-3); }
@media (min-width: 768px) { .erp-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .erp-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.erp-form-field { display: grid; gap: var(--erp-space-2); }
.erp-label, .form-label { color: var(--erp-text-secondary); font-size: 12px; font-weight: 800; }
/* CCR-4a (2026-05-20) — removed 3 `!important` (border / background / color).
   Original 06-forms 用 !important 蓋 Bootstrap form-control base，副作用是
   Bootstrap `.form-control.is-invalid` (0,2,0) 紅框驗證樣式被 (0,1,0+!important)
   壓掉；連帶誘發各 page-local 加 !important 軍備。Verified via
   `grep -rnE '\.form-control[^,{]*(background|border|color)' wwwroot/css/` —
   no other CSS file overrides .form-control bg/border/color，移除 !important
   後 Bootstrap state 變體（.is-invalid / .is-valid / focus / disabled）即可
   正常以 specificity 勝出。See DECISION-20260519-css-cascade-remediation §2 row CCR-4
   (ADR purged 2026-05-29 mass purge; live SoT = ../CLAUDE.md §6 CCR program + tools/qa/css-drift-check.cjs). */
.erp-input, .erp-select, .erp-textarea, .form-control, .form-select, input[type='text'], input[type='search'], input[type='email'], input[type='password'], input[type='date'], input[type='number'], select, textarea { width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid var(--erp-border); border-radius: var(--erp-radius-sm); background: var(--erp-ds-bg-panel-muted); color: var(--erp-text-secondary); }
textarea.erp-textarea, textarea.form-control, textarea { min-height: 96px; resize: vertical; }
.erp-input:focus, .erp-select:focus, .erp-textarea:focus, .form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus { border-color: var(--erp-gold-primary); box-shadow: var(--erp-focus-ring); outline: none; }
.erp-input::placeholder, .form-control::placeholder, textarea::placeholder { color: var(--erp-text-dim); }
.erp-input:disabled, .form-control:disabled, .form-select:disabled, input:disabled, select:disabled, textarea:disabled { background: rgba(var(--erp-rgb-muted),.08); color: var(--erp-text-muted); cursor: not-allowed; }
/* Element Plus control parity. The vendor defaults and the transitional
   site.css rules previously produced a white date range, white tags, and
   cool-navy select shells beside the warm Bootstrap controls. Keep the
   resting state neutral; gold is reserved for focus/current interaction. */
.erp-page .el-select .el-select__wrapper,
.erp-page .el-input .el-input__wrapper,
.erp-page .el-date-editor.el-input__wrapper {
  background: var(--erp-ds-bg-panel-muted);
  border: thin solid var(--erp-border);
  box-shadow: none;
  color: var(--erp-text-secondary);
}
.erp-page .el-select .el-select__wrapper.is-focused,
.erp-page .el-input .el-input__wrapper.is-focus,
.erp-page .el-date-editor.el-input__wrapper.is-active,
.erp-page .el-date-editor.el-input__wrapper:focus-within {
  border-color: var(--erp-gold-primary);
  box-shadow: var(--erp-focus-ring);
}
.erp-page .el-input__inner,
.erp-page .el-range-input,
.erp-page .el-range-separator,
.erp-page .el-select__selected-item {
  background: transparent;
  color: var(--erp-text-secondary);
}
.erp-page .el-input__inner::placeholder,
.erp-page .el-range-input::placeholder,
.erp-page .el-select input::placeholder,
.erp-page .el-select__placeholder,
.erp-page .el-select__placeholder.is-transparent {
  color: var(--erp-text-dim);
}
.erp-page .el-input__icon,
.erp-page .el-select__caret,
.erp-page .el-select .el-icon,
.erp-page .el-select__suffix .el-icon,
.erp-page .el-range__icon,
.erp-page .el-range__close-icon {
  color: var(--erp-text-muted);
}
.erp-page .el-select .el-tag {
  background: var(--erp-surface);
  border-color: var(--erp-border);
  color: var(--erp-text-secondary);
}
.erp-page .el-select .el-tag .el-tag__close {
  color: var(--erp-text-muted);
}
.erp-page .el-select .el-tag .el-tag__close:hover,
.erp-page .el-select .el-tag .el-tag__close:focus-visible {
  background: var(--erp-ds-gold-soft);
  color: var(--erp-gold-light);
}
.erp-page .el-select .el-select__wrapper.is-disabled,
.erp-page .el-input.is-disabled .el-input__wrapper,
.erp-page .el-date-editor.is-disabled {
  background: rgba(var(--erp-rgb-muted),.08);
  border-color: var(--erp-border);
  color: var(--erp-text-muted);
}
/* Teleported Element Plus poppers sit outside .erp-page, so their complete
   mode-aware visual contract must be owned here rather than by page ancestry. */
.el-popper.is-light.erp-dark-popper,
.erp-dark-popper {
  background: var(--erp-surface) !important;
  border: thin solid var(--erp-border) !important;
  box-shadow: var(--erp-shadow-card) !important;
  color: var(--erp-text-secondary) !important;
}
.erp-dark-popper .el-picker-panel,
.erp-dark-popper .el-date-range-picker__content,
.erp-dark-popper .el-picker-panel__body,
.erp-dark-popper .el-select-dropdown__list,
.erp-dark-popper .el-picker-panel__footer,
.erp-dark-popper .el-picker-panel__sidebar,
.erp-dark-popper .el-date-range-picker__header,
.erp-dark-popper .el-picker-panel__content {
  background: var(--erp-surface) !important;
  border-color: var(--erp-border) !important;
  color: var(--erp-text-secondary) !important;
}
.erp-dark-popper .el-select-dropdown__item,
.erp-dark-popper .el-date-picker__header-label,
.erp-dark-popper .el-picker-panel__icon-btn,
.erp-dark-popper .el-date-table th,
.erp-dark-popper .el-date-table td .el-date-table-cell__text,
.erp-dark-popper .el-month-table td .cell,
.erp-dark-popper .el-year-table td .cell {
  color: var(--erp-text-secondary) !important;
}
.erp-dark-popper .el-picker-panel__shortcut {
  color: var(--erp-text-muted) !important;
}
.erp-dark-popper .el-select-dropdown__item.hover,
.erp-dark-popper .el-select-dropdown__item:hover,
.erp-dark-popper .el-picker-panel__shortcut:hover,
.erp-dark-popper .el-date-table td.available:hover,
.erp-dark-popper .el-month-table td .cell:hover,
.erp-dark-popper .el-year-table td .cell:hover,
.erp-dark-popper .el-date-table td.in-range .el-date-table-cell,
.erp-dark-popper .el-date-table td.in-range div,
.erp-dark-popper .el-date-table td.in-range {
  background: var(--erp-ds-gold-soft) !important;
}
.erp-dark-popper .el-select-dropdown__item.selected,
.erp-dark-popper .el-date-table td.current:not(.disabled) .el-date-table-cell__text,
.erp-dark-popper .el-date-table td.start-date .el-date-table-cell__text,
.erp-dark-popper .el-date-table td.end-date .el-date-table-cell__text {
  background: var(--erp-gold-primary) !important;
  color: var(--erp-black) !important;
  border-radius: var(--erp-radius-pill);
}
.erp-dark-popper .el-date-table td.start-date .el-date-table-cell,
.erp-dark-popper .el-date-table td.end-date .el-date-table-cell {
  background: transparent !important;
}
.erp-dark-popper .el-date-table td.disabled .el-date-table-cell__text,
.erp-dark-popper .el-date-table td.next-month .el-date-table-cell__text,
.erp-dark-popper .el-date-table td.prev-month .el-date-table-cell__text {
  color: var(--erp-text-dim) !important;
}
.erp-dark-popper .el-date-table td.today .el-date-table-cell__text {
  color: var(--erp-gold-primary) !important;
  font-weight: 700;
}
.erp-field-help, .erp-field-error { font-size: 12px; }
.erp-field-help { color: var(--erp-text-muted); }
.erp-field-error, .text-danger { color: var(--erp-ds-danger-text) !important; }
.erp-check, .form-check { display: flex; align-items: center; gap: var(--erp-space-2); color: var(--erp-text-secondary); }
.erp-check input, .form-check-input { width: 18px; height: 18px; accent-color: var(--erp-gold-primary); }
.input-group { display: flex; align-items: stretch; }
.input-group > .erp-input, .input-group > .form-control { border-radius: var(--erp-radius-sm) 0 0 var(--erp-radius-sm); }
.input-group > .erp-button, .input-group > button { border-radius: 0 var(--erp-radius-sm) var(--erp-radius-sm) 0; }
/* Wave 14 — erp-form-grid responsive breakpoint 重新統一（原 L24 強制 2 col 蓋過 L8 的 3 col） */
@media (min-width: 768px) and (max-width: 1199px) { .erp-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* P5 Mobile: iOS Safari 對 font-size<16px 的 input 會自動 zoom — 強制 16px on mobile */
@media (max-width: 767px) {
  .erp-input, .erp-select, .erp-textarea, .form-control, .form-select,
  input[type='text'], input[type='search'], input[type='email'], input[type='password'],
  input[type='date'], input[type='number'], select, textarea {
    font-size: 16px !important;
    min-height: 48px;
  }
}