/* ════════════════════════════════════════════════════════
   温州指数系统 — 增强设计语言 v2.0
   shared-enhanced.css — UX/可访问性/暗色模式升级

   设计系统: Data-Dense Dashboard
   主色: #1E40AF 辅色: #3B82F6 强调: #D97706
   字体: Fira Sans / Microsoft YaHei
   ════════════════════════════════════════════════════════ */

/* ── 暗色模式 CSS 变量 ── */
:root {
  --enh-transition: 200ms ease;
  --enh-radius: 10px;
}

[data-theme="dark"],
.dark-mode {
  --bg: #0f172a;
  --bg2: #1e293b;
  --bg3: #334155;
  --card: #1e293b;
  --card2: #273548;
  --border: #334155;
  --border2: #475569;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --muted2: #64748b;
  --shadow: 0 4px 24px rgba(0,0,0,.35);
}

@media (prefers-color-scheme: dark) {
  body.theme-auto {
    --bg: #0f172a;
    --bg2: #1e293b;
    --bg3: #334155;
    --card: #1e293b;
    --card2: #273548;
    --border: #334155;
    --border2: #475569;
    --text: #f1f5f9;
    --muted: #94a3b8;
    --muted2: #64748b;
  }
  body.theme-auto {
    background: var(--bg, #0f172a);
    color: var(--text, #f1f5f9);
  }
  body.theme-auto .card,
  body.theme-auto [class*="card"] {
    background: var(--card, #1e293b);
  }
}

/* ── 跳过导航链接（可访问性） ── */
.enh-skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  background: #1E40AF;
  color: #fff;
  padding: 10px 20px;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: top var(--enh-transition);
}
.enh-skip-link:focus {
  top: 0;
  outline: 3px solid #D97706;
  outline-offset: 2px;
}

/* ── 焦点环（键盘导航可访问性） ── */
:focus-visible {
  outline: 2.5px solid #1E40AF !important;
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* ── 减弱动画支持 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 统一的点击指针 ── */
button, [role="button"], [tabindex]:not([tabindex="-1"]),
select, input[type="submit"], input[type="button"], input[type="reset"],
summary, label[for], .clickable, [onclick] {
  cursor: pointer;
}

/* ── 最小触摸目标尺寸 ── */
button, [role="button"], .tab-btn, .nav-item, .opt, .betbtn,
input[type="checkbox"], input[type="radio"], select {
  min-height: 44px;
  min-width: 44px;
}

/* ── 加载指示器 ── */
.enh-loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--border, #e2e8f0);
  border-top-color: #1E40AF;
  border-radius: 50%;
  animation: enh-spin .6s linear infinite;
}
@keyframes enh-spin {
  to { transform: rotate(360deg); }
}

/* ── 骨架屏（数据加载占位） ── */
.enh-skeleton {
  background: linear-gradient(90deg, var(--bg2, #e2e8f0) 25%, var(--bg3, #f1f5f9) 50%, var(--bg2, #e2e8f0) 75%);
  background-size: 200% 100%;
  animation: enh-shimmer 1.5s infinite;
  border-radius: 8px;
  height: 16px;
}
@keyframes enh-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 空状态提示 ── */
.enh-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted, #64748b);
  font-size: 14px;
}
.enh-empty .enh-empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: .5;
}

/* ── 统一过渡动画 ── */
.enh-fade {
  animation: enh-fadeIn .3s ease;
}
@keyframes enh-fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 卡片悬浮效果 ── */
.enh-card-hover {
  transition: transform var(--enh-transition), box-shadow var(--enh-transition);
}
.enh-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}

/* ── 可访问的屏幕阅读器专用文本 ── */
.enh-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;
}

