/* ============================================================================
   Anari ERP — ANARI 全系设计系统（官方品牌规范）
   品牌: ANARI 蓝 #1877f2 / ANARI 炭黑 #342e2c（2026-08 官方 logo 逐像素提取）
   无第二蓝、无绿色系、无渐变按钮；默认明暗随系统，.light/.dark 可手动覆盖
   详见 skill: anari-design-system
   ========================================================================== */

/* ── 亮色主题（默认） ─────────────────────────────────────────────── */
:root {
  color-scheme: light dark;
  /* 品牌（官方提取，勿改） */
  --brand: #1877f2;
  --brand-press: #1464cc;
  --brand-solid: #1464cc;         /* 实色填充承白字用（白/蓝 5.64 = AA）；--brand 保留做强调/链接 */
  --brand-soft: rgba(24, 119, 242, .10);
  --brand-link: #1464cc;          /* AA: 链接文字用深一档品牌蓝（白底 5.64 / canvas 5.18 / hover 4.82）；
                                     官方 --brand #1877f2 仍用于强调/装饰；暗色下自动提亮为 #6ea8ff */
  --brand-ink: #1259b8;           /* AA: 品牌文字落在 --brand-soft 淡底上时再深一档
                                     （#1464cc 在 soft×hover 合成底 #D9E1EC 上仅 4.28） */
  /* 品牌色阶（兼容旧变量名，统一到官方蓝） */
  --brand-50: #eef7ff;
  --brand-100: #d9edff;
  --brand-300: #8ecdff;
  --brand-400: #59b0ff;
  --brand-500: #3390ff;
  --brand-600: #1464cc;   /* AA: 模板 80+ 处用它作文字色，官方 #1877f2 对白底仅 4.23 */
  --brand-700: #1464cc;
  --brand-950: #0b2a54;
  --brand-deep: #1464cc;          /* 旧 #066aab 违规色已移除 */

  /* 能量绿 → 统一到品牌蓝（规范禁止绿色系） */
  --energy-500: #1877f2;
  --energy-700: #1464cc;
  --sage-200: #d9edff;

  /* 中性（源自炭黑色相的暖灰系） */
  --ink: #342e2c;
  --ink-2: #6b6560;
  --ink-3: #6e675f;               /* AA: 原 #9a938d 仅 3.03；#767068 对 hover 面 4.19 仍不达标，
                                     调深至 白 5.57 / canvas 5.12 / hover 4.76 */
  --ink-900: #342e2c;             /* 兼容旧名 = 官方炭黑 */
  --ink-600: #6b6560;
  --ink-400: #6e675f;             /* 兼容旧名 = ink-3 */

  /* 表面 */
  --canvas: #f5f5f7;
  --surface: #ffffff;
  --surface-hover: #eeedeb;
  --surface-2: #eeedeb;
  --line: #e6e3df;
  --sidebar-top: #101318;         /* 中性深灰（规范：不搞彩色渐变侧栏） */
  --sidebar-bottom: #101318;
  --sidebar-surface: #f5f5f7;      /* 亮色下侧栏与画布同为中性面 */

  /* 状态（语义色，非品牌色） */
  --danger: #c81e1e;              /* AA: 文本用（白 5.74 / canvas 5.27 / hover 4.90）；
                                     实色填充仍用 --danger-solid #dc2626 */
  --danger-press: #b91c1c;
  --danger-solid: #dc2626;        /* 实色填充承白字用（白/红 4.83 = AA） */
  --danger-soft: rgba(220, 38, 38, .10);
  --warning: #a04c08;             /* AA: 原 #d97706 仅 3.19；#b45309 在 warning-soft 上 4.42 仍差，
                                     调深至 白 5.75 / soft 5.23 */
  --warning-press: #92400e;
  --warning-solid: #b45309;       /* 实色填充承白字用（白/琥珀 5.02 = AA） */
  --warning-soft: rgba(217, 119, 6, .12);
  --success: #136b33;             /* AA: #15803d 在 success-soft 上 4.39，调深至 白 6.6 / soft 5.7 */
  --success-press: #166534;
  --success-solid: #15803d;       /* 实色填充承白字用（白/绿 5.02 = AA） */
  --success-soft: rgba(21, 128, 61, .10);
  --on-brand: #ffffff;            /* 品牌/状态实色填充上的文字（亮暗一致） */

  /* 交互 */
  --ring: rgba(24, 119, 242, 0.35);
  --shadow-card: 0 1px 3px rgba(52, 46, 44, .08), 0 4px 14px rgba(52, 46, 44, .06);
  --shadow-sm: 0 1px 2px rgba(52, 46, 44, .05);
  --shadow-md: var(--shadow-card);
  --shadow-lg: 0 12px 32px -8px rgba(11, 42, 84, .22);
  --table-hover: rgba(24, 119, 242, .08);

  --radius-btn: 8px;
  --radius-lg: 12px;
  --radius-sign: 0 30px 0 0;
}

