.form-control,
.form-select {
  min-height: var(--density-control-height-md);
  height: var(--density-control-height-md);
  border-radius: var(--radius-control);
  font-size: var(--font-toolbar);
  line-height: 1.4;
  background-color: var(--tblr-bg-forms);
  border-color: var(--tblr-border-color);
  color: var(--color-text-primary);
  transition: var(--transition-hover-fast);
}

.form-select {
  padding: 6px 36px 6px 12px;
}

.form-control {
  padding: 6px 12px;
}

.form-control.form-control-lg,
.form-select.form-select-lg {
  min-height: var(--density-control-height-lg);
  height: var(--density-control-height-lg);
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

textarea.form-control {
  min-height: 0;
  height: auto;
}

.form-control::placeholder {
  color: var(--color-text-muted);
}

.form-select option {
  background-color: var(--tblr-bg-forms);
  color: var(--color-text-primary);
}

.form-select--dark,
.form-control--dark {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%239ca3af' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
}

.form-control--dark {
  background-image: none;
  padding-right: 12px;
}

.form-select--dark:focus,
.form-control--dark:focus {
  border-color: var(--color-success);
  box-shadow: var(--shadow-focus-success-sm);
}

/* 全站：默认 form-control / form-select 焦点绿色（.form-control--dark / .form-select--dark 等保持更高优先级不变） */
.form-control:focus,
.form-select:focus {
  background-color: var(--tblr-bg-forms);
  border-color: var(--color-success);
  box-shadow: var(--shadow-focus-success);
  color: var(--color-text-primary);
}

.form-check-input {
  border-color: var(--color-border-muted);
  background-color: var(--color-surface-default);
  transition:
    background-color var(--transition-hover-fast),
    border-color var(--transition-hover-fast),
    box-shadow var(--transition-hover-fast);
}

.form-check-input[type="checkbox"] {
  width: 14px;
  height: 14px;
  min-width: 14px;
  border-radius: var(--radius-sm);
}

.form-check-input:hover {
  border-color: var(--color-border-interactive);
  background-color: var(--color-surface-hover);
}

.form-check-input:focus,
.form-check-input[type="checkbox"]:focus {
  border-color: var(--color-border-interactive);
  box-shadow: var(--shadow-focus-success-sm);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:checked {
  --tblr-form-check-bg: var(--tblr-success, var(--color-success));
  background-color: var(--tblr-success, var(--color-success));
  background-image: var(--tblr-form-check-bg-image);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border-color: var(--tblr-success, var(--color-success));
}

.form-check-label {
  color: var(--color-text-primary);
}

.form-check:has(.checkbox-platform) {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 0;
  white-space: nowrap;
}

.form-check:has(.checkbox-platform) .form-check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-check:has(.checkbox-platform) .form-check-label code {
  flex: 0 0 auto;
}

.checkbox-platform,
.form-check-input.checkbox-platform {
  width: 14px;
  height: 14px;
  min-width: 14px;
  flex: 0 0 14px;
  margin: 0;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-xs, 4px);
  background-color: var(--color-surface-default);
  cursor: pointer;
  transition:
    background-color var(--transition-hover-fast),
    border-color var(--transition-hover-fast),
    box-shadow var(--transition-hover-fast);
}

.checkbox-platform:hover,
.form-check-input.checkbox-platform:hover {
  border-color: var(--color-border-interactive);
  background-color: var(--color-surface-hover);
}

.checkbox-platform:focus,
.form-check-input.checkbox-platform:focus {
  border-color: var(--color-border-interactive);
  box-shadow: var(--shadow-focus-success-sm);
}

.checkbox-platform:checked,
.form-check-input.checkbox-platform:checked {
  --tblr-form-check-bg: var(--tblr-success, var(--color-success));
  background-color: var(--tblr-success, var(--color-success));
  border-color: var(--tblr-success, var(--color-success));
  background-image: var(--tblr-form-check-bg-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
}

.checkbox-platform:disabled,
.form-check-input.checkbox-platform:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

/* 图表工具栏等：sm + dark 与 Tabler sm 一致 32px（单用 .form-select--dark 仍为 38px） */
.form-select.form-select-sm.form-select--dark {
  min-height: var(--density-control-height-sm);
  height: var(--density-control-height-sm);
  padding: 5px 32px 5px 10px;
  font-size: var(--font-caption);
  line-height: 1.35;
  background-position: right 10px center;
}

/* 卡片筛选区：input/select 统一为 38px，避免新闻页等筛选条出现 select 比 input 更矮 */
.filter-shell .filter-field .form-control:not(textarea),
.filter-shell .filter-field .form-select {
  min-height: var(--density-control-height-md);
  height: var(--density-control-height-md);
  line-height: 1.4;
}

.filter-shell .filter-field .form-control:not(textarea) {
  padding: 6px 12px;
}

.filter-shell .filter-field .form-select {
  padding: 6px 36px 6px 12px;
  background-position: right 12px center;
}

.filter-bar .admin-crud-form-control,
.filter-bar .admin-crud-form-select {
  min-height: var(--density-control-height-md);
  height: var(--density-control-height-md);
}

.app-admin-scroll-y {
  max-height: 280px;
  overflow-y: auto;
}

/* --------------------------------------------------------------------------
 * Canonical form implementation
 *
 * Governance:
 * - 38px is the canonical medium form height.
 * - .form-ui / .form-select-ui are additive migration classes.
 * - Existing .form-control / .form-select / .form-select--dark remain supported.
 * - Adapter-only heights such as 36px must stay scoped to their adapter modules.
 * -------------------------------------------------------------------------- */

:root {
  --app-form-height-sm: var(--density-control-height-sm);
  --app-form-height-md: var(--density-control-height-md);
  --app-form-height-lg: var(--density-control-height-lg);
  --app-form-radius: var(--radius-md, 8px);
  --app-form-font-size: var(--font-toolbar);
  --app-form-font-size-sm: var(--font-caption);
  --app-form-bg: var(--tblr-bg-forms, var(--color-surface-default));
  --app-form-border: var(--tblr-border-color, var(--color-border-default));
  --app-form-color: var(--tblr-body-color, var(--color-text-primary));
  --app-form-muted: var(--tblr-muted, var(--color-text-muted));
  --app-form-focus: var(--tblr-success, var(--color-success));
  --app-form-focus-ring: var(--color-border-success);
  --app-form-placeholder: var(--color-text-muted);
  --app-form-transition: var(--transition-hover-fast);
}

.form-ui,
.form-select-ui {
  width: 100%;
  min-height: var(--app-form-height-md);
  height: var(--app-form-height-md);
  border: 1px solid var(--app-form-border);
  border-radius: var(--app-form-radius);
  background-color: var(--app-form-bg);
  color: var(--app-form-color);
  font-size: var(--app-form-font-size);
  line-height: 1.4;
  transition: var(--app-form-transition);
}

.form-ui {
  padding: 6px 12px;
}

.form-select-ui {
  padding: 6px 36px 6px 12px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%239ca3af' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
}

textarea.form-ui {
  min-height: calc(var(--app-form-height-md) * 2);
  height: auto;
}

.form-ui::placeholder {
  color: var(--app-form-placeholder);
}

.form-select-ui option {
  background-color: var(--app-form-bg);
  color: var(--app-form-color);
}

.form-ui:hover,
.form-select-ui:hover {
  border-color: var(--color-border-success-strong);
}

.form-ui:focus,
.form-select-ui:focus {
  outline: 0;
  background-color: var(--app-form-bg);
  border-color: var(--app-form-focus);
  box-shadow: var(--shadow-focus-success);
  color: var(--app-form-color);
}

.form-ui:disabled,
.form-select-ui:disabled,
.form-ui[readonly] {
  opacity: 0.72;
  cursor: not-allowed;
}

.form-ui-sm,
.form-select-ui.form-ui-sm {
  min-height: var(--app-form-height-sm);
  height: var(--app-form-height-sm);
  font-size: var(--app-form-font-size-sm);
  line-height: 1.35;
}

.form-ui-sm {
  padding: 5px 10px;
}

.form-select-ui.form-ui-sm {
  padding: 5px 32px 5px 10px;
  background-position: right 10px center;
}

.form-ui-lg,
.form-select-ui.form-ui-lg {
  min-height: var(--app-form-height-lg);
  height: var(--app-form-height-lg);
}

.form-ui-lg {
  padding: 0.75rem 1rem;
}

.form-select-ui.form-ui-lg {
  padding: 0.75rem 2.5rem 0.75rem 1rem;
}

/* Compatibility: let existing filter-control wrappers size new canonical
 * controls without altering the legacy filter-control layout contract.
 */
.filter-control > .form-ui,
.filter-control > .form-select-ui,
.filter-control > .toolbar-search {
  width: 100%;
  box-sizing: border-box;
}