/*
 * ET 内部管理后台 — TailAdmin 设计系统
 *
 * 2026-06-03 TailAdmin 全面重做:
 *   font → Inter + Noto Sans SC
 *   主色  → #0E7C66(浅色精致风墨绿)
 *   侧栏  → TailAdmin token 皮(结构保留折叠树,只换视觉)
 *   卡片/表格/badge → TailAdmin 圆角/阴影/多彩 badge
 *
 * ⚠️ 加载顺序:本文件经 UNFOLD["STYLES"] 注入,在 unfold/css/styles.css 之前。
 *    覆盖 Unfold Tailwind utility 必须加 !important。
 *
 * 参照:docs/design-refs/et-admin-tailadmin-reference.html
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');

/* ─────────────────────────────────────────────────────────────────────────────
 * CSS 变量 — TailAdmin 设计 token
 * ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* 2026-06-05 业务方选「浅色精致风」(Stripe/Notion 质感):墨绿强调 + 暖白底 + 暖灰描边 */
  --ta-primary:      #0E7C66;
  --ta-primary-l:    #E6F4F0;
  --ta-primary-d:    #0A5C4B;
  /* 列表表头「可排序」提示图标(上下双箭头 unfold_more);用 mask + currentColor 着色 */
  --et-sort-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 9l4-4 4 4M8 15l4 4 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ta-dark:         #1A1C1E;
  --ta-body:         #6B6F76;
  --ta-stroke:       #EAE8E1;
  --ta-bg:           #FAFAF8;
  --ta-gray:         #F5F4F0;
  --ta-surface:      #FFFFFF;

  /* 数据区分色(统计卡 / badge) */
  --ta-orange:       #F59E0B;
  --ta-orange-l:     #FFF6E5;
  --ta-green:        #10B981;
  --ta-green-l:      #E8FBF1;
  --ta-purple:       #8B5CF6;
  --ta-purple-l:     #F5EEFF;
  --ta-red:          #ef4444;
  --ta-red-l:        #FEECEC;

  /* 消息条别名(兼容旧 §14 选择器) */
  --et-ok:           #10B981;
  --et-ok-light:     #E8FBF1;
  --et-warn:         #D97706;
  --et-warn-light:   #FFF6E5;
  --et-err:          #ef4444;
  --et-err-light:    #FEECEC;
  --et-info:         #0891B2;
  --et-info-light:   #ECFEFF;

  /* 字体 — 浅色精致风:正文 Inter,标题点缀 Fraunces serif,数字/编号 JetBrains Mono */
  --font-sans: 'Inter', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Fraunces', 'Noto Serif SC', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;
  /* 精致多层阴影(Stripe 质感) */
  --sh: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.025);
  --sh2: 0 4px 14px rgba(16,24,40,.06), 0 2px 5px rgba(16,24,40,.03);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 1. 全局字体 — Inter + 中文 Noto Sans SC
 * ───────────────────────────────────────────────────────────────────────────── */
body,
.font-sans,
input,
select,
textarea,
button {
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum";
}