/* ── 暗色主题（自动 + 手动类双轨） ────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --brand-link: #6ea8ff;
    --brand-ink: #6ea8ff;   /* soft 底上的品牌文字（暗色） */
  --brand-ink: #6ea8ff;   /* soft 底上的品牌文字（暗色） */
    --brand-50: rgba(77, 148, 247, .10);
    --brand-100: rgba(77, 148, 247, .18);
    --brand-300: #5f9df5;
    --brand-400: #4d94f7;
    --brand-500: #3d8bf6;
    --brand-600: #6ea8ff;   /* 暗底上品牌文字必须提亮（同 --brand-link） */
    --brand-700: #6ea8ff;   /* 暗底同理 */
    --brand-950: #0b2a54;
    --brand-deep: #1464cc;
    --energy-500: #1877f2;
    --energy-700: #1464cc;
    --sage-200: rgba(77, 148, 247, .16);
    --ink: #f2f1ef;
    --ink-2: #a8a29b;
    --ink-3: #9e988f;
    --ink-900: #f2f1ef;
    --ink-600: #a8a29b;
    --ink-400: #9e988f;
    --canvas: #0d0f12;
    --surface: #15181d;
    --surface-hover: #1d2127;
    --surface-2: #1d2127;
    --line: #272c33;
    --sidebar-top: #101318;
    --sidebar-bottom: #101318;
    --sidebar-surface: #101318;
    --danger: #f87171;
    --danger-press: #ef4444;
    --danger-solid: #b91c1c;      /* 深色下实色填充仍取深底承白字（浅红填充配白字不合 AA） */
    --danger-soft: rgba(248, 113, 113, .14);
    --warning: #fbbf24;
    --warning-solid: #92400e;
    --warning-soft: rgba(251, 191, 36, .14);
    --success: #4ade80;
    --success-press: #22c55e;
    --success-solid: #166534;
    --success-soft: rgba(74, 222, 128, .14);
    --warning-press: #f59e0b;
    --on-brand: #ffffff;
    --ring: rgba(77, 148, 247, 0.45);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .35);
    --shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, .6);
    --table-hover: rgba(77, 148, 247, .10);
  }
}
:root.dark {
  --brand-link: #6ea8ff;
  --brand-50: rgba(77, 148, 247, .10);
  --brand-100: rgba(77, 148, 247, .18);
  --brand-300: #5f9df5;
  --brand-400: #4d94f7;
  --brand-500: #3d8bf6;
  --brand-600: #6ea8ff;   /* 暗底上品牌文字必须提亮（同 --brand-link） */
  --brand-700: #6ea8ff;   /* 暗底同理 */
  --brand-deep: #1464cc;
  --energy-500: #1877f2;
  --energy-700: #1464cc;
  --sage-200: rgba(77, 148, 247, .16);
  --ink: #f2f1ef;
  --ink-2: #a8a29b;
  --ink-3: #9e988f;
  --ink-900: #f2f1ef;
  --ink-600: #a8a29b;
  --ink-400: #9e988f;
  --canvas: #0d0f12;
  --surface: #15181d;
  --surface-hover: #1d2127;
  --surface-2: #1d2127;
  --line: #272c33;
  --sidebar-top: #101318;
  --sidebar-bottom: #101318;
  --sidebar-surface: #101318;
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, .14);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, .14);
  --success: #4ade80;
  --success-press: #22c55e;
  --success-soft: rgba(74, 222, 128, .14);
  --warning-press: #f59e0b;
  --on-brand: #ffffff;
  --ring: rgba(77, 148, 247, 0.45);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .35);
  --shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, .6);
  --table-hover: rgba(77, 148, 247, .10);
}

/* ── 基础 ─────────────────────────────────────────────────────────── */
/* App-shell 滚动约束（用户实测「下拉滚动不到底」的根因修复）：
   布局是 #main overflow-auto 内滚设计，但 html 曾存在 ~356px 的幽灵溢出
   （main 内容被自身裁剪，documentElement.scrollHeight 却把它计入文档层），
   导致滚轮先滚窗口 356px、再滚 #main——两层叠加后用户停在「内容中段 +
   下方大片空白」，怎么滚都「到不了底」。文档级滚动一律禁止。 */
html, body {
  overflow: hidden;
  height: 100%;
}
/* R42：滚动容器定位上下文——sr-only 等 position:absolute 元素（Tailwind 的
   clip 隐藏方案）在没有定位祖先时 offsetParent=BODY，会按 static 原位落进
   文档层坐标，把滚动区撑出不可见余量（实测首页尾部 ~170px）。main 自身
   成为包含块后 1px 盒回到滚动区内，逃逸消失。 */
#main { position: relative; }
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: var(--canvas);
  color: var(--ink-900);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Segoe UI", system-ui, sans-serif;
}
:where(.font-mono, .tabular, table td, table th) { font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ink-400);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
  opacity: .5;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
  border-radius: var(--radius-btn);
}

/* ── 表面 ─────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-sign { border-radius: var(--radius-sign); }
.card-hover { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-300);
}

/* ── 按钮（规范：主操作实色品牌蓝，无渐变） ──────────────────────── */
.btn-primary {
  background: var(--brand-solid);
  color: var(--on-brand);
  border-radius: var(--radius-btn);
  box-shadow: 0 2px 8px rgba(24, 119, 242, 0.28);
  transition: box-shadow .16s ease, filter .16s ease, transform .16s ease;
}
.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 4px 14px rgba(24, 119, 242, 0.38); }
.btn-primary:active { transform: translateY(1px); }

.btn-deep { background: var(--brand-press); color: var(--on-brand); border-radius: var(--radius-btn); }
.btn-energy { background: var(--brand-solid); color: var(--on-brand); border-radius: var(--radius-btn); }

/* ── 语义助手（保证双主题的统一出口） ─────────────────────────────── */
.ink { color: var(--ink-900); }
.ink-muted { color: var(--ink-600); }
.ink-faint { color: var(--ink-400); }
.bg-surface { background: var(--surface); }
.bg-surface-hover { background: var(--surface-hover); }
.text-brand { color: var(--brand-link); }
.badge-brand { background: var(--brand-100); color: var(--brand-ink); }
/* 实色填充（承白字）——Tailwind 配置无 DEFAULT 键时也保证可见，避免"白字白底" */
.bg-brand { background: var(--brand-solid); }
.bg-success { background: var(--success-solid); }
.bg-danger { background: var(--danger-solid); }
.bg-warning { background: var(--warning-solid); }
.hover\:bg-brand:hover { background: var(--brand-press); }
.hover\:bg-success:hover { background: var(--success-press); }
.hover\:bg-danger:hover { background: var(--danger-press); }
.hover\:bg-warning:hover { background: var(--warning-press); }
.ring-brand { box-shadow: 0 0 0 3px var(--ring); }

/* ── 表格 ─────────────────────────────────────────────────────────── */
.table-row { transition: background-color .12s ease; }
.table-row:hover { background-color: var(--table-hover); }

