/* 2026-10-21 grok：UI 规范 v1 — 第 1 批全局归一（docs/ui-refresh/DESIGN-SPEC.md）
   只做低风险、按结构定位的统一：主色、页头、按钮禁用态、小字号下限、手机宽表格横滑。 */
:root {
  --qp-space-1: 4px; --qp-space-2: 8px; --qp-space-3: 12px; --qp-space-4: 16px; --qp-space-6: 24px; --qp-space-8: 32px;
  --qp-fs-caption: 12px; --qp-fs-small: 13px; --qp-fs-body: 14px; --qp-fs-card-title: 16px; --qp-fs-page-title: 20px; --qp-fs-kpi: 28px;
  --qp-chart-1: var(--qp-accent); --qp-chart-2: #64748b; --qp-chart-3: #34c759; --qp-chart-4: #ff9500; --qp-chart-5: #af52de; --qp-chart-6: #e5484d;
}
/* 1. 主色：页面里写死的蓝色实心主按钮/选中页签 → 品牌色 */
button.bg-blue-600.text-white, a.bg-blue-600.text-white, button.bg-blue-500.text-white, a.bg-blue-500.text-white {
  background-color: var(--qp-accent) !important; border-color: var(--qp-accent) !important;
}
button.bg-blue-600.text-white:hover:not(:disabled), a.bg-blue-600.text-white:hover, button.bg-blue-500.text-white:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--qp-accent) 88%, #000) !important;
}
/* 2. 页头：眉标胶囊统一 accent-soft；标题 20/600 */
span.rounded-full[class*="tracking-[0.18em]"], span.rounded-full[class*="tracking-[0.2em]"] {
  background: var(--qp-accent-soft) !important; color: var(--qp-accent-text) !important;
  font-size: 11px !important; letter-spacing: 0.08em !important; padding: 2px 10px !important; font-weight: 600 !important;
}
h1.text-xl.font-bold { font-size: var(--qp-fs-page-title) !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: -0.01em; }
/* 3. 禁用态：降不透明度，不换浅色（避免看起来像可点） */
button:disabled.text-white, button[disabled].text-white { opacity: 0.45 !important; cursor: not-allowed; }
/* 4. 小字号下限 */
.text-\[9px\], .text-\[10px\] { font-size: 11px !important; }
@media (max-width: 768px) {
  h1.text-xl.font-bold { font-size: 18px !important; }
  .text-\[11px\]:not(span.rounded-full):not([class*="rounded-full"]) { font-size: 12px !important; }
  /* 5. 手机宽表格（≥5 列）：外层横滑，表格保持可读最小宽，禁止逐字换行 */
  :has(> table:has(th:nth-child(5))) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  table:has(th:nth-child(5)) { min-width: 680px; }
  table:has(th:nth-child(5)) th { white-space: nowrap; }
  table:has(th:nth-child(5)) td { min-width: 64px; }
}