code, pre, .font-mono {
  font-family: var(--font-mono) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 2. 字号微调(Unfold Tailwind utility 覆盖)
 * ───────────────────────────────────────────────────────────────────────────── */
.text-xs   { font-size: 13px   !important; line-height: 1.5 !important; }
.text-sm   { font-size: 14.5px !important; line-height: 1.6 !important; }
.text-base { font-size: 15.5px !important; }

/* ─────────────────────────────────────────────────────────────────────────────
 * 3. 数字 tabular — 金额/ID 列对齐
 * ───────────────────────────────────────────────────────────────────────────── */
td.field-ticket_no,
td.field-fb_ad_account_id,
td.field-batch_id,
td.field-id,
td[class*="amount"],
td[class*="balance"],
td[class*="spend"] {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 4. 页面底色 — TailAdmin bg #F1F5F9
 * ───────────────────────────────────────────────────────────────────────────── */
body {
  background-color: var(--ta-bg) !important;
  color: var(--ta-dark) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 5. Unfold primary 色覆盖 → 浅色精致风 #0E7C66
 *    Unfold 用 RGB 三元组格式注入变量,下方覆盖关键 utility class 的实际颜色。
 * ───────────────────────────────────────────────────────────────────────────── */
.text-primary-600   { color: var(--ta-primary)   !important; }
.bg-primary-600     { background: var(--ta-primary)   !important; }
.border-primary-600 { border-color: var(--ta-primary) !important; }
.ring-primary-500   { --tw-ring-color: rgba(14,124,102,.35) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
 * 6. Sidebar 容器 — 白色底 + TailAdmin 描边
 * ───────────────────────────────────────────────────────────────────────────── */
#nav-sidebar {
  background-color: var(--ta-surface) !important;
  border-right: 1px solid var(--ta-stroke) !important;
}

/* logo/branding 区域下边框 */
#nav-sidebar > div:first-child {
  border-bottom-color: var(--ta-stroke) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 7. 折叠树 — x-cloak 防闪现
 * ───────────────────────────────────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────────
 * 8. 一级折叠标题 (et-nav-group) — TailAdmin .gh 视觉
 *    14.5px / medium / body-color;hover: gray bg + dark text
 * ───────────────────────────────────────────────────────────────────────────── */
#nav-sidebar .et-nav-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: auto;
  margin: 0.125rem 0.5rem;
  padding: 0.6rem 0.875rem;
  font-family: var(--font-sans) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: var(--ta-body) !important;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
#nav-sidebar .et-nav-group:hover {
  background-color: var(--ta-gray) !important;
  color: var(--ta-dark) !important;
}

/* 箭头 */
#nav-sidebar .et-nav-caret {
  font-size: 18px !important;
  color: #AEB6C5 !important;
  transition: transform 200ms ease;
}
#nav-sidebar .et-nav-caret.et-open {
  transform: rotate(180deg);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 9. 二级列表 ol — 左缩进 + 引导线
 * ───────────────────────────────────────────────────────────────────────────── */
#nav-sidebar ol {
  margin: 0.125rem 0.5rem 0.5rem 1.5rem !important;
  padding: 0 !important;
  border-left: 1px solid var(--ta-stroke);
}

/* 分隔 HR 多余 — 隐藏 */
#nav-sidebar hr {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 10. 二级菜单项 (et-nav-item) — TailAdmin .sub li 视觉
 *     14px / #7a8499;hover: dark text;active: primary text + bold + 竖条
 * ───────────────────────────────────────────────────────────────────────────── */
#nav-sidebar .et-nav-item {
  position: relative;
  height: 2.25rem !important;
  margin: 0 !important;
  padding-left: 0.875rem !important;
  border: 0 !important;
  border-radius: 0 7px 7px 0;
  color: #7a8499 !important;
  transition: background-color 120ms ease, color 120ms ease;
}
#nav-sidebar .et-nav-item-label {
  font-size: 14px !important;
}
#nav-sidebar .et-nav-item .material-symbols-outlined {
  font-size: 18px !important;
  color: #9AA4B7 !important;
  transition: color 120ms ease;
}

/* hover */
#nav-sidebar .et-nav-item:hover {
  background-color: var(--ta-gray) !important;
  color: var(--ta-dark) !important;
}
#nav-sidebar .et-nav-item:hover .material-symbols-outlined {
  color: var(--ta-body) !important;
}

/* active — primary 文字 + 浅底 + 竖条 */
#nav-sidebar .et-nav-item[data-et-active],
#nav-sidebar ol a.bg-gray-100,
#nav-sidebar ol a.font-semibold.text-primary-600 {
  background-color: var(--ta-primary-l) !important;
  color: var(--ta-primary) !important;
  font-weight: 600 !important;
}
#nav-sidebar .et-nav-item[data-et-active]::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  width: 3px;
  height: 1.125rem;
  transform: translateY(-50%);
  background: var(--ta-primary);
  border-radius: 0 2px 2px 0;
}
#nav-sidebar .et-nav-item[data-et-active] .material-symbols-outlined,
#nav-sidebar ol a.bg-gray-100 .material-symbols-outlined,
#nav-sidebar ol a.font-semibold .material-symbols-outlined {
  color: var(--ta-primary) !important;
}

/* 链接基础色 */
#nav-sidebar ol a       { color: #7a8499 !important; }
#nav-sidebar ol a:hover { color: var(--ta-dark) !important; background-color: var(--ta-gray) !important; }
#nav-sidebar ol a .material-symbols-outlined       { color: #9AA4B7; }
#nav-sidebar ol a:hover .material-symbols-outlined { color: var(--ta-body); }

