/* 统一表单控件基线（V0.15.0）
 *
 * 目的：此前 19 个筛选表单各写一套样式，24 个 filter 类族；模板里漏加
 * .field-input 的地方会直接掉回浏览器默认外观（公告页的搜索框和分类下拉就是
 * 这种情况）。这一层给 main 区域内的原生控件兜底，并统一按钮、焦点与触控尺寸。
 *
 * 特异性刻意压低：已有的 .field-input、.login-panel、.hub-editor-form 等规则
 * 仍然优先，本文件只填补空白，不推翻既有设计。
 */

/* ---------- 1. 触控尺寸与焦点可见性 ---------- */
main .btn,
main button[type="submit"],
main .link-button {
  min-height: 38px;
}

main .btn {
  gap: 6px;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease;
}

main .btn:focus-visible,
main button:focus-visible,
main a:focus-visible,
main summary:focus-visible {
  outline: 2px solid #2b8a94;
  outline-offset: 2px;
}

main input:focus-visible,
main select:focus-visible,
main textarea:focus-visible {
  outline: 2px solid transparent;
  border-color: #439e9e;
  box-shadow: 0 0 0 3px rgba(40, 114, 138, .18);
}

/* .btn-plain 与裸 .btn 此前几乎完全相同，造成“三种次要按钮”的困惑。
   统一为同一个次级外观，语义只保留 主要 / 次要 / 危险 三档。 */
main .btn-plain {
  background: #fff;
  color: #1a5261;
  border-color: var(--line);
}

main .btn-danger {
  background: #fdf1ef;
  border-color: #ecc4b4;
  color: #a33636;
}

main .btn:disabled,
main .btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  filter: none;
}

/* ---------- 2. 原生控件兜底 ---------- */
main select,
main input[type="search"],
main input[type="text"],
main input[type="date"],
main input[type="datetime-local"],
main input[type="number"],
main input[type="email"],
main textarea {
  font: inherit;
  color: #263b50;
  background: #fff;
  border: 1px solid #cdd7e2;
  border-radius: 8px;
  padding: 9px 11px;
  min-height: 40px;
  max-width: 100%;
}

main textarea {
  min-height: 84px;
  resize: vertical;
  line-height: 1.6;
}

/* 下拉箭头：不同浏览器默认箭头样式差异很大，统一自绘。 */
main select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23607086' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  cursor: pointer;
}

main select[multiple] {
  padding: 6px;
  min-height: 120px;
}

main select[multiple] option {
  padding: 6px 8px;
  border-radius: 5px;
}

main label {
  font-weight: 600;
}

/* 必填星号与错误文本 */
main .required,
main .errorlist {
  color: #be3b25;
}

main .errorlist {
  margin: 5px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  font-weight: 500;
}

main input[aria-invalid="true"],
main select[aria-invalid="true"] {
  border-color: #c36c5c;
  background: #fffbfa;
}

/* ---------- 3. 统一筛选条 ---------- */
/* 设计取舍：全站 19 个筛选表单原本各有一套容器类（.filters / .hub-filters /
   .partner-filters / .customer-filter-grid / .crm-filter-grid / .sa-filter-grid /
   .network-filter / .rail-filters …）。直接对 form[method=get] 强加 flex 布局会
   破坏其中已经是 grid 的容器，因此这里只提供一个显式的 .ui-filterbar，
   由需要改版的页面自行加上；其余页面保留原布局，仅通过上面的控件基线
   获得一致的下拉、输入框、焦点与触控尺寸。 */
.ui-filterbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 14px;
  align-items: end;
}

.ui-filterbar > .ui-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.ui-filterbar > .ui-field > label,
.ui-filterbar > label > .ui-field-label {
  font-size: 12px;
  color: #596e83;
  font-weight: 600;
}

.ui-filterbar input,
.ui-filterbar select {
  width: 100%;
}

.ui-filterbar .ui-field-wide {
  grid-column: 1 / -1;
}

.ui-filterbar .ui-field-narrow {
  max-width: 150px;
}

/* 复选框项与操作按钮行不参与等分 */
.ui-filterbar .ui-field-check {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding-bottom: 9px;
}

.ui-filterbar .ui-field-check label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
  white-space: nowrap;
  margin: 0;
}

.ui-filterbar .ui-field-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #087c7d;
  margin: 0;
}

.ui-filterbar .ui-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 2px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.ui-filterbar .ui-filter-actions .ui-filter-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}

/* 既有网格型筛选容器：只统一列宽下限与宽屏占位，不改它们的 display 类型 */
main .customer-filter-grid,
main .crm-filter-grid,
main .sa-filter-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

main .customer-filter-wide,
main .crm-filter-wide {
  grid-column: 1 / -1;
}

/* 公告/资料页筛选条：控件基线之上补齐结构与列宽 */
main .hub-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 14px;
  padding: 18px 20px;
}

/* ---------- 4. 可搜索下拉（combobox） ---------- */
.ui-combo {
  position: relative;
  min-width: 0;
}

.ui-combo-input {
  width: 100%;
  min-height: 40px;
  padding: 9px 32px 9px 11px;
  border: 1px solid #cdd7e2;
  border-radius: 8px;
  background: #fff;
  color: #263b50;
  font: inherit;
  cursor: pointer;
  text-overflow: ellipsis;
}

