/* 表单控件 */
:root {
  color-scheme: light;
  --control-border: #d6d3d1;
  --control-focus: #0284c7;
  --control-ring: 0 0 0 3px #0284c714;
}
.field, form label, .form-grid > label { display: grid; min-width: 0; gap: 5px; color: #57534e; }
:where(input, select, textarea) {
  width: 100%;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--control-border);
  border-radius: 5px;
  background: #fff;
  color: #292524;
  font: inherit;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
:where(input, select) { min-height: 32px; }
:where(input, select, textarea):hover:not(:disabled) { border-color: #a8a29e; }
:where(input, select, textarea):focus-visible {
  border-color: var(--control-focus);
  outline: none;
  box-shadow: var(--control-ring);
}
:where(input, textarea)::placeholder { color: #a8a29e; opacity: 1; }
:where(input, select, textarea):disabled { background: #f5f5f4; color: #a8a29e; cursor: not-allowed; }
:where(input, textarea):user-invalid { border-color: #dc2626; }
input[type="checkbox"], input[type="radio"] { appearance: none; flex: 0 0 15px; width: 15px; min-height: 15px; height: 15px; padding: 0; margin: 0; border-radius: 4px; background: #fff; vertical-align: middle; cursor: pointer; }
input[type="checkbox"]:checked { border-color: #0369a1; background: #0369a1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8 3 3 6-6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
input[type="radio"] { border-radius: 50%; }
input[type="radio"]:checked { border: 4px solid #0369a1; }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .5; cursor: not-allowed; }
textarea { min-height: 100px; line-height: 1.6; resize: vertical; }
input[type="number"] { appearance: textfield; -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
.number-control { display: flex; min-width: 0; overflow: hidden; border: 1px solid var(--control-border); border-radius: 5px; background: #fff; }
.number-control:focus-within { border-color: var(--control-focus); box-shadow: var(--control-ring); }
.number-control input { min-height: 30px; padding: 4px 6px; border: 0; border-radius: 0; text-align: center; box-shadow: none !important; }
.number-control button { flex: 0 0 28px; padding: 0; border: 0; background: #fafaf9; color: #57534e; font-size: 16px; }
.number-control button:hover:not(:disabled) { background: #f0f9ff; color: #0369a1; }
.number-control button:focus-visible { outline-offset: -3px; }
.pagination-page .number-control { width: 100px; }
.pagination-page .number-control input { width: 42px; }
.pagination-page .number-control button { flex-basis: 27px; }
.file-picker { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px dashed var(--control-border); border-radius: 6px; background: #fafaf9; }
.file-picker span { min-width: 0; overflow-wrap: anywhere; }
.field-error { display: block; color: #b91c1c; font-size: 12px; font-weight: 400; white-space: normal; }
[aria-invalid="true"], .number-control:has([aria-invalid="true"]), .ts-wrapper:has(+ .field-error) .ts-control { border-color: #dc2626; }
.pagination-page:has(.field-error) { flex-wrap: wrap; }
.pagination-page .field-error { flex-basis: 100%; }
form .check { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.check-row { align-items: flex-end; }
.check-row .check { padding: 6px 9px; border: 1px solid #e7e5e4; border-radius: 4px; }
.check-row .check:has(input:checked) { border-color: #bae6fd; background: #f0f9ff; color: #075985; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; margin: 12px 0; align-items: start; }

/* 下拉菜单：保留原有表单值与键盘操作 */
.ts-wrapper { width: 100%; min-width: 0; padding: 0; font: inherit; }
.ts-control {
  min-height: 32px;
  align-items: center;
  padding: 6px 30px 6px 10px;
  border: 1px solid var(--control-border);
  border-radius: 5px;
  background: #fff;
  box-shadow: none;
  color: #292524;
  font: inherit;
  line-height: 18px;
  transition: border-color .15s, box-shadow .15s;
}
.ts-wrapper.single .ts-control { cursor: pointer; }
.ts-wrapper.single .ts-control::after { position: absolute; top: 50%; right: 12px; width: 6px; height: 6px; margin-top: -5px; border: solid #78716c; border-width: 0 1.5px 1.5px 0; content: ""; transform: rotate(45deg); }
.ts-wrapper.single.dropdown-active .ts-control::after { margin-top: -1px; transform: rotate(225deg); }
.ts-wrapper:not(.disabled) .ts-control:hover { border-color: #a8a29e; }
.ts-wrapper.focus .ts-control { border-color: var(--control-focus); outline: none; box-shadow: var(--control-ring); }
.ts-wrapper.single.dropdown-active .ts-control { border-radius: 5px; }
.ts-control > .item { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-control > input { min-height: 0; line-height: 18px; color: #292524; box-shadow: none !important; }
.ts-wrapper.disabled .ts-control { background: #f5f5f4; color: #a8a29e; cursor: not-allowed; }
.ts-dropdown { z-index: 60; margin-top: 6px; padding: 4px; border: 1px solid #e7e5e4; border-radius: 6px; background: #fff; color: #44403c; font: inherit; box-shadow: 0 8px 24px #29252414, 0 2px 6px #29252408; }
.ts-dropdown-content { max-height: min(240px, 50dvh); scrollbar-width: thin; overscroll-behavior: contain; }
.ts-dropdown .option { padding: 7px 9px; border-radius: 3px; line-height: 18px; overflow-wrap: anywhere; }
.ts-dropdown .active { background: #f5f5f4; color: #292524; }
.ts-dropdown .selected, .ts-dropdown .selected.active { background: #f0f9ff; color: #0369a1; font-weight: 600; }
.ts-dropdown .no-results { padding: 9px; color: #a8a29e; }
.pagination-size .ts-wrapper { width: 76px; }
.pagination-size .ts-control { padding-left: 9px; }
.server-picker .ts-control { background: #fafaf9; font-weight: 600; }

/* 中文日期面板 */
.flatpickr-input { padding-right: 32px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") no-repeat right 10px center; font-variant-numeric: tabular-nums; }
.flatpickr-input.active { border-color: var(--control-focus); box-shadow: var(--control-ring); }
.flatpickr-calendar { border: 1px solid #e7e5e4; border-radius: 8px; font: inherit; box-shadow: 0 10px 30px #29252418, 0 2px 6px #29252408; }
.flatpickr-calendar::before, .flatpickr-calendar::after { display: none; }
.flatpickr-months { padding: 8px 0 4px; }
.flatpickr-months .flatpickr-month { height: 34px; color: #292524; }
.flatpickr-current-month { padding-top: 2px; font-size: 14px; }
.flatpickr-current-month .cur-month { font-weight: 600; }
.flatpickr-current-month input.cur-year { min-height: 28px; padding: 3px 0 3px 6px; border: 0; border-radius: 3px; font-size: 14px; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { top: 8px; width: 32px; height: 32px; padding: 9px; border-radius: 4px; color: #57534e; }
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: #f5f5f4; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: #0369a1; }
.flatpickr-weekdays { height: 32px; }
span.flatpickr-weekday { color: #a8a29e; font-size: 12px; font-weight: 500; }
.flatpickr-day { border-radius: 5px; color: #44403c; font-size: 13px; }
.flatpickr-day:hover, .flatpickr-day:focus { border-color: #f5f5f4; background: #f5f5f4; }
.flatpickr-day.today { border-color: #7dd3fc; color: #0369a1; }
.flatpickr-day.today:hover, .flatpickr-day.today:focus { border-color: #bae6fd; background: #f0f9ff; color: #0369a1; }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus { border-color: #0369a1; background: #0369a1; color: #fff; font-weight: 600; }
.date-actions { display: flex; justify-content: space-between; padding: 7px 10px; margin-top: 6px; border-top: 1px solid #f0eeec; }
.date-actions button { padding: 4px 8px; border: 0; border-radius: 4px; background: none; color: #0369a1; font: inherit; }
.date-actions button:hover { background: #f0f9ff; }

@media (max-width: 520px) {
  .form-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  :where(input, select, textarea), .ts-control { transition: none; }
}