/* 字号 */
#nav-sidebar a, #nav-sidebar button { font-size: 14px; }

/* 键盘焦点环 */
#nav-sidebar .et-nav-group:focus-visible,
#nav-sidebar .et-nav-item:focus-visible {
  outline: 2px solid var(--ta-primary) !important;
  outline-offset: -2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 11. Sidebar toggle — TailAdmin 描边
 * ───────────────────────────────────────────────────────────────────────────── */
.bg-white.border.rounded-full {
  border-color: var(--ta-stroke) !important;
  color: var(--ta-body) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 12. 顶部 header — 白色 + 下描边
 * ───────────────────────────────────────────────────────────────────────────── */
#main > .border-b {
  background-color: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-bottom-color: var(--ta-stroke) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 13. 表格 — TailAdmin 圆角 + 柔和阴影
 * ───────────────────────────────────────────────────────────────────────────── */
#result_list {
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  overflow: hidden;
}
#result_list thead th {
  background-color: var(--ta-primary-l) !important;
  color: var(--ta-primary-d) !important;
  font-size: 11px;            /* 2026-06-08:表头字号缩小,配合 nowrap 尽量一行 */
  letter-spacing: 0;          /* 去字距,腾横向空间 */
  white-space: nowrap;        /* 列名不换行,尽量单行展示(列多时表格横向滚动) */
  padding-left: 8px !important;
  padding-right: 8px !important;
}
/* ── 列表表头排序提示(2026-06-07)────────────────────────────────────────────
   排序功能本就可用(Unfold 对可排序列渲染 <a href="?o=N"> 列名链接,见
   unfold change_list_results.html:17),但未排序态零视觉提示——链接继承灰字像
   静态文案;加上该模板 :14 把 Django5 的 header.class_attrib(完整 class="..." 属性)
   误塞进 class= 致 th 丢 sortable class。纯展示层补:列名排序链接加可点配色 + 双箭头
   图标,不碰 Unfold 模板/排序逻辑。
   选择器 `.text a[href*="?o="]`:`.text` 限定排除 .sortoptions 内的方向/取消锚点,
   `[href*="?o="]` 精确匹配 Django 排序链接(url_primary),即便将来模板在表头插入其它
   <a> 也不会被误标记(审计 aud_ZuS38IGWfDvoCgWs f1)。
   已排序列(th 内含 .sortoptions 方向箭头)由 :has 收起冗余图标——注:因上述 class_attrib
   畸形,th 无 .sorted class 可用,:has 是当前唯一能区分已/未排序的途径;:has 不支持时
   (Chrome105+/Safari15.4+/FF121+ 均支持)仅退化为已排序列双图标并存,功能与排序不受
   影响(审计 f2,降级安全)。 */
#result_list thead th .text a[href*="?o="] {
  color: var(--ta-primary-d) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  transition: color .12s ease !important;
}
#result_list thead th .text a[href*="?o="]::after {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  background-color: currentColor;
  opacity: .4;
  transition: opacity .12s ease;
  -webkit-mask: var(--et-sort-icon) no-repeat center / 13px 13px;
  mask: var(--et-sort-icon) no-repeat center / 13px 13px;
}
#result_list thead th .text a[href*="?o="]:hover {
  color: var(--ta-primary) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
#result_list thead th .text a[href*="?o="]:hover::after { opacity: .9; }
/* 已排序列已有 Unfold 方向箭头(.sortoptions),收起列名旁通用排序图标避免重复 */
#result_list thead th:has(.sortoptions) .text a[href*="?o="]::after { display: none !important; }
#result_list tbody tr {
  border-bottom-color: #F1F5F9 !important;
}
#result_list tbody tr:hover td {
  background-color: #FAFBFC !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 14. 模块卡片 — 圆角 + 阴影
 * ───────────────────────────────────────────────────────────────────────────── */