/* ── 徽章 ─────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .6rem;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 9999px;
  white-space: nowrap;
}
.badge-energy { background: var(--success-soft); color: var(--success); }

/* ── 分节 eyebrow（品牌蓝） ───────────────────────────────────────── */
.eyebrow {
  color: var(--brand-link);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

/* ── 侧栏（中性面，规范：激活项 brand-soft 底 + brand 文字 + 左指示条） ── */
.sidebar-shell {
  /* 宽度由本文件独占：模板里不能再写 Tailwind w-*（同优先级下后加载的 tailwind.css 会覆盖折叠宽度） */
  width: 224px;
  transition: width .2s ease;
  background: var(--sidebar-surface);
  color: var(--ink-900);
  border-right: 1px solid var(--line);
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-btn);
  color: var(--ink-2);
  transition: background-color .15s ease, color .15s ease;
}
.sidebar-link:hover {
  background: var(--surface-hover);
  color: var(--ink-900);
}
.sidebar-link svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.nav-active {
  background: var(--brand-soft);
  color: var(--brand-link);
  box-shadow: inset 3px 0 0 0 var(--brand);
}
.nav-active:hover {
  color: var(--brand-link);
  background: var(--brand-soft);
}

/* ── 侧栏分组折叠 ──────────────────────────────────────────────────── */
.nav-group { display: flex; flex-direction: column; }
.nav-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 0.75rem 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color .15s ease;
}
.nav-group-title:hover { color: var(--ink-900); }
.nav-group-chevron {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform .2s ease;
}
.nav-group.collapsed .sidebar-link { display: none; }
/* 折叠组同时隐藏组内小节头（navsub）与收藏空态提示——此前只藏链接，
   小节头「订单流」等在折叠态/rail 态残留成竖排残字（实测反馈）。 */
.nav-group.collapsed .nav-subhead,
.nav-group.collapsed .nav-pin-empty { display: none; }
.nav-group.collapsed .nav-group-chevron { transform: rotate(-90deg); }

/* ── 侧栏 Icon-Rail 折叠（Icon Rail：窄轨常驻 + title 提示） ─────────── */
.logo-rail { display: none; }
.sidebar-rail { width: 56px; }
/* 折叠态恒显 icon logo、隐藏横向 logo。
   !important：暗色主题的 :root.dark .logo-* 与本规则同优先级且源序在后，
   不加则折叠态会显示完整横向 logo（56px 内被裁切）而看不到 icon */
.sidebar-rail .logo-light,
.sidebar-rail .logo-dark { display: none !important; }
.sidebar-rail .logo-rail { display: block !important; }
/* 窄轨里头部内边距必须收紧：p-4(16px×2) 把 56px 轨压成 24px 内容宽 →
   头部里的任何文字（搜索入口 / 折叠按钮标签）都必然一个字符一行地竖排换行。 */
.sidebar-rail .sidebar-head { padding: .5rem .375rem; }
.sidebar-rail .sidebar-link { justify-content: center; padding: 0.5rem; }
.sidebar-rail .sidebar-link span { display: none; }
.sidebar-rail .sidebar-link svg { width: 1.25rem; height: 1.25rem; }
.sidebar-rail .nav-group-title { display: none; }
.sidebar-rail .nav-group-chevron { display: none; }
.sidebar-rail [data-action="toggleAllNav"] { display: none; }
/* nav 顶部「菜单 / 全部展开」头：窄轨里没有分组标题可读，整块隐藏（否则同样竖排换行） */
.sidebar-rail .nav-section-head { display: none; }
.sidebar-rail .nav-group.collapsed .sidebar-link { display: flex; }
/* rail 态恒隐文字类元素：组内小节头 / 收藏空态提示（图标轨只留图标）。 */
.sidebar-rail .nav-subhead,
.sidebar-rail .nav-pin-empty { display: none; }
/* 折叠按钮：窄轨只留居中图标。此前保留「收起/展开」文字——44px 内容宽在
   系统缩放（Windows 125%/150%）下容不下两个汉字，逐字换行成竖排（用户实测反馈）。
   状态反馈交给 title/aria-label（模板已带）。 */
.sidebar-rail .sidebar-rail-toggle { gap: 0; padding-left: .375rem; padding-right: .375rem; }
.sidebar-rail .sidebar-rail-toggle svg { display: block; }
.sidebar-rail .sidebar-rail-toggle .rail-label { display: none; }
/* 命令面板入口（#cmdk-trigger）：折叠态只留居中 🔍。
   原实现没有 rail 规则 → 56px 里「🔍 搜索 / 跳转… ⌘K」竖排换行并把入口撑破（用户实测反馈）。 */
.sidebar-rail #cmdk-trigger { justify-content: center; gap: 0; padding-left: .375rem; padding-right: .375rem; overflow: hidden; white-space: nowrap; }
.sidebar-rail #cmdk-trigger .rail-label,
.sidebar-rail #cmdk-trigger .cmd-k { display: none; }
/* 用户区（头像/姓名/登出）：窄轨只留居中头像 + 图标登出。
   同类实测反馈：56px 里姓名「Kerry」逐字母换行竖排、「登出」两字竖排。 */
.sidebar-rail .sidebar-foot { padding: .5rem .375rem; }
.sidebar-rail .sidebar-foot .flex.items-center { justify-content: center; gap: 0; margin-bottom: .25rem; }
.sidebar-rail .sidebar-user-name { display: none; }
.sidebar-rail .sidebar-logout-label { display: none; }
.sidebar-rail .sidebar-foot button[type="submit"] { justify-content: center; gap: 0; }
.sidebar-rail-toggle { transition: color .15s ease; }
.sidebar-rail-toggle:hover { color: var(--ink-900); }

/* ⛔ 禁止恢复「悬停飞展」(.sidebar-rail:hover{width:224px})：
   点「收起」时鼠标必然停在侧栏上，:hover 会立即把宽度顶回 224px →
   类切了、localStorage 也写了，但界面毫无变化，用户只能判定"收起/展开失效"
   （2026-09-16 实测反馈）。窄轨的可发现性改由 .sidebar-link 的 title 提示承担。 */

