/* ============================================================
   common.css — 公共样式
   职责：提供全局 CSS Reset、布局工具类、文本工具类、Flex 工具类、
         间距工具类、安全区适配、骨架屏动画等，供所有页面复用。
   引入顺序：在 theme.css 之后、页面专属 CSS 之前引入。
   ============================================================ */

/* ============================================================
   一、CSS Reset（重置浏览器默认样式）
   ============================================================ */

/**
 * Vue v-cloak 隐藏规则
 * 在 Vue 完成挂载前，隐藏带有 v-cloak 属性的元素，
 * 防止自定义组件（如 van-tabbar）的原始文本在 JS 加载前闪现。
 */
[v-cloak] {
  display: none;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', sans-serif;
  color: var(--van-text-color, #1A2B3C);
  background-color: var(--van-background, #F8FAFB);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

/* ============================================================
   二、布局工具类（Layout Utilities）
   ============================================================ */

/**
 * 页面容器
 * 占据整屏高度，底部预留 Tabbar + 安全区空间
 */
.page-container {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(56px + env(safe-area-inset-bottom));
  background-color: var(--van-background, #F8FAFB);
}

/**
 * 内容包裹器
 * 统一左右内边距（16px）
 */
.content-wrapper {
  padding: 12px 16px;
}

/* ============================================================
   三、Surface & Card 工具类
   ============================================================ */

/**
 * 轻度浮起卡片
 * 白色背景 + 中圆角 + 轻度阴影
 */
.surface-raised {
  background-color: var(--color-surface, #FFFFFF);
  border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-card);
}

/**
 * 高度浮起卡片
 * 白色背景 + 大圆角 + 中度阴影
 */
.surface-elevated {
  background-color: var(--color-surface, #FFFFFF);
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-raised);
}

/* ============================================================
   四、文本工具类（Text Utilities）
   ============================================================ */

.text-primary   { color: var(--van-text-color, #1A2B3C); }
.text-secondary { color: var(--van-text-color-2, #5A6B7A); }
.text-tertiary  { color: var(--van-text-color-3, #8A9AAA); }
.text-accent    { color: var(--color-accent, #0066CC); }
.text-center    { text-align: center; }
.text-right     { text-align: right; }

/* ============================================================
   五、Flex 布局工具类
   ============================================================ */

/* Flex 容器 */
.flex           { display: flex; }
/* 纵向 Flex 容器 */
.flex-col       { display: flex; flex-direction: column; }
/* 交叉轴居中 */
.items-center   { align-items: center; }
/* 主轴两端对齐 */
.justify-between{ justify-content: space-between; }
/* 主轴居中 */
.justify-center { justify-content: center; }
/* 弹性系数 1 */
.flex-1         { flex: 1; }

/* ============================================================
   六、间距工具类（Spacing Utilities）
   ============================================================ */

/* 间距 4px */
.gap-4  { gap: 4px; }
/* 间距 8px */
.gap-8  { gap: 8px; }
/* 间距 12px */
.gap-12 { gap: 12px; }
/* 间距 16px */
.gap-16 { gap: 16px; }

/* 上外边距 8px */
.mt-8  { margin-top: 8px; }
/* 上外边距 12px */
.mt-12 { margin-top: 12px; }
/* 上外边距 16px */
.mt-16 { margin-top: 16px; }

/* 下外边距 8px */
.mb-8  { margin-bottom: 8px; }
/* 下外边距 12px */
.mb-12 { margin-bottom: 12px; }
/* 下外边距 16px */
.mb-16 { margin-bottom: 16px; }

/* 内边距 12px */
.p-12 { padding: 12px; }
/* 内边距 16px */
.p-16 { padding: 16px; }

/* ============================================================
   七、安全区与可点击区域
   ============================================================ */

/**
 * 底部安全区内边距
 * 适配 iPhone 刘海屏/灵动岛底部安全区域
 */
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/**
 * 最小可点击区域
 * 确保触摸目标不小于 44x44px（WCAG 2.1 推荐）
 */
.click-target {
  min-height: 44px;
  min-width: 44px;
}

/* ============================================================
   八、骨架屏加载动画
   ============================================================ */

/**
 * 骨架屏背景
 * 使用线性渐变 + 位移动画模拟加载 shimmer 效果
 */
.skeleton-bg {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}