.bg-white.rounded-md, .rounded-md.shadow-sm {
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 15. 表单 focus ring — 墨绿 primary
 * ───────────────────────────────────────────────────────────────────────────── */
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="url"]:focus, input[type="search"]:focus,
input[type="date"]:focus, input[type="datetime-local"]:focus,
input[type="time"]:focus, textarea:focus, select:focus {
  border-color: var(--ta-primary) !important;
  box-shadow: 0 0 0 3px rgba(14,124,102,.12) !important;
  outline: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 16. Django messages — 多彩 token
 * ───────────────────────────────────────────────────────────────────────────── */
ul li.bg-green-100 { background-color: var(--et-ok-light) !important; }
ul li.text-green-600 { color: var(--et-ok) !important; }
ul li.bg-amber-100 { background-color: var(--et-warn-light) !important; }
ul li.text-amber-600 { color: var(--et-warn) !important; }
ul li.bg-red-100 { background-color: var(--et-err-light) !important; }
ul li.text-red-600 { color: var(--et-err) !important; }
ul li.bg-blue-50 { background-color: var(--et-info-light) !important; }
ul li.text-blue-500 { color: var(--et-info) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
 * 17. 多彩状态 badge(工单 9 状态)
 *     .et-badge-{color} = 浅底 + 深色文字 pill + dot
 * ───────────────────────────────────────────────────────────────────────────── */
.et-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.et-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* draft / pending */
.et-badge-gray   { background:#F1F5F9; color:#5A6679; }
/* submitted / in_review */
.et-badge-indigo { background: var(--ta-primary-l); color: var(--ta-primary); }
/* approved */
.et-badge-green  { background: var(--ta-green-l);  color: #0A7A55; }
/* processing / executing */
.et-badge-blue   { background:#ECFEFF; color:#0891B2; }
/* completed / success */
.et-badge-teal   { background:#CCFBF1; color:#0F766E; }
/* rejected */
.et-badge-red    { background: var(--ta-red-l);    color: #C81E1E; }
/* cancelled */
.et-badge-orange { background: var(--ta-orange-l); color: #92400E; }
/* pending_info */
.et-badge-yellow { background:#FEFCE8; color:#854D0E; }
/* escalated */
.et-badge-purple { background: var(--ta-purple-l); color: #6D28D9; }

/* ─────────────────────────────────────────────────────────────────────────────
 * 17b. 金额 — 等宽数字 + 进/出账红绿(财务流水/余额)
 * ───────────────────────────────────────────────────────────────────────────── */
.et-money {
  font-family: var(--ta-font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.et-money-pos { color: #0A7A55; }
.et-money-neg { color: #C81E1E; }
.et-money-zero { color: #5A6679; }

/* ─────────────────────────────────────────────────────────────────────────────
 * 17c. 批量操作自定义下拉 — 替换原生 select 展开样式(custom-action-select.js)
 *      原生 select 视觉隐藏但保留 DOM + value(Django actions 提交读它),
 *      自定义 UI 完全可控:圆角 + 绿 hover/选中 + Inter + 精致阴影。
 * ───────────────────────────────────────────────────────────────────────────── */
.et-action-dd { position: relative; display: inline-block; }
.et-action-dd__native {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important;
  border: 0 !important; opacity: 0 !important; pointer-events: none !important;
}
.et-action-dd__trigger {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 248px; padding: 9px 14px;
  background: var(--ta-surface); border: 1px solid var(--ta-stroke);
  border-radius: 10px; box-shadow: var(--sh);
  font: 500 14px/1.2 var(--font-sans); color: var(--ta-dark);
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.et-action-dd__trigger:hover { border-color: var(--ta-primary); }
.et-action-dd.is-open .et-action-dd__trigger {
  border-color: var(--ta-primary); box-shadow: 0 0 0 3px var(--ta-primary-l);
}
.et-action-dd__label { flex: 1 1 auto; text-align: left; white-space: nowrap; }
.et-action-dd__caret {
  color: var(--ta-body); font-size: 11px; transition: transform .18s ease;
}
.et-action-dd.is-open .et-action-dd__caret { transform: rotate(180deg); }
/* position:fixed(非 absolute)— 脱离祖先 form/.changelist-form-container 的
 * overflow:auto(宽表横滚需要,且 CSS 不能单轴 visible)对绝对定位下拉的裁切;
 * top/left/min-width 由 JS 按触发器位置设(见 custom-action-select.js positionPanel)。*/
.et-action-dd__panel {
  display: none; position: fixed; z-index: 60;
  min-width: 248px; max-height: 360px; overflow-y: auto;
  background: var(--ta-surface); border: 1px solid var(--ta-stroke);
  border-radius: 12px; box-shadow: var(--sh2); padding: 6px;
}
.et-action-dd.is-open .et-action-dd__panel { display: block; }
.et-action-dd__option {
  padding: 9px 12px; border-radius: 8px; font-size: 14px; line-height: 1.3;
  color: var(--ta-dark); white-space: nowrap; cursor: pointer;
  transition: background .12s, color .12s;
}
.et-action-dd__option:hover,
.et-action-dd__option.is-active { background: var(--ta-gray); }
.et-action-dd__option.is-selected {
  background: var(--ta-primary-l); color: var(--ta-primary-d); font-weight: 600;
}
.et-action-dd__option:first-child { color: var(--ta-body); }

/* ─────────────────────────────────────────────────────────────────────────────
 * 17d. inline 表头 help_text 问号图标隐藏(2026-06-06 业务方)
 *      这些 help_text 是开发者技术注释(如"批次在 ticket.data.batches 中的索引"),
 *      对运营无用 + 含内部技术词;表头中文(批次号/时区/名称后缀)已自解释。
 *      仅作用 inline 表头(.inline-group thead th 内的 material-symbols),
 *      不影响别处图标(侧栏/按钮/badge 等)。
 * ───────────────────────────────────────────────────────────────────────────── */
.inline-group thead th span.material-symbols-outlined { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────────
 * 17e. 处理指引步骤卡(processing_guide_display)— 2026-06-06 业务方
 *      原突兀黄框 inline style → 柔和 amber 卡 + 圆形序号,和整体精致风一致。
 * ───────────────────────────────────────────────────────────────────────────── */
.et-proc-guide {
  background: var(--ta-orange-l);
  border: 1px solid #FBE3BD;
  border-left: 3px solid var(--ta-orange);
  border-radius: 12px;
  padding: 16px 18px 16px 20px;
  margin: 2px 0;
}
.et-proc-guide__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: et-proc-guide;
}
.et-proc-guide__steps li {
  counter-increment: et-proc-guide;
  position: relative;
  padding-left: 30px;
  margin-bottom: 11px;
  color: #7A4E12;
  line-height: 1.65;
  font-size: 13px;
}
.et-proc-guide__steps li:last-child { margin-bottom: 0; }
.et-proc-guide__steps li::before {
  content: counter(et-proc-guide);
  position: absolute;
  left: 0;
  top: 1px;
  width: 19px;
  height: 19px;
  background: var(--ta-orange);
  color: #fff;
  border-radius: 50%;
  font: 600 11px/19px var(--font-mono, monospace);
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 18. 锁定 light — 隐藏主题切换器
 * ───────────────────────────────────────────────────────────────────────────── */
[x-data*="openTheme"] { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────────
 * 19. Text selection
 * ───────────────────────────────────────────────────────────────────────────── */
::selection { background: var(--ta-primary); color: #fff; }

/* ─────────────────────────────────────────────────────────────────────────────
 * 20. Dashboard 统计卡(et-stat-card 用于 templates/unfold/index.html)
 * ───────────────────────────────────────────────────────────────────────────── */
.et-stat-card {
  background: var(--ta-surface);
  border: 1px solid var(--ta-stroke);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.et-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  margin-bottom: 1.125rem;
}
.et-stat-icon.ic-indigo { background: var(--ta-primary-l); color: var(--ta-primary); }
.et-stat-icon.ic-orange { background: var(--ta-orange-l);  color: var(--ta-orange); }
.et-stat-icon.ic-green  { background: var(--ta-green-l);   color: var(--ta-green); }
.et-stat-icon.ic-purple { background: var(--ta-purple-l);  color: var(--ta-purple); }
.et-stat-icon .material-symbols-outlined { font-size: 24px !important; }

.et-stat-num {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ta-dark);
  line-height: 1;
}
.et-stat-label {
  font-size: 14px;
  color: var(--ta-body);
  margin-top: 4px;
}
.et-stat-trend {
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 8px;
}
.et-trend-up   { color: var(--ta-green); }
.et-trend-dn   { color: var(--ta-red); }
.et-trend-flat { color: var(--ta-body); }

/* ─────────────────────────────────────────────────────────────────────────────
 * 21. 顶层导航直达入口(无 title group,如"工单总表")— 一级样式,不缩进
 *     2026-06-03 业务方:全部工单移出"工单·客户"组,作顶层独立入口消除歧义。
 * ───────────────────────────────────────────────────────────────────────────── */
#nav-sidebar ol.et-nav-toplist {
  margin: 0.125rem 0.5rem !important;
  padding: 0 !important;
  border-left: 0 !important;
}
#nav-sidebar ol.et-nav-toplist .et-nav-item {
  height: auto !important;
  padding: 0.6rem 0.875rem !important;
  border-radius: 8px !important;
  color: var(--ta-body) !important;
  font-weight: 500 !important;
}
#nav-sidebar ol.et-nav-toplist .et-nav-item-label {
  font-size: 14.5px !important;
}
#nav-sidebar ol.et-nav-toplist .et-nav-item .material-symbols-outlined {
  font-size: 20px !important;
}
/* 顶层 active:纯浅底 brand(无竖条,与折叠组内二级项区分) */
#nav-sidebar ol.et-nav-toplist .et-nav-item[data-et-active] {
  background-color: var(--ta-primary-l) !important;
  color: var(--ta-primary) !important;
  font-weight: 600 !important;
}
#nav-sidebar ol.et-nav-toplist .et-nav-item[data-et-active]::before {
  display: none !important;
}
#nav-sidebar ol.et-nav-toplist .et-nav-item[data-et-active] .material-symbols-outlined {
  color: var(--ta-primary) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 22. 列表页(changelist)行内链接 — 明显可点(品牌蓝 + hover 下划线)
 *     2026-06-03 业务方:工单号色太深看不出是链接 → 不知能点进详情。
 * ───────────────────────────────────────────────────────────────────────────── */
#result_list tbody th a,
#result_list tbody td a {
  color: var(--ta-primary) !important;
  font-weight: 500 !important;
}
#result_list tbody th a:hover,
#result_list tbody td a:hover {
  text-decoration: underline !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 23. 顶栏(header.html override)— TailAdmin:搜索框(⌘K)+ 通知铃 + 头像
 * ───────────────────────────────────────────────────────────────────────────── */
/* 搜索框 */
.et-top-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 280px;
  flex-shrink: 0;
  height: 42px;
  margin-left: auto;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--ta-stroke);
  border-radius: 9px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.et-top-search:focus-within {
  border-color: var(--ta-primary);
  box-shadow: 0 0 0 3px rgba(14,124,102, 0.1);
}
.et-top-search .et-search-icon {
  font-size: 20px !important;
  color: var(--ta-body);
  flex-shrink: 0;
}
.et-top-search input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px;
  color: var(--ta-dark);
  padding: 0 10px;
}
.et-top-search input::placeholder { color: #9AA4B7; }
.et-search-kbd {
  flex-shrink: 0;
  font-size: 11px;
  background: var(--ta-gray);
  color: #8a94a6;
  padding: 3px 7px;
  border-radius: 5px;
}

/* 右侧 actions */
.et-top-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* 通知铃 */
.et-top-bell {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ta-gray);
  display: grid;
  place-items: center;
  color: var(--ta-body) !important;
  transition: background-color 140ms ease;
}
.et-top-bell:hover { background: #E2E8F0; }
.et-top-bell .material-symbols-outlined { font-size: 22px !important; }
.et-bell-dot {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ta-red);
  border: 2px solid var(--ta-gray);
}

/* 刷新当前数据按钮(顶栏右上)— 局部刷新内页,不整页 reload(2026-06-11 业务方)。
 * 复用通知铃的圆形按钮风格;刷新进行中图标转圈(复用 et-pull-spin keyframes)。 */
.et-top-refresh {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ta-gray);
  display: grid;
  place-items: center;
  color: var(--ta-body) !important;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color 140ms ease;
}
.et-top-refresh:hover { background: #E2E8F0; }
.et-top-refresh:disabled { cursor: default; opacity: 0.65; }
.et-top-refresh .material-symbols-outlined { font-size: 22px !important; }
.et-top-refresh.is-refreshing .material-symbols-outlined {
  animation: et-pull-spin 0.7s linear infinite;
  transform-origin: center;
}

/* 头像区 */
.et-top-user {
  display: flex;
  align-items: center;
  gap: 11px;
}
.et-user-info { text-align: right; line-height: 1.3; }
.et-user-name { font-size: 14px; font-weight: 600; color: var(--ta-dark); }
.et-user-role { font-size: 12px; color: var(--ta-body); }
/* account_links 的 person 图标 → 圆形渐变头像 */
.et-top-user .relative > a {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0E7C66, #13A07F);
  display: grid !important;
  place-items: center;
  color: #fff !important;
}
.et-top-user .relative > a .material-symbols-outlined {
  color: #fff !important;
  font-size: 22px !important;
}

/* 窄屏:隐藏搜索框 + 用户名/角色(保留图标) */
@media (max-width: 1024px) {
  .et-top-search { display: none; }
  .et-user-info { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 24. Dashboard 环形图垂直图例(替代 ApexCharts 横排长短不齐 → 每项一行对齐)
 * ───────────────────────────────────────────────────────────────────────────── */
.et-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.et-donut-leg-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.et-donut-leg-name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ta-dark);
  min-width: 0;
}
.et-donut-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.et-donut-leg-val {
  color: var(--ta-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  margin-left: 12px;
}
/* 图例色点 — 与 ApexCharts donut colors 同序(c0..c6 对应 7 色,c7+ 循环) */
.et-donut-c0 { background: #0E7C66; }
.et-donut-c1 { background: #F59E0B; }
.et-donut-c2 { background: #10B981; }
.et-donut-c3 { background: #8B5CF6; }
.et-donut-c4 { background: #ef4444; }
.et-donut-c5 { background: #9AA4B7; }
.et-donut-c6 { background: #80CAEE; }
.et-donut-c7 { background: #0E7C66; }
.et-donut-c8 { background: #F59E0B; }
.et-donut-c9 { background: #10B981; }

/* ─────────────────────────────────────────────────────────────────────────────
 * 25. Change form 详情页(二级页面)— TailAdmin 卡片化
 *     2026-06-05 业务方"二级页面像草图":unfold 默认用灰阶(段标题 bg-gray-100 /
 *     readonly 字段 bg-gray-50 + text-gray-500 / 描边 gray-200),未对齐 v3 品牌
 *     色调 → 段标题改 primary-l 浅绿(对齐 dashboard 统计卡/表头)、描边统一
 *     --ta-stroke、readonly 字段提清晰度;业务字段表格用 §13 同款圆角+primary-l 表头。
 *     作用域限 fieldset.module(仅 change form),不影响 changelist。
 * ───────────────────────────────────────────────────────────────────────────── */
/* 段标题:灰底 → primary-l 浅绿底 + primary-d 字(品牌强调,告别灰阶草图感)*/
fieldset.module > h2 {
  background-color: var(--ta-primary-l) !important;
  color: var(--ta-primary-d) !important;
  border-color: transparent !important;
  letter-spacing: .01em;
}
/* 字段组容器(.aligned):描边/圆角/阴影对齐 v3 卡片 */
fieldset.module .aligned {
  border-color: var(--ta-stroke) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important;
}
/* readonly 字段框:描边统一 + 底更净 + 字提清晰(原 gray-500 偏灰看不清)*/
fieldset.module .readonly {
  background-color: #F8FAFC !important;
  border-color: var(--ta-stroke) !important;
  color: var(--ta-dark) !important;
}
/* label:统一 v3 dark token */
fieldset.module .form-row label {
  color: var(--ta-dark) !important;
}
/* 业务字段表格(business_fields_display)— 对齐 §13 列表表格风格 */
.et-bizfields-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--ta-stroke);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  font-size: 13px;
  margin-top: 2px;
}
.et-bizfields-table thead th {
  background-color: var(--ta-primary-l);
  color: var(--ta-primary-d);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .03em;
  text-align: left;
  padding: 10px 14px;
}
.et-bizfields-table tbody td {
  padding: 10px 14px;
  border-top: 1px solid #F1F5F9;
  color: var(--ta-dark);
  vertical-align: top;
}
.et-bizfields-table tbody tr:hover td {
  background-color: #FAFBFC;
}
.et-bizfields-table td.et-bizfields-key code {
  color: var(--ta-body);
  font-size: 12px;
  background: var(--ta-gray);
  padding: 2px 7px;
  border-radius: 5px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 26. 全局组件精致化 — GPT+Gemini 设计评审 f1/f3/f4 落地(2026-06-05)
 *     changelist 工具栏 + 表单控件统一 + 行高;补 §13/§15 之外的基础组件。
 *     作用域排除 .et-input(登录页自有精致样式)。
 * ───────────────────────────────────────────────────────────────────────────── */
/* f4:changelist 行高舒展(原偏紧) */
#result_list tbody td { padding-top: 13px !important; padding-bottom: 13px !important; }

/* f1:表单控件统一 — 暖灰描边 + 圆角 10(focus 已 §15 墨绿);排除登录页 .et-input */
.aligned input[type=text], .aligned input[type=email], .aligned input[type=password],
.aligned input[type=number], .aligned input[type=url], .aligned input[type=tel],
.aligned input[type=date], .aligned input[type=datetime-local], .aligned input[type=time],
.aligned select, .aligned textarea,
#content input[type=text]:not(.et-input), #content input[type=email]:not(.et-input),
#content select, #content textarea {
  border-color: var(--ta-stroke) !important;
  border-radius: 10px !important;
}
/* checkbox/radio 墨绿 */
input[type=checkbox], input[type=radio] { accent-color: var(--ta-primary); }

/* f1:按钮圆角统一 + 主按钮墨绿强调阴影 */
.button, input[type=submit], input[type=button],
.submit-row button, .submit-row a.button { border-radius: 10px !important; }
.submit-row .default, input[type=submit].default {
  background-color: var(--ta-primary) !important;
  box-shadow: 0 1px 2px rgba(14,124,102,.22) !important;
}

/* f1:changelist 工具栏 — 批量操作栏 / 分页 / 筛选 */
#changelist .actions {
  border-radius: 10px !important;
  border-color: var(--ta-stroke) !important;
  background: var(--ta-gray) !important;
}
.paginator a:link, .paginator a:visited { border-radius: 8px !important; }
.paginator .this-page {
  background-color: var(--ta-primary-l) !important;
  color: var(--ta-primary-d) !important;
  border-radius: 8px !important; font-weight: 600;
}
#changelist-filter li.selected a { color: var(--ta-primary-d) !important; font-weight: 600; }

/* f5(2026-06-12 业务方反馈「边框出血」):宽列表表格横向滚动 + 内容区允许收缩。
 * 列多 / 内容长的 changelist(如「广告账号」10+ 列、BM 名很长)表压不缩 → 整页右侧出血。
 * 两步合一:① 内容主区 #main(flex-grow)补 min-width:0,允许收缩到可用宽度(否则被宽表
 * min-content 撑到 .container max-width 1280 + 左导航 → 超视口出血);② 结果容器加横向滚动,
 * 表太宽时在卡片内左右滚(窄表不出滚动条)。合一后:页面不再出血,宽表在卡片内可横滚。 */
#main {
  min-width: 0;
}
.changelist-form-container {
  overflow-x: auto;
  min-width: 0;
  /* 业务方 2026-06-12:横滚后右边裸切难看 → 给结果区收个边(圆角描边卡片),
   * 表格在卡片内横滚,右边有干净边界;窄表也统一成卡片观感。 */
  border: 1px solid var(--ta-stroke);
  border-radius: 12px;
}
/* f5 修订(2026-06-12 业务方「还是出血」复审):仅容器 overflow-x:auto 时,宽表会裁在容器
 * border 上 → 表格贴边框、半切列、看着仍像出血。让直接裹 #result_list 的 form 也成滚动容器,
 * 表格裁在容器 px-4 内边距「以内」→ 表格与卡片边框间留 16px 干净间隙,横滚条落卡片内,
 * 边界清爽不再裸切。(客户备用金 12 列、广告账号 10+ 列等宽表实测明暗两态干净不出血。) */
#changelist-form {
  overflow-x: auto;
}

/* 「拉取状态」列:拉取中的转圈 spinner(2026-06-11 业务方要进度提示)。
 * 一个一直转的小圆圈:灰底环 + 主色顶弧,匀速旋转(像进度环)。 */
.et-pull-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #d1d5db;            /* 灰底环 */
  border-top-color: var(--ta-primary, #0E7C66); /* 主色顶弧 */
  border-radius: 50%;
  vertical-align: middle;
  animation: et-pull-spin 0.7s linear infinite;
}
@keyframes et-pull-spin {
  to { transform: rotate(360deg); }
}