/* ── 顶栏（毛玻璃，双主题） ────────────────────────────────────────── */
.glass-topbar {
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(12px);
  border-color: var(--line);
}

/* ── 应用顶栏（文档流内，全断点）─────────────────────────────────────
   通知铃铛等全局工具放在这里，而不是 position:fixed 悬浮在内容上。
   历史问题：铃铛曾是 fixed top-4 right-16，在 39 个「页头右侧有操作按钮」的
   页面上压住按钮，其他页面因为布局不同又没压住 —— 用户反馈「有的压住有的没压住」。
   放进文档流后，任何页面都不可能再被压住（结构上不允许）。 */
.app-topbar { position: relative; z-index: 30; flex-shrink: 0; }

/* ── 页面切换：跨文档视图过渡（Chrome 126+/Safari 18.2+，其余浏览器优雅降级）──
   原来的整页硬刷新会有白屏闪断感；启用后同源导航默认交叉淡入淡出。 */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: anari-vt-out .16s ease both; }
::view-transition-new(root) { animation: anari-vt-in .22s ease both; }
/* 侧栏与顶栏是稳定外壳：让它们不参与过渡，避免整屏闪动 */
::view-transition-old(sidebar),
::view-transition-new(sidebar) { animation: none; mix-blend-mode: normal; }
@keyframes anari-vt-out { to { opacity: 0; } }
@keyframes anari-vt-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ── 动效（150-250ms + reduced-motion 归零） ──────────────────────── */
@keyframes anari-fade-up {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes anari-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.animate-fade-up { animation: anari-fade-up .22s ease-out both; }
.animate-fade-in { animation: anari-fade-in .18s ease both; }
.stagger > * { animation: anari-fade-up .25s ease-out both; }
.stagger > *:nth-child(2) { animation-delay: .04s; }
.stagger > *:nth-child(3) { animation-delay: .08s; }
.stagger > *:nth-child(4) { animation-delay: .12s; }
.stagger > *:nth-child(5) { animation-delay: .16s; }
.stagger > *:nth-child(6) { animation-delay: .2s; }

.text-gradient { color: var(--brand-link); }  /* 规范：无渐变文本 */

/* ── 按钮（无渐变，双主题） ───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 36px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  border-radius: var(--radius-btn);
  transition: filter .15s ease, box-shadow .15s ease, transform .1s ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.btn-secondary {
  background: var(--surface);
  color: var(--ink-900);
  border-color: var(--line);
}
.btn-secondary:hover { background: var(--surface-hover); border-color: var(--ink-3); }

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
}
.btn-ghost:hover { background: var(--surface-hover); color: var(--ink-900); }

.btn-danger {
  background: var(--danger);
  color: var(--on-brand);
}
.btn-warning {
  background: var(--warning);
  color: var(--on-brand);
}

.btn-sm { min-height: 30px; padding: 0.375rem 0.75rem; font-size: 0.75rem; }
.btn-xs { min-height: 26px; padding: 0.25rem 0.5rem; font-size: 0.75rem; }

.badge-status-neutral { background: var(--surface-hover); color: var(--ink-2); }
.badge-status-info    { background: var(--brand-soft); color: var(--brand-ink); }
.badge-status-success { background: var(--success-soft); color: var(--success); }
.badge-status-warning { background: var(--warning-soft); color: var(--warning); }
.badge-status-danger  { background: var(--danger-soft); color: var(--danger); }

/* ── 筛选胶囊 ─────────────────────────────────────────────────────── */
.filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--line);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.filter-pill:hover { border-color: var(--brand-300); color: var(--ink-900); }
.filter-pill-active {
  background: var(--brand-solid);
  color: var(--on-brand);
  border-color: var(--brand-solid);
}
.filter-pill-active:hover { color: var(--on-brand); }

/* ── 数据表格 ─────────────────────────────────────────────────────── */
.data-table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.data-table thead { background: var(--surface-hover); }
/* 单元格默认内边距用 :where() 降特异性（0,0,1）：
   组件提供"默认值"，模板里的 px-*/py-* 工具类仍可覆盖（此前组件写法特异性更高，
   导致 35 处单元格内边距工具类静默失效）。默认值取模板里最主流的 px-4 py-3（16/12），
   使手写表格迁入本组件后外观基本不变。 */
:where(.data-table) th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: normal;
  border-bottom: 1px solid var(--line);
}
:where(.data-table) td {
  padding: 0.75rem 1rem;
  color: var(--ink-900);
  border-bottom: 1px solid var(--line);
}
.data-table tbody tr { transition: background-color .12s ease; }
.data-table tbody tr:hover { background: var(--table-hover); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table th[scope="col"] { white-space: nowrap; }

/* ── 窄屏横滑表格的可读性（纯 CSS，惠及全部 .data-table 表格）───────────
   实测：390px 下 8 列表格宽 562px，横滑后首列（行标识：单号/SKU）滑出视野，
   用户不知道自己在看哪一行。修法：首列吸附 + 左右边缘渐隐提示可滑动（无需改标记）。 */
@media (max-width: 1023px) {
  .data-table th:first-child,
  .data-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);            /* 吸附列必须不透明，否则下层内容透出 */
    box-shadow: 1px 0 0 var(--line);       /* 与后列的分隔线（滚动时可见） */
  }
  .data-table tbody tr:hover td:first-child { background: var(--table-hover); }
  /* 表头首格需盖住表体首格（对角线同时 sticky：top 由 .sticky-head 提供） */
  .data-table thead th:first-child { z-index: 3; background: var(--surface-hover); }

  /* 操作列吸附：宽表横滑后「详情/收货」列常在视口外，滑到底才能点 —— 右列吸附让
     动作常驻。仅对显式标了 .sticky-actions 的表生效（末列必须是操作列）。 */
  .data-table.sticky-actions th:last-child,
  .data-table.sticky-actions td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--surface);
    box-shadow: -1px 0 0 var(--line);
  }
  .data-table.sticky-actions thead th:last-child { z-index: 3; background: var(--surface-hover); }
  .data-table.sticky-actions tbody tr:hover td:last-child { background: var(--table-hover); }
}