/* ── 表单增强 ── */
.enh-input {
  padding: 10px 14px;
  border: 1.5px solid var(--border, #d4d9f0);
  border-radius: var(--enh-radius);
  font-size: 14px;
  background: var(--card, #fff);
  color: var(--text, #1e293b);
  transition: border-color var(--enh-transition), box-shadow var(--enh-transition);
  min-height: 44px;
  font-family: inherit;
}
.enh-input:focus {
  border-color: #1E40AF;
  box-shadow: 0 0 0 3px rgba(30,64,175,.15);
  outline: none;
}
.enh-input::placeholder {
  color: var(--muted2, #9ca3af);
}

/* ── 按钮增强 ── */
.enh-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--enh-radius);
  font-weight: 600;
  font-size: 14px;
  border: none;
  transition: all var(--enh-transition);
  min-height: 44px;
  font-family: inherit;
}
.enh-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.enh-btn-primary {
  background: linear-gradient(135deg, #1E40AF, #3B82F6);
  color: #fff;
  box-shadow: 0 4px 14px rgba(30,64,175,.3);
}
.enh-btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(30,64,175,.4);
}
.enh-btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

/* ── 屏幕阅读器通知区域 ── */
#enh-announcer {
  position: fixed;
  bottom: 0; left: 0;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

/* ── 暗色模式切换按钮 ── */
.enh-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border, #d4d9f0);
  background: var(--card, #fff);
  cursor: pointer;
  transition: all var(--enh-transition);
  font-size: 18px;
}
.enh-theme-toggle:hover {
  border-color: #1E40AF;
  background: rgba(30,64,175,.05);
}

/* ── Toast 通知增强 ── */
.enh-toast {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9999;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 14px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  font-size: 14px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
  max-width: 360px;
}
.enh-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.enh-toast-success { border-left: 4px solid #10b981; }
.enh-toast-error   { border-left: 4px solid #ef4444; }
.enh-toast-warning { border-left: 4px solid #f59e0b; }
.enh-toast-info    { border-left: 4px solid #3B82F6; }

/* ── 数据表格增强 ── */
.enh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.enh-table th {
  background: var(--bg2, #f8fafc);
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  color: var(--muted, #64748b);
  border-bottom: 2px solid var(--border, #e2e8f0);
  white-space: nowrap;
}
.enh-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  color: var(--text, #1e293b);
}
.enh-table tbody tr:hover td {
  background: var(--bg2, #f8fafc);
}
.enh-table caption {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
  caption-side: top;
  text-align: left;
}

/* ── SVG 图标替代 Emoji ── */
.enh-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.enh-icon-sm { width: 16px; height: 16px; }
.enh-icon-md { width: 24px; height: 24px; }
.enh-icon-lg { width: 32px; height: 32px; }

/* ── 图表容器增强 ── */
.enh-chart-wrap {
  position: relative;
  min-height: 300px;
}
.enh-chart-wrap .enh-chart-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #f0f4ff);
  border-radius: var(--enh-radius);
  z-index: 10;
}

/* ── 选项卡增强 ── */
@media (max-width: 768px) {
  .enh-responsive-stack {
    flex-direction: column !important;
  }
  .enh-responsive-hide-mobile {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════
   内联样式提取 — 工具类 v3.0
   覆盖: index.html, symbindex.html, datacollect.html 等
   ════════════════════════════════════════════════════════ */

/* ── Flex 布局微工具 ── */
.wz-flex-center { display: flex; align-items: center; gap: 8px; }
.wz-flex-center-sm { display: flex; align-items: center; gap: 4px; }
.wz-flex-between { display: flex; align-items: center; justify-content: space-between; }
.wz-flex-wrap { display: flex; flex-wrap: wrap; }

/* ── 语义色文字 ── */
.wz-text-muted   { color: #94a3b8; }
.wz-text-muted2  { color: #64748b; }
.wz-text-subtle  { color: #888; }
.wz-text-soft    { color: #999; }
.wz-text-down    { color: #059669; }
.wz-text-up      { color: #c62828; }
.wz-text-accent  { color: rgb(20, 71, 136); }
.wz-text-dark    { color: #1a1a1a; }
.wz-text-body    { color: #475569; }
.wz-text-white   { color: #fff; }

/* ── 背景语义色 ── */
.wz-bg-green  { background: #ecfdf5; }
.wz-bg-red    { background: #ffebee; }
.wz-bg-blue   { background: #f1f5f9; }
.wz-bg-gray   { background: #f3f4f6; }
.wz-bg-white  { background: #fff; }

/* ── 字号工具 ── */
.wz-fs-9  { font-size: 9px; }
.wz-fs-10 { font-size: 10px; }
.wz-fs-11 { font-size: 11px; }
.wz-fs-12 { font-size: 12px; }
.wz-fs-13 { font-size: 13px; }
.wz-fs-14 { font-size: 14px; }
.wz-fs-15 { font-size: 15px; }
.wz-fs-16 { font-size: 16px; }
.wz-fs-18 { font-size: 18px; }
.wz-fs-20 { font-size: 20px; }
.wz-fs-22 { font-size: 22px; }
.wz-fs-24 { font-size: 24px; }
.wz-fs-26 { font-size: 26px; }
.wz-fs-28 { font-size: 28px; }
.wz-fs-32 { font-size: 32px; }

/* ── 字重工具 ── */
.wz-fw-500 { font-weight: 500; }
.wz-fw-600 { font-weight: 600; }
.wz-fw-700 { font-weight: 700; }
.wz-fw-900 { font-weight: 900; }

/* ── 常用组合：字号+色 ── */
.wz-label-caps { font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.wz-label-sm   { font-size: 11px; color: #94a3b8; margin-top: 3px; }
.wz-label-md   { font-size: 12px; color: #888; }
.wz-label-sub  { font-size: 13px; color: #888; margin-bottom: 6px; }
.wz-title-sm   { font-size: 14px; font-weight: 500; }
.wz-title-md   { font-size: 15px; font-weight: 700; color: #1a1a1a; }

/* ── 大数值显示 ── */
.wz-value-lg { font-size: 32px; font-weight: 900; line-height: 1; }
.wz-value-md { font-size: 26px; font-weight: 900; line-height: 1.15; }
.wz-value-sm { font-size: 22px; font-weight: 700; }

/* ── 进度条 ── */
.wz-progress-wrap { flex: 1; background: #f3f4f6; overflow: hidden; }
.wz-progress-wrap.h-sm { height: 6px; border-radius: 3px; }
.wz-progress-wrap.h-md { height: 8px; border-radius: 4px; }
.wz-progress-fill { height: 100%; border-radius: inherit; }
.wz-progress-fill-blue    { background: #1565c0; }
.wz-progress-fill-purple  { background: #6a1b9a; }
.wz-progress-fill-teal    { background: #00897b; }
.wz-progress-fill-orange  { background: #e65100; }
.wz-progress-fill-amber   { background: #f59e0b; }
.wz-progress-fill-yellow  { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.wz-progress-fill-cyan    { background: linear-gradient(90deg, #67e8f9, #06b6d4); }
.wz-progress-fill-violet  { background: linear-gradient(90deg, #c4b5fd, #8b5cf6); }

/* ── 面板分隔符 ── */
.wz-panel-divider    { padding: 16px 20px; border-right: 1px solid #f0f0f0; }
.wz-panel-divider-sm { padding: 14px 20px; border-right: 1px solid #f0f0f0; }

/* ── 标签徽章 ── */
.wz-badge { font-size: 11px; padding: 2px 10px; border-radius: 10px; }
.wz-badge-green  { background: #ecfdf5; color: #059669; }
.wz-badge-red    { background: #ffebee; color: #c62828; }
.wz-badge-gray   { background: #f1f5f9; color: #94a3b8; }

/* ── 间距 —— padding ── */
.wz-p-xs  { padding: 2px 8px; }
.wz-p-sm  { padding: 4px 8px; }
.wz-p-md  { padding: 12px 16px; }
.wz-p-lg  { padding: 16px 20px; }

/* ── 间距 —— margin ── */
.wz-mt-xs { margin-top: 4px; }
.wz-mt-sm { margin-top: 8px; }
.wz-mt-md { margin-top: 12px; }
.wz-mb-xs { margin-bottom: 4px; }
.wz-mb-sm { margin-bottom: 6px; }
.wz-mb-md { margin-bottom: 8px; }

/* ── 其他工具 ── */
.wz-cursor-pointer { cursor: pointer; }
.wz-text-nowrap { white-space: nowrap; }
.wz-text-center { text-align: center; }
.wz-text-right  { text-align: right; }
.wz-flex-1 { flex: 1; }
.wz-min-w-0 { min-width: 0; }
.wz-flex-shrink-0 { flex-shrink: 0; }
.wz-vertical-align-m3 { vertical-align: -3px; }