EmailBill/Web/src/styles/common.css

/* 通用页面容器样式 - 统一风格（灰色背景） */
.page-container {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* 防止滚动链传播到 body */
  background: #f7f8fa;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  .page-container {
    background: #141414;
  }
}

/* 页面内容区域 */
.page-content {
  padding: 16px 0 0 0;
}

/* 下拉刷新包装器 */
.refresh-wrapper {
  min-height: calc(var(--vh, 100vh) - 46px - 50px - env(safe-area-inset-bottom, 0px));
}

/* 统一卡片样式 */
.common-card {
  background: #ffffff;
  margin: 0 12px 16px;
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #ebedf0;
}

@media (prefers-color-scheme: dark) {
  .common-card {
    background: #1f1f1f;
    border-color: #2c2c2c;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  }
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--van-text-color);
  margin: 0;
}

/* 增加卡片组的对比度 */
:deep(.van-cell-group--inset) {
  margin: 10px 16px;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #ebedf0;
  border-radius: 16px;
}

@media (prefers-color-scheme: dark) {
  :deep(.van-cell-group--inset) {
    background: #1f1f1f;
    border-color: #2c2c2c;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  }
}

/* 单元格样式 */
:deep(.van-cell) {
  background: #ffffff;
  border-bottom: 1px solid #ebedf0;
}

@media (prefers-color-scheme: dark) {
  :deep(.van-cell) {
    background: #1f1f1f;
    border-bottom: 1px solid #2c2c2c;
  }
}

:deep(.van-cell:last-child) {
  border-bottom: none;
}

/* 详情弹出层样式 */
.detail-popup {
  padding: 16px;
  height: 100%;
  overflow-y: auto;
  background: #f7f8fa;
}

@media (prefers-color-scheme: dark) {
  .detail-popup {
    background: #141414;
  }
}

/* 弹出层内的卡片组样式 */
.detail-popup :deep(.van-cell-group--inset) {
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #ebedf0;
  border-radius: 16px;
}

@media (prefers-color-scheme: dark) {
  .detail-popup :deep(.van-cell-group--inset) {
    background: #1f1f1f;
    border-color: #2c2c2c;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  }
}

/* 详情头部样式 */
.detail-header {
  margin-bottom: 16px;
}

.detail-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  word-break: break-word;
}

.detail-header p {
  margin: 0;
  font-size: 14px;
  color: #969799;
  font-weight: normal;
}

/* 导航栏透明背景 */
:deep(.van-nav-bar) {
  background-color: transparent;
}

/* 禁止在导航栏上进行拖动操作 */
.page-container-flex :deep(.van-nav-bar) {
  touch-action: none;
}

/* 修复表单字段过长时的换行显示 */
:deep(.van-field__control) {
  word-break: break-all;
  white-space: normal;
}

:deep(.van-field__value) {
  word-break: break-all;
  white-space: normal;
}

/* 账单列表滚动容器 */
.bills-scroll-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ===== 页面容器布局（Flex布局） ===== */
.page-container-flex {
  display: flex;
  flex-direction: column;
  height: 100%; /* 使用 100% 继承父容器高度，避免 100vh 导致的溢出 */
  overflow: hidden;
}

/* 修复嵌套使用 page-container-flex 时的布局问题 */
.page-container-flex .page-container-flex {
  height: auto;
  flex: 1;
  min-height: 0;
}

.page-container-flex :deep(.van-nav-bar) {
  flex-shrink: 0;
}

.page-container-flex > .van-pull-refresh {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ===== 可滚动内容区域 ===== */
.scroll-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 0 0 0;
}

/* ===== 粘性顶部元素样式 ===== */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin: 0 12px;
  margin-top: 12px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

@media (prefers-color-scheme: dark) {
  .sticky-header {
    background: #1f1f1f;
  }
}

.sticky-header-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--van-text-color);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}

/* ===== 颜色工具类 ===== */
.text-expense {
  color: #ff6b6b;
}

.text-income {
  color: #51cf66;
}