/* ── 侧栏「⭐ 常用」收藏 ──────────────────────────────────────────
   菜单 32 项 10 组太长（用户主诉），悬停 ★ 把高频页置顶到「常用」组，
   localStorage 按设备记忆，不动既有分组顺序。 */
.sidebar-link { position: relative; }
.sidebar-link .nav-pin {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: none; border: 0; background: none; cursor: pointer;
  color: var(--ink-400); padding: 2px; line-height: 0;
}
.sidebar-link .nav-pin svg { width: 12px; height: 12px; }
.sidebar-link:hover .nav-pin, .sidebar-link .nav-pin.nav-pin-on { display: block; }
.sidebar-link .nav-pin.nav-pin-on { color: var(--brand); }
.sidebar-link .nav-pin:hover { color: var(--brand); }
.nav-pin-item svg { color: var(--brand); }

/* 窄屏隐藏次要列：th 与对应 td 都加 .col-hide-sm（手机上少滑一半）。
   用 app.css 而不是 tailwind md:table-cell，避免每次都要重建产物。 */
@media (max-width: 767px) {
  .col-hide-sm { display: none; }
}
@media (min-width: 768px) {
  .col-hide-sm { display: table-cell; }
}

/* 窄屏看板：横滑列堆叠为卡片流（列宽是内联固定值，需 !important 覆盖）。
   实测 390px 下 /orders/board 内容 1398px、/production 2608px 挤进 ~358px 视口，
   必须横滑才能看到后列 —— 手机上改为纵向堆叠，每列占满宽度。 */
@media (max-width: 767px) {
  .stack-mobile { flex-direction: column !important; min-width: 0 !important; }
  .stack-mobile > * { width: 100% !important; }
}

/* 横滑容器边缘渐隐提示（经典 local/scroll 双层背景，无需 JS） */
.overflow-x-auto {
  background:
    linear-gradient(to right, var(--surface) 30%, color-mix(in srgb, var(--surface) 0%, transparent)) left center / 24px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, color-mix(in srgb, var(--surface) 0%, transparent)) right center / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--ink-900) 14%, transparent), transparent) left center / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink-900) 14%, transparent), transparent) right center / 10px 100% no-repeat scroll;
}
/* ── 表单 ─────────────────────────────────────────────────────────── */
.form-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
}
.form-input {
  width: 100%;
  min-height: 40px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ink-900);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-input::placeholder { color: var(--ink-3); }
.form-input:hover { border-color: var(--ink-3); }
.form-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
}
.form-input:disabled { background: var(--surface-hover); opacity: .65; cursor: not-allowed; }
select.form-input { appearance: auto; padding-right: 2rem; }
textarea.form-input { min-height: 80px; resize: vertical; }
.form-input-sm {
  min-height: 32px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
}
.form-error { color: var(--danger); font-size: 0.75rem; margin-top: 0.25rem; }
.form-hint  { color: var(--ink-3); font-size: 0.75rem; margin-top: 0.25rem; }

/* ── 空状态 ───────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--ink-3);
}
.empty-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface-hover);
  font-size: 1.75rem;
  margin-bottom: 1rem;
}
.empty-state-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 0.25rem;
}
.empty-state-desc { font-size: 0.8125rem; color: var(--ink-3); max-width: 24rem; }

/* ── 提示条（inline alert）────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  font-size: 0.875rem;
}
.alert-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: var(--danger); }
.alert-warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
.alert-success { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.alert-info    { background: var(--brand-soft);   color: var(--brand-ink);   border-color: var(--brand); }
.alert svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.125rem; }

/* ── 卡片标题栏 ───────────────────────────────────────────────────── */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-hover);
}
.card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-900);
}

/* ── 页面标题区 ───────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;       /* 多数派写法（原 flex-end 仅 11/38 页使用）*/
  justify-content: space-between;
  flex-wrap: wrap;           /* 窄屏：标题与操作按钮换行而不是挤压 */
  gap: 1rem;
  margin-bottom: 1.5rem;     /* 统一页头下边距（原模板里 mb-3/4/6 三种混用）*/
}
.page-header .page-title { margin: 0; }
.page-header-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.page-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.3;
}

/* ── 文本工具（语义化，双主题） ───────────────────────────────────── */
.text-ink   { color: var(--ink-900); }
.text-ink-2 { color: var(--ink-2); }
.text-ink-3 { color: var(--ink-3); }
.text-brand { color: var(--brand-link); }
.text-link  { color: var(--brand-link); }
.text-link:hover { text-decoration: underline; }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }
.bg-canvas  { background: var(--canvas); }
.bg-surface { background: var(--surface); }
.border-line { border-color: var(--line); }

/* 侧栏 logo 双主题切换 */
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not(.light) .logo-light { display: none; }
  :root:not(.light) .logo-dark { display: block; }
}
:root.dark .logo-light { display: none; }
:root.dark .logo-dark { display: block; }

/* 抽屉打开：锁背景滚动（drawer.js 会切换 body.drawer-open；此前无对应规则 → 静默无效） */
body.drawer-open { overflow: hidden; }

/* 移动端侧栏遮罩必须盖住所有悬浮控件（AI 助手球 #ai-fab 也是 z-40 且 DOM 在后，
   原层级下菜单打开时它仍浮在遮罩之上可点）；侧栏自身 z-50 仍在其上。 */
#overlay { z-index: 45; }

/* ── Tailwind 工具类兼容层（规范统一出口；!important 压过 Play CDN 运行时）
   旧模板里大量硬编码的 slate/blue/green/amber/red 等颜色，在完全迁移前
   先映射到语义 token，保证明暗双主题可读。新写模板应直接用 .btn/.badge/.card 等语义类。 ── */