.ui-combo-input::placeholder {
  color: #8a97a8;
}

.ui-combo-caret {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 8px;
  pointer-events: none;
  background: no-repeat center / contain
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23607086' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
}

.ui-combo[data-open="true"] .ui-combo-caret {
  transform: translateY(-50%) rotate(180deg);
}

.ui-combo-panel {
  position: absolute;
  z-index: 120;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid #d2dbe7;
  border-radius: 9px;
  box-shadow: 0 12px 30px rgba(20, 34, 55, .18);
  overflow: hidden;
}

.ui-combo-panel[hidden] {
  display: none;
}

.ui-combo-search {
  display: flex;
  padding: 8px;
  border-bottom: 1px solid #e7edf4;
  background: #f8fafd;
}

.ui-combo-search input {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid #cdd7e2;
  border-radius: 7px;
  font: inherit;
  color: #263b50;
}

.ui-combo-list {
  max-height: 264px;
  overflow-y: auto;
  padding: 4px;
  margin: 0;
  list-style: none;
}

.ui-combo-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.5;
}

.ui-combo-option:hover,
.ui-combo-option[data-active="true"] {
  background: #e9f4f4;
  color: #124f57;
}

.ui-combo-option[aria-selected="true"] {
  font-weight: 600;
}

.ui-combo-option small {
  color: #64748b;
  font-size: 11px;
  white-space: nowrap;
}

.ui-combo-empty {
  padding: 12px 10px;
  color: #66758a;
  font-size: 13px;
}

.ui-combo-status {
  margin: 0;
  padding: 6px 10px;
  border-top: 1px solid #eef2f7;
  font-size: 11px;
  color: #7b8798;
  background: #fbfcfe;
}

/* 原生 select 由脚本隐藏并继续作为提交值的唯一来源。
   data-ui-combo-native 只在脚本成功升级之后才加上，因此无 JavaScript 时
   下拉框照常显示，功能不降级。 */
main select[data-ui-combo-native] {
  display: none;
}

main select[data-ui-combo-native][data-ui-combo-keep-visible="true"] {
  display: block;
}

/* 多选：标签 + 复选列表 */
.ui-multi-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.ui-multi-tags:empty {
  display: none;
}

.ui-multi-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid #cfe0e6;
  border-radius: 999px;
  background: #f1f8f8;
  color: #1d5b62;
  font-size: 12px;
  cursor: pointer;
}

.ui-multi-tag:hover {
  background: #e2f1f1;
}

.ui-multi-list {
  max-height: 220px;
  overflow-y: auto;
  margin: 8px 0 0;
  padding: 6px;
  border: 1px solid #e3eaf1;
  border-radius: 8px;
  background: #fcfdfe;
}

.ui-multi-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 5px;
  font-weight: 400;
  cursor: pointer;
}

.ui-multi-list label:hover {
  background: #eef5f7;
}

.ui-multi-list label[hidden] {
  display: none;
}

.ui-multi-list input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #087c7d;
  margin: 0;
}

/* ---------- 5. 文件上传控件 ---------- */
.ui-file {
  border: 2px dashed #bdd1de;
  border-radius: 12px;
  background: #f8fbfd;
  padding: 18px;
  transition: border-color .15s ease, background-color .15s ease;
}

.ui-file[data-dragging="true"] {
  border-color: #2b8a94;
  background: #eef7f8;
}

.ui-file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ui-file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 18px;
  border: 1px solid #cce6e5;
  border-radius: 9px;
  background: #e9f6f6;
  color: #155f71;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.ui-file-button:hover {
  background: #ddf0f0;
}

.ui-file-button:focus-visible {
  outline: 2px solid #2b8a94;
  outline-offset: 2px;
}

.ui-file-hint {
  color: #667e8d;
  font-size: 12px;
  margin: 0;
}

.ui-file input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ui-file-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.ui-file-list:empty {
  display: none;
}

.ui-file-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 11px;
  background: #fff;
  border: 1px solid #e0e8ef;
  border-radius: 8px;
  font-size: 13px;
}

.ui-file-list .ui-file-name {
  overflow-wrap: anywhere;
  min-width: 0;
}

.ui-file-list .ui-file-size {
  color: #70828e;
  font-size: 12px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ui-file-total {
  margin: 10px 0 0;
  font-size: 12px;
  color: #4a6472;
}

.ui-file-total[data-over="true"] {
  color: #a33636;
  font-weight: 600;
}

/* ---------- 6. 窄屏 ---------- */
@media (max-width: 680px) {
  main .btn, main button[type="submit"], main .link-button { min-height: 40px; }
  .ui-filterbar {
    grid-template-columns: 1fr;
  }

  .ui-filterbar .ui-field-narrow {
    max-width: none;
  }

  .ui-filterbar .ui-filter-actions {
    width: 100%;
  }

  .ui-filterbar .ui-filter-actions .btn {
    flex: 1;
  }

  main .customer-filter-grid,
  main .crm-filter-grid,
  main .sa-filter-grid {
    grid-template-columns: 1fr;
  }

  main .hub-filters input[type="search"],
  main .hub-filters select {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  main .btn,
  .ui-file,
  .ui-combo-caret {
    transition: none;
  }
}