/* ===== 第 2 批（2026-10-21）：工具栏式页头、空状态、KPI 磁贴、手机表格单元格 ===== */
/* 6. 工具栏式页头（我的任务/应用市场/轻项目协作）：16px → 18px/600 */
header h1.text-base.font-bold, div > h1.text-base.font-bold { font-size: 18px !important; line-height: 1.3 !important; font-weight: 600 !important; }
/* 7. 空状态：去 emoji，统一线性图标 + 中性浅底 */
div.border-dashed.text-center:has(> div.text-4xl:first-child) {
  border: 1px dashed var(--qp-border-strong) !important; background: var(--qp-bg-subtle) !important; border-radius: 12px !important;
  padding: 40px 24px !important; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
div.border-dashed.text-center > div.text-4xl:first-child {
  font-size: 0 !important; line-height: 0 !important; width: 44px; height: 44px; background-color: var(--qp-text-faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center / contain no-repeat;
}
div.border-dashed.text-center:has(> div.text-4xl:first-child) > h2 { font-size: 14px !important; font-weight: 600 !important; margin-top: 12px !important; }
div.border-dashed.text-center:has(> div.text-4xl:first-child) > p { font-size: 13px !important; color: var(--qp-text-secondary) !important; max-width: 320px; }
@media (max-width: 768px) {
  header h1.text-base.font-bold, div > h1.text-base.font-bold { font-size: 17px !important; }
  /* 8. KPI 磁贴：手机 2 列、紧凑（单卡 ≤ ~90px） */
  section.grid.grid-cols-1:has(> button:nth-child(2) .text-3xl) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-bottom: 16px !important; }
  section.grid:has(> button .text-3xl) > button { padding: 12px !important; border-radius: 12px !important; }
  section.grid:has(> button .text-3xl) > button .text-3xl { font-size: 22px !important; line-height: 1.2 !important; }
  section.grid:has(> button .text-3xl) > button .mt-3 { margin-top: 6px !important; }
  section.grid:has(> button .text-3xl) > button p { margin-top: 4px !important; font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 9. 宽表格单元格：单行省略，避免「曳引/客梯」竖排 */
  table:has(th:nth-child(5)) td { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
  div.border-dashed.text-center:has(> div.text-4xl:first-child) { padding: 32px 16px !important; min-height: 180px; }
}

/* ===== 第 3 批（2026-10-21）：分段切换、手机筛选栏、按钮圆角 ===== */
/* 10. 分段切换：灰底胶囊容器 + 选中白底（替代品牌色实心块），仅作用于「选中=主色实心、其余=灰字」的按钮组 */
div:has(> button.text-white:is([class*="bg-[var(--qp-accent)]"], .bg-blue-600)):has(> button[class*="text-gray-"]):not(:has(> button:nth-child(7))):not(:has(> button.border)) {
  background: rgba(0,0,0,0.045) !important; border-color: transparent !important; border-radius: 10px !important; padding: 3px !important; gap: 2px !important;
}
div:has(> button.text-white:is([class*="bg-[var(--qp-accent)]"], .bg-blue-600)):has(> button[class*="text-gray-"]):not(:has(> button:nth-child(7))):not(:has(> button.border)) > button {
  border-radius: 8px !important; border: 0 !important;
}
div:has(> button[class*="text-gray-"]):not(:has(> button:nth-child(7))):not(:has(> button.border)) > button.text-white:is([class*="bg-[var(--qp-accent)]"], .bg-blue-600) {
  background: #fff !important; color: var(--qp-text) !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.04) !important;
}
/* 11. 次要按钮圆角统一 8px */
button.rounded-xl.px-4.py-2, button.rounded-xl.px-3.py-2 { border-radius: 8px !important; }
@media (max-width: 768px) {
  /* 12. 手机筛选栏：搜索框整行，下拉/查询两两一行 */
  :is(div,section).flex-wrap:has(> select):has(> button):has(> input, > div > input) {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; align-items: stretch;
  }
  :is(div,section).flex-wrap:has(> select):has(> button):has(> input, > div > input) > * { width: 100% !important; min-width: 0 !important; margin: 0 !important; }
  :is(div,section).flex-wrap:has(> select):has(> button):has(> input, > div > input) > :is(input, div:has(> input)) { grid-column: 1 / -1; order: -1; }
  :is(div,section).flex-wrap:has(> select):has(> button):has(> input, > div > input) > :is(select, input, button) { min-height: 40px; font-size: 14px; }
}

/* ===== 第 4 批（2026-10-21）：告警条统一 ===== */
/* 13. 黄色告警条：统一 warning-soft 底、细边、圆角 12、左侧色条 */
:is(div,section,p).border-amber-200.bg-amber-50:not(.rounded-full) {
  background: #fff8eb !important; border: 1px solid #fde3b0 !important; border-left: 3px solid var(--qp-warning) !important;
  border-radius: 12px !important; color: #8a5300 !important;
}
:is(div,section).border-emerald-200.bg-emerald-50:not(.rounded-full) { border-left: 3px solid var(--qp-success) !important; border-radius: 12px !important; }
:is(div,section).border-red-200.bg-red-50:not(.rounded-full):not(.text-center) { border-left: 3px solid var(--qp-danger) !important; border-radius: 12px !important; }

/* ===== 第 5 批（2026-10-21）：去卡中卡、错误态图标 ===== */
/* 14. 「灰底外框 + 白卡」双层卡（16 个页面）→ 单层卡：外框透明，内卡 1px 边框、圆角 12、无阴影 */
:is(div,section)[class*="rounded-[1.25rem]"].border-gray-200.bg-gray-100.p-1\.5 { background: transparent !important; border-color: transparent !important; padding: 0 !important; box-shadow: none !important; }
:is(div,section)[class*="rounded-[1.25rem]"].border-gray-200.bg-gray-100.p-1\.5 > div[class*="rounded-[calc("] { border: 1px solid var(--qp-border) !important; border-radius: 12px !important; box-shadow: none !important; }
/* 15. 整页加载失败：⚠️ emoji → 线性告警图标（danger 色） */
div.border-red-200.bg-red-50.text-center > div.text-4xl:first-child {
  font-size: 0 !important; line-height: 0 !important; width: 40px; height: 40px; margin: 0 auto; background-color: var(--qp-danger);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center / contain no-repeat;
}
div.border-red-200.bg-red-50.text-center { border-radius: 12px !important; }

/* ===== 第 10 批（2026-10-21）：全行业包一致性（共享） ===== */
/* 16. 表格容器：任何直接包裹 <table> 的容器在窄屏（含 768 平板）横向滚动，不撑破页面 */
:is(div,section):has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
/* 17. 表格数字等宽对齐；表头统一样式 */
table td, table th { font-variant-numeric: tabular-nums; }
table thead th { font-weight: 600; color: var(--qp-text-secondary, #6b7280); white-space: nowrap; }
/* 18. 最小字号 11px（9/10px 在手机上不可读：质量/HR/维保/报价共 ~40 处） */
[class*="text-[9px]"], [class*="text-[10px]"] { font-size: 11px !important; }
/* 19. 触屏点击区域：小号按钮/链接最低 32px（WCAG 2.5.8），不改桌面鼠标密度 */
@media (pointer: coarse) {
  :is(button, a[role="button"], [role="tab"]):is(.h-6, .h-7, .py-0\.5, .py-1) { min-height: 32px; }
  :is(button, [role="checkbox"]).h-5.w-5, button.h-6.w-6, button.h-7.w-7 { min-width: 32px; min-height: 32px; }
}
/* 20. 对话框/抽屉：手机上不超出视口，内容可滚动 */
@media (max-width: 640px) {
  [role="dialog"] { max-width: 100vw; max-height: 100dvh; }
  [role="dialog"] > div { max-height: calc(100dvh - 24px); overflow-y: auto; }
}
/* 21. 深色模式（网页/手机，不止桌面端）登录/找回密码主按钮：slate-900 在深色卡片上几乎不可见 → 品牌蓝 */
html.theme-dark .login-modal-panel button[type='submit'] { color: #fff !important; background: var(--qp-accent, #2563eb) !important; }
html.theme-dark .login-modal-panel button[type='submit']:hover:not(:disabled) { filter: brightness(1.08); }

/* ===== 第 11 批（2026-10-21 phase2，登录态截图审计发现）===== */
/* 22. 深色模式：分段控件选中项原为 #fff 底 + 浅色字 → 白底白字不可见（电梯台账「电梯台账/维保合同/维保记录」等） */
html.theme-dark div:has(> button.text-white:is([class*="bg-[var(--qp-accent)]"], .bg-blue-600)):has(> button[class*="text-gray-"]):not(:has(> button:nth-child(7))):not(:has(> button.border)) {
  background: rgba(255,255,255,0.06) !important;
}
html.theme-dark div:has(> button[class*="text-gray-"]):not(:has(> button:nth-child(7))):not(:has(> button.border)) > button.text-white:is([class*="bg-[var(--qp-accent)]"], .bg-blue-600) {
  background: #48484a !important; color: #fff !important; box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}
/* 23. 深色模式：黄/绿/红告警条不再使用浅色底（原 #fff8eb 在深色页上刺眼） */
html.theme-dark :is(div,section,p).border-amber-200.bg-amber-50:not(.rounded-full) {
  background: rgba(255,149,0,0.10) !important; border-color: rgba(255,149,0,0.28) !important; border-left-color: var(--qp-warning) !important; color: #ffd08a !important;
}
html.theme-dark :is(div,section).border-emerald-200.bg-emerald-50:not(.rounded-full) { background: rgba(52,199,89,0.10) !important; border-color: rgba(52,199,89,0.28) !important; }
html.theme-dark :is(div,section).border-red-200.bg-red-50:not(.rounded-full) { background: rgba(229,72,77,0.10) !important; border-color: rgba(229,72,77,0.3) !important; }
/* 24. 深色模式：原生输入框（number/date/text）白底 → 跟随表面色 */
html.theme-dark :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea).bg-white { background: var(--qp-bg-subtle, #2c2c2e) !important; color: var(--qp-text) !important; }
/* 25. 触屏：会话列表删除按钮 22px → 32px；模式角标最小 11px */
@media (pointer: coarse) { .qp-session-delete { width: 32px !important; height: 32px !important; } }
.qp-mode-badge { font-size: max(11px, 1em) !important; }