/* 中性 */
.bg-white { background-color: var(--surface) !important; }
.bg-slate-50 { background-color: var(--surface-hover) !important; }
.bg-slate-100, .bg-slate-200, .bg-slate-300 { background-color: var(--surface-hover) !important; }
.text-slate-800, .text-slate-700 { color: var(--ink-900) !important; }
.text-slate-600 { color: var(--ink-2) !important; }
.text-slate-500, .text-slate-400 { color: var(--ink-3) !important; }
.border-slate-100, .border-slate-200, .border-slate-300 { border-color: var(--line) !important; }
.hover\:bg-slate-50:hover { background-color: var(--table-hover) !important; }
.hover\:bg-slate-100:hover { background-color: var(--surface-hover) !important; }
.hover\:bg-slate-200:hover { background-color: var(--surface-hover) !important; }
.hover\:text-slate-700:hover { color: var(--ink-900) !important; }
.hover\:text-slate-600:hover { color: var(--ink-2) !important; }
.hover\:border-slate-300:hover { border-color: var(--line) !important; }
.hover\:border-slate-400:hover { border-color: var(--ink-3) !important; }

/* divide-* / border-* 细分 */
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line) !important; }
.border-t-slate-100, .border-b-slate-100, .border-l-slate-100, .border-r-slate-100 { border-color: var(--line) !important; }
.border-t-slate-200, .border-b-slate-200, .border-l-slate-200, .border-r-slate-200 { border-color: var(--line) !important; }

/* 品牌蓝 */
.bg-blue-600, .bg-blue-500, .bg-blue-700 { background-color: var(--brand-solid) !important; }
.text-blue-600, .text-blue-500, .text-blue-700 { color: var(--brand-link) !important; }
.border-blue-600, .border-blue-500 { border-color: var(--brand) !important; }
.hover\:text-blue-600:hover, .hover\:text-blue-500:hover, .hover\:text-blue-700:hover { color: var(--brand-link) !important; }
.hover\:bg-blue-700:hover { background-color: var(--brand-press) !important; }
.hover\:border-blue-300:hover { border-color: var(--brand-300) !important; }
.hover\:border-blue-600:hover { border-color: var(--brand) !important; }
.bg-blue-50 { background-color: var(--brand-soft) !important; }
.bg-blue-100 { background-color: var(--brand-soft) !important; }
.text-blue-700, .text-blue-800 { color: var(--brand-link) !important; }

/* 成功绿 */
.bg-green-50, .bg-green-100, .bg-emerald-50, .bg-emerald-100 { background-color: var(--success-soft) !important; }
.text-green-600, .text-green-700, .text-emerald-600, .text-emerald-700 { color: var(--success) !important; }
.border-green-200, .border-emerald-200 { border-color: var(--success) !important; }
.hover\:bg-green-100:hover, .hover\:bg-green-200:hover, .hover\:bg-emerald-100:hover { background-color: var(--success-soft) !important; }
.bg-green-600, .bg-emerald-600 { background-color: var(--success) !important; }
.hover\:bg-green-700:hover, .hover\:bg-emerald-700:hover { background-color: var(--success) !important; }

/* 警告琥珀 */
.bg-amber-50, .bg-amber-100, .bg-yellow-50, .bg-yellow-100 { background-color: var(--warning-soft) !important; }
.text-amber-600, .text-amber-700, .text-yellow-600, .text-yellow-700 { color: var(--warning) !important; }
.border-amber-200, .border-yellow-200 { border-color: var(--warning) !important; }
.hover\:bg-amber-100:hover, .hover\:bg-amber-200:hover, .hover\:bg-yellow-100:hover { background-color: var(--warning-soft) !important; }
.bg-amber-600 { background-color: var(--warning-solid) !important; }
.hover\:bg-amber-700:hover { background-color: var(--warning) !important; }

/* 危险红 */
.bg-red-50, .bg-red-100 { background-color: var(--danger-soft) !important; }
.text-red-500, .text-red-600, .text-red-700 { color: var(--danger) !important; }
.border-red-200, .border-red-400 { border-color: var(--danger) !important; }
.hover\:bg-red-100:hover, .hover\:bg-red-200:hover { background-color: var(--danger-soft) !important; }
.hover\:text-red-700:hover { color: var(--danger) !important; }
.bg-red-600 { background-color: var(--danger-solid) !important; }
.hover\:bg-red-700:hover { background-color: var(--danger) !important; }

/* 其他强调色 */
.bg-purple-50, .bg-purple-100 { background-color: var(--brand-soft) !important; }
.text-purple-600, .text-purple-700 { color: var(--brand-link) !important; }

/* 旧 energy 绿 → 品牌蓝 */
.text-energy-500, .text-energy { color: var(--brand-link) !important; }
.bg-energy-500, .bg-energy { background-color: var(--brand-solid) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 第四轮迁移补充语义类 */
.bg-ink { background-color: var(--ink-900); }
.bg-ink-3 { background-color: var(--ink-3); }
.bg-brand-soft { background-color: var(--brand-soft); }
.bg-success-soft { background-color: var(--success-soft); }
.bg-warning-soft { background-color: var(--warning-soft); }
.bg-danger-soft { background-color: var(--danger-soft); }
.border-brand { border-color: var(--brand); }
.border-success { border-color: var(--success); }
.border-warning { border-color: var(--warning); }
.border-danger { border-color: var(--danger); }
.text-link { color: var(--brand-link); }
.hover\:bg-brand-press:hover { background-color: var(--brand-press); }
.hover\:bg-danger-press:hover { background-color: var(--danger-press); }
.hover\:text-link:hover { color: var(--brand-link); }
.hover\:border-ink-3:hover { border-color: var(--ink-3); }
.bg-table-hover { background-color: var(--table-hover); }
.hover\:bg-table-hover:hover { background-color: var(--table-hover); }

/* 第五轮补充 */
.border-brand-soft { border-color: var(--brand-100); }
.border-danger-soft { border-color: rgba(220, 38, 38, .20); }
.border-warning-soft { border-color: rgba(217, 119, 6, .25); }
.bg-warning-press { background-color: var(--warning-press); }
.hover\:bg-warning-press:hover { background-color: var(--warning-press); }
.hover\:bg-warning-soft:hover { background-color: var(--warning-soft); }
.bg-success-press { background-color: var(--success-press); }
.hover\:bg-success-press:hover { background-color: var(--success-press); }
.hover\:bg-danger-soft:hover { background-color: var(--danger-soft); }

/* ── 语义 token 的透明度变体（补充） ── */
.bg-brand\/10 { background-color: color-mix(in srgb, var(--brand) 10%, transparent); }
.bg-brand\/15 { background-color: color-mix(in srgb, var(--brand) 15%, transparent); }
.bg-brand-500\/10 { background-color: color-mix(in srgb, var(--brand-500) 10%, transparent); }
.bg-brand-600\/20 { background-color: color-mix(in srgb, var(--brand-600) 20%, transparent); }
.bg-energy-500\/10 { background-color: color-mix(in srgb, var(--energy-500) 10%, transparent); }
.bg-surface-hover\/60 { background-color: color-mix(in srgb, var(--surface-hover) 60%, transparent); }
.hover\:bg-surface-hover\/60:hover { background-color: color-mix(in srgb, var(--surface-hover) 60%, transparent); }
.bg-brand-soft\/40 { background-color: color-mix(in srgb, var(--brand-soft) 40%, transparent); }
.bg-brand-soft\/50 { background-color: color-mix(in srgb, var(--brand-soft) 50%, transparent); }
.hover\:bg-brand-soft\/40:hover { background-color: color-mix(in srgb, var(--brand-soft) 40%, transparent); }
.bg-danger-soft\/40 { background-color: color-mix(in srgb, var(--danger-soft) 40%, transparent); }
.bg-warning-soft\/30 { background-color: color-mix(in srgb, var(--warning-soft) 30%, transparent); }
.bg-warning-soft\/50 { background-color: color-mix(in srgb, var(--warning-soft) 50%, transparent); }
.bg-success-soft\/50 { background-color: color-mix(in srgb, var(--success-soft) 50%, transparent); }
.hover\:text-danger\/80:hover { color: color-mix(in srgb, var(--danger) 80%, transparent); }
.dark .bg-canvas\/95 { background-color: color-mix(in srgb, var(--canvas) 95%, transparent); }

/* 第六轮补充 */
.divide-line > :not([hidden]) ~ :not([hidden]) { border-color: var(--line); }

/* ── PO 看板拖放（kanban drag & drop） ── */
.kanban-card[data-po-id], .kanban-card a[data-po-id] { cursor: grab; }
.kanban-card a[data-po-id]:active { cursor: grabbing; }
.kanban-card.dragging { opacity: .55; transform: rotate(1.5deg) scale(1.02); box-shadow: var(--shadow-card); }
.kanban-col { transition: background-color 150ms ease-out, outline-color 150ms ease-out; outline: 1px dashed transparent; outline-offset: 2px; }
.kanban-col.drop-ok { outline-color: var(--brand); background: var(--brand-soft); }
.kanban-move {
  position: absolute; top: 8px; right: 8px;
  font-size: 11px; line-height: 1.4; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 1px 4px; cursor: pointer; opacity: .75; transition: opacity 150ms ease-out;
}
.kanban-card:hover .kanban-move, .kanban-move:focus-visible { opacity: 1; }
.kanban-move:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.kanban-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 8px);
  z-index: 60; max-width: 90vw;
  padding: 10px 16px; border-radius: 12px; font-size: 13px; font-weight: 500;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-card); opacity: 0; pointer-events: none;
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}
.kanban-toast.show { opacity: 1; transform: translate(-50%, 0); }
.kanban-toast.is-error { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
@media (prefers-reduced-motion: reduce) {
  .kanban-card.dragging, .kanban-col, .kanban-move, .kanban-toast { transition: none; transform: none; }
}


/* ── UX 抛光（V2 研究）── */
/* 长列表粘性表头：滚动时表头常驻，行上下文不丢 */
.data-table.sticky-head th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line);
}

/* 表格行 hover 反馈强化（扫描长表的行追踪） */
.data-table tbody tr { transition: background-color 120ms ease-out; }
.data-table tbody tr:hover { background: var(--surface-hover); }

/* 骨架屏 shimmer（加载占位统一动效） */
@keyframes skeleton-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--surface-hover) 25%, var(--line) 50%, var(--surface-hover) 75%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

/* 焦点可见性（a11y：键盘导航全站可达） */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 跳转主内容（a11y：键盘用户一键跳过导航） ── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 16px; background: var(--brand-solid); color: var(--on-brand);
  border-radius: 0 0 12px 0; font-size: 13px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── HTMX 全局加载进度条（顶部 2px，仅请求期间可见，GPU 合成） ── */
#hx-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90;
  background: var(--brand); transform: scaleX(0); transform-origin: left center;
  opacity: 0; transition: transform 200ms ease-out, opacity 200ms ease-out;
}
#hx-progress.active {
  opacity: 1; transform: scaleX(0.9);
  transition: transform 8s cubic-bezier(0.1, 0.8, 0.2, 1), opacity 150ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  #hx-progress, #hx-progress.active { transition: opacity 150ms ease-out; transform: scaleX(1); }
}

/* ── 表格密度切换（紧凑/舒适，localStorage 持久化，作用于 .data-table） ── */
.density-compact .data-table th,
.density-compact .data-table td {
  padding-top: .3rem; padding-bottom: .3rem; font-size: .8125rem;
}
.density-compact .data-table { line-height: 1.35; }
/* 手写表格（模板里大量 class="w-full text-sm" 的表格，非 .data-table）：
   原规则只覆盖 .data-table → 12 个挂了「紧凑」工具条的页面里有 10 个点了没反应 */
.density-compact main table th,
.density-compact main table td {
  padding-top: .3rem !important; padding-bottom: .3rem !important; font-size: .8125rem;
}

/* ── 保存视图下拉（list_toolbar） ── */
.views-menu {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 50;
  min-width: 220px; max-width: 320px; padding: 4px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-lg);
}
.views-item {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  padding: 7px 10px; border: none; background: none; cursor: pointer;
  border-radius: 8px; font-size: 12px; color: var(--ink-900); text-decoration: none;
}
.views-item:hover { background: var(--surface-hover); }
.views-q { font-size: 10px; color: var(--ink-400); }
.views-empty { padding: 10px 12px; font-size: 11px; color: var(--ink-400); }
.views-danger { color: var(--danger); }

/* 键盘快捷键提示 <kbd> */
.kbd {
  display: inline-block; padding: 0 4px; border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 4px; background: var(--surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; color: var(--ink-2);
}

/* ── 移动端：批量操作条吸顶（长列表勾选时不丢失操作入口） ── */
@media (max-width: 768px) {
  .bulk-bar {
    position: sticky; top: 0; z-index: 20;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 8px; padding: 6px 8px;
  }
}

/* ── 回到顶部（长列表滚动后出现，位于 AI 助手之上） ── */
.scroll-top {
  position: fixed; right: 20px; bottom: 80px; z-index: 39;
  width: 40px; height: 40px; border-radius: 9999px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-card); color: var(--ink-2); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.scroll-top:hover { background: var(--surface-hover); color: var(--ink-900); }
@media (prefers-reduced-motion: reduce) { .scroll-top { scroll-behavior: auto; } }

/* ── 移动端详情抽屉（仅 <=768px 显示） ── */
.drawer { position: fixed; inset: 0; z-index: 65; display: flex; justify-content: flex-end; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.drawer-panel {
  position: relative; width: min(560px, 100vw); height: 100%;
  display: flex; flex-direction: column; background: var(--surface);
  box-shadow: -8px 0 32px rgba(0, 0, 0, .25);
  animation: drawer-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes drawer-in { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.drawer-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.drawer-head [data-drawer-title] { flex: 1; min-width: 0; font-size: 14px; color: var(--ink-900); }
.drawer-body { flex: 1; overflow-y: auto; padding: 12px; }
@media (min-width: 769px) { .drawer { display: none; } }
@media (prefers-reduced-motion: reduce) { .drawer-panel { animation: none; } }

/* ── 视觉隐藏（仅屏幕阅读器可见） ──
   供表头空操作列等无可见文案的单元格使用。Tailwind 亦内置同名类，
   此处显式定义一次，避免预构建产物不含该类时文案丢失。 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

/* ── 移动端：底部导航留白（<768px 固定 Tab 栏不遮挡页面尾部内容） ──
   仅对真正渲染了门户底部导航的页面生效，登录/注册等无导航页不受影响。 */
@media (max-width: 767px) {
  body:has(#portal-mobile-nav) {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
  /* AI 助手 FAB：置于「更多」抽屉（z-index 56）与 Tab 栏（55）之上，
     并与抽屉纵向错开，避免遮挡抽屉底部入口。 */
  #portal-copilot-root {
    bottom: 128px !important;
    z-index: 57 !important;
  }
}

/* ── 响应式栅格补齐（预构建 tailwind 仅生成 md/lg 变体） ──
   门户表单/统计卡在 <640px 单列、>=640px 多列。 */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 对象级 AI 状态 chip + 统一 AI 动作条 ──────────────────────────────
   审计：「每个业务对象带 AI 状态」/ AI Action Button(Generate/Analyze/Recommend/Approve/Execute)。
   全部消费语义令牌（--surface/--line/--success-soft/--brand-soft…），无硬编码色、双主题自适应。
   状态 chip 同时用图标 + 文案编码，颜色不是唯一信息通道（WCAG 1.4.1）。 */
.ai-object-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.ai-insight {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: var(--surface-hover);
  color: var(--ink-2);
  text-decoration: none;
}
.ai-insight__icon { font-size: 0.82rem; line-height: 1; }
.ai-insight--ok     { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.ai-insight--info   { background: var(--brand-soft);   color: var(--brand-ink); border-color: var(--brand); }
.ai-insight--warn   { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
.ai-insight--danger { background: var(--danger-soft);  color: var(--danger); border-color: var(--danger); }
.ai-insight--empty  { background: var(--surface-hover); color: var(--ink-2); border-color: var(--line); }
a.ai-insight:hover { filter: brightness(1.03); text-decoration: underline; }
a.ai-insight:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }

.ai-action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}
.ai-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 30px;
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-900);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ai-action:hover { background: var(--surface-hover); border-color: var(--brand-300); }
.ai-action:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.ai-action[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ai-action[aria-disabled="true"]:hover { background: var(--surface); border-color: var(--line); }
.ai-action[aria-busy="true"] { cursor: progress; }
.ai-action__icon { font-size: 0.85rem; line-height: 1; }
.ai-action--approve, .ai-action--execute {
  background: var(--brand-soft);
  border-color: var(--brand-300);
  color: var(--brand-ink);
}
.ai-action--approve:hover, .ai-action--execute:hover { background: var(--brand-100); }
.ai-action-bar__result { flex-basis: 100%; font-size: 0.72rem; line-height: 1.5; color: var(--ink-2); }
.ai-action-bar__result[data-ai-tone="ok"]     { color: var(--success); }
.ai-action-bar__result[data-ai-tone="warn"]   { color: var(--warning); }
.ai-action-bar__result[data-ai-tone="danger"] { color: var(--danger); }
.ai-action-bar__result[data-ai-tone="info"]   { color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .ai-action { transition: none; } }


/* ── 移动端表格 → 卡片（table-cards.js 渐进增强）─────────────────────────
   仅 ≤640px 生效；桌面端保持原表格（排序/粘性表头/横滑不变）。 */
@media (max-width: 640px) {
  table.table-cards thead { display: none; }
  table.table-cards tbody tr {
    display: block;
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
  }
  table.table-cards tbody td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border: 0;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  table.table-cards tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--ink-400);
    font-size: 11px;
    font-weight: 400;
    text-align: left;
  }
  table.table-cards tbody td[data-label=""]::before { content: none; }
  table.table-cards tbody td:empty { display: none; }
}