/* ============================================================
   index.css — 首页专属样式
   职责：定义首页活动卡片、搜索栏、骨架屏、空状态、Tabbar 等
         页面级组件的样式，不重复定义公共样式。
   作用域：仅 labor-education/index.html
   引入顺序：在 common.css 之后引入
   ============================================================ */

/* ============================================================
   一、搜索栏（Search Bar）
   ============================================================ */

/**
 * 搜索栏容器
 * 粘性定位（sticky）在视口顶部，滚动时始终可见
 * z-index: 10 确保覆盖列表内容
 */
.search-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--van-background, #F8FAFB);
  padding: 8px 16px;
  padding-top: max(8px, env(safe-area-inset-top));
  box-shadow: var(--shadow-raised);
}

/* 覆盖 Vant Search 组件默认内边距 */
.search-bar .van-search {
  padding: 0;
  background: transparent;
}

/* 覆盖 action slot 默认右侧内边距，使按钮右侧与卡片右边框对齐 */
.search-bar .van-search__action {
  padding: 0 0 0 8px;
}

/* 搜索输入框背景改为白色圆角 */
.search-bar .van-search__content {
  background-color: var(--van-background-2, #FFFFFF);
  border-radius: 24px;
}

/* ============================================================
   二、活动卡片（Activity Card）
   ============================================================ */

/**
 * 活动卡片整体容器
 * 封面图顶部通栏 + 下方色块与内容区 flex 横向排列
 * 点击时缩放动画 + 阴影提升，提供触觉反馈
 */
.activity-card {
  display: flex;
  flex-direction: column;
  margin: 12px 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* 点击态：轻微缩小 + 提升阴影 */
.activity-card:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-raised);
}

/**
 * 封面图下方内容区
 * 左侧色块 + 右侧文字内容，flex 横向排列
 */
.activity-card__body {
  display: flex;
}

/**
 * 左侧状态色块
 * 宽度 4px，高度由内容撑开，颜色由 JS 根据 status 动态设置（ACTIVITY_STATUS_MAP）
 */
.activity-card__color-bar {
  width: 4px;
  flex-shrink: 0;
  margin-top: 5px;
}

/**
 * 卡片内容区
 * flex: 1 占据剩余宽度，min-width: 0 防止 flex 子项溢出
 */
.activity-card__content {
  flex: 1;
  padding: 14px 16px;
  min-width: 0;
}

/**
 * 活动封面图
 * 顶部通栏，宽度撑满整个卡片；高度 140px
 * van-image 通过 fit="cover" 保持比例裁剪，加载失败时显示默认占位图
 */
.activity-card__cover {
  display: block;
}
.activity-card__cover .van-image__error {
  background-color: #e0e0e0;
}
.activity-card__cover .van-image__error-icon {
  color: #c8c9cc;
}

/**
 * 标题行
 * 标题 + 状态标签横向排列，两端对齐
 */
.activity-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

/**
 * 活动标题
 * 最多显示 2 行，超出省略
 */
.activity-card__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--van-text-color, #1A2B3C);
  line-height: 1.4;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 状态标签不压缩 */
.activity-card__status {
  flex-shrink: 0;
  margin-top: 2px;
}

/**
 * 时间地点信息区
 * 纵向排列，每项含图标 + 文字
 */
.activity-card__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

/**
 * 单条 meta 信息（时间 / 地点）
 */
.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--van-text-color-2, #5A6B7A);
}

/* Tabler Icons 图标样式 */
.meta-item .ti {
  font-size: 15px;
  color: var(--van-text-color-3, #8A9AAA);
}

/**
 * Meta 行内横向排列容器
 * 用于在同一行内并列展示多个 meta-item（如地点+类型、级别+主办+学时）
 */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/**
 * 卡片底部行
 * 左侧展示类别/级别/学时，右侧展示报名人数，两端对齐
 */
.activity-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/**
 * 底部左侧信息容器
 * 类别、级别、学时横向排列
 */
.footer-info-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/**
 * 底部信息单项
 */
.footer-info-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--van-text-color-3, #8A9AAA);
}

.footer-info-item .ti {
  font-size: 13px;
  color: var(--van-text-color-3, #8A9AAA);
}

/**
 * 报名人数信息
 */
.participant-info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--van-text-color-3, #8A9AAA);
}

.participant-info .ti {
  font-size: 14px;
}

/* ============================================================
   三、骨架屏列表（Skeleton List）
   ============================================================ */

.skeleton-list {
  padding: 12px 16px;
}

.skeleton-item {
  margin-bottom: 12px;
  padding: 16px;
  background-color: var(--van-background-2, #FFFFFF);
  border-radius: var(--radius-md, 10px);
}

/* ============================================================
   四、空状态（Empty State）
   ============================================================ */

.empty-action {
  margin-top: 16px;
  width: 160px;
}

/* ============================================================
   五、底部 Tabbar
   ============================================================ */

.van-tabbar {
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.04);
}

/* ============================================================
   六、列表容器高度兜底
   说明：120px 为搜索栏（约 56px）+ 底部 Tabbar（约 50px）+ 间隙（约 14px）
   的估算值，不同设备安全区域下可能略有偏差，属可接受范围。
   ============================================================ */

.van-list,
.van-pull-refresh {
  min-height: calc(100vh - 120px);
  min-height: calc(100dvh - 120px);
}

/* ============================================================
   七、搜索栏筛选按钮
   ============================================================ */

/**
 * 搜索栏右侧筛选按钮
 * 使用 Tabler Icons + 文字，垂直居中排列
 */
.filter-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 8px;
  color: var(--van-primary-color, #1989FA);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}

.filter-btn .ti {
  font-size: 18px;
}

/* 搜索栏内联重置按钮：激活时以主题色高亮 */
.filter-btn--inline-reset {
  color: var(--van-primary-color, #1989FA);
}

/* 禁用状态：无筛选条件时置灰且不可点击 */
.filter-btn--inline-reset.is-disabled {
  color: var(--van-text-color-3, #C8C9CC);
  cursor: not-allowed;
}

/* ============================================================
   八、筛选面板（Filter Panel）
   ============================================================ */

/**
 * 筛选面板整体容器
 * 内边距与背景色
 * 设置最大高度和垂直滚动，确保所有筛选项可见
 */
.filter-panel {
  padding: 0 16px 16px;
  background-color: var(--van-background-2, #FFFFFF);
  max-height: 75vh;
  overflow-y: auto;
}

/**
 * 顶部拖拽指示条
 * 居中灰色短横线，提供视觉反馈
 */
.filter-panel__drag-bar {
  width: 36px;
  height: 4px;
  background-color: var(--van-gray-5, #C8C9CC);
  border-radius: 2px;
  margin: 8px auto 12px;
}

/**
 * 筛选面板标题行
 * 左侧标题 + 右侧关闭图标，两端对齐
 */
.filter-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.filter-panel__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--van-text-color, #1A2B3C);
}

.filter-panel__header .ti-x {
  font-size: 20px;
  color: var(--van-text-color-2, #5A6B7A);
  cursor: pointer;
}

/**
 * 筛选字段行（活动类型 / 目标学院 / 目标年级 / 时间范围）
 * 左侧标签 + 中间值 + 右侧下拉箭头
 */
.filter-row {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--van-border-color, #EBEDF0);
  border-radius: 8px;
  background-color: #FFFFFF;
  cursor: pointer;
}

.filter-row__label {
  width: 80px;
  font-size: 14px;
  color: var(--van-text-color-2, #5A6B7A);
  flex-shrink: 0;
}

.filter-row__value {
  flex: 1;
  font-size: 14px;
  color: var(--van-text-color, #1A2B3C);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-row__icon {
  margin-left: 4px;
  font-size: 16px;
  color: var(--van-text-color-3, #8A9AAA);
  flex-shrink: 0;
}

/**
 * 覆盖 van-field 在筛选面板中的样式
 * 去除多余内边距，统一边框风格
 */
.filter-field.van-field {
  --van-cell-horizontal-padding: 0px;
  min-height: 48px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--van-border-color, #EBEDF0);
  border-radius: 8px;
  background-color: #FFFFFF;
}

.filter-field.van-field .van-field__label {
  width: 80px;
  margin-right: 0;
  color: var(--van-text-color-2, #5A6B7A);
}

.filter-field.van-field .van-field__control {
  color: var(--van-text-color, #1A2B3C);
}

/**
 * 筛选面板底部操作栏
 * 重置 + 确认按钮，两端对齐
 */
.filter-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

.filter-btn--reset {
  flex: 1;
  height: 48px;
  border-radius: 8px;
  border-color: var(--van-border-color, #EBEDF0);
  color: var(--van-text-color-2, #5A6B7A);
}

.filter-btn--confirm {
  flex: 1;
  height: 48px;
  border-radius: 8px;
}

/* ============================================================
   九、广告 Banner
   ============================================================ */

/**
 * Banner 区域容器
 * 水平边距与活动卡片对齐，圆角，隐藏溢出
 */
.banner-section {
  margin: 12px 16px;
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
}

/* Banner 图片：撑满容器，保持比例 */
.banner-image {
  display: block;
  aspect-ratio: 3 / 1;
  overflow: hidden;
}
.banner-image .van-image__error {
  background-color: #e0e0e0;
}
.banner-image .van-image__error-icon {
  color: #c8c9cc;
}

/* 覆盖 Vant Swipe 指示器位置：右下角 */
.banner-section .van-swipe__indicators {
  left: auto;
  right: 12px;
  transform: none;
}

/* 覆盖 Vant Swipe 指示器颜色：非激活项 */
.banner-section .van-swipe__indicator {
  background-color: var(--van-text-color-3, #8A9AAA);
  opacity: 0.6;
}

/* 覆盖 Vant Swipe 指示器颜色：激活项 */
.banner-section .van-swipe__indicator--active {
  background-color: var(--van-primary-color, #1989FA);
  opacity: 1;
}

/* ============================================================
   十、滚动通知条
   ============================================================ */

/**
 * 通知栏区域容器
 * 位于 Banner 下方、活动列表上方
 */
.notice-section {
  margin: 0 16px 12px;
}

/**
 * 通知条本体
 * accent-light 背景，圆角，flex 横向排列
 */
.notice-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  background-color: var(--van-active-color, #EAF2FF);
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  cursor: pointer;
}

/* 左侧 accent 竖线标识 */
.notice-bar__indicator {
  width: 3px;
  height: 16px;
  background-color: var(--van-primary-color, #1989FA);
  border-radius: 2px;
  flex-shrink: 0;
}

/* 通知文字内容区：占据剩余空间，单行省略 */
.notice-bar__content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* 通知文字 */
.notice-bar__text {
  display: block;
  font-size: 14px;
  color: var(--van-text-color, #1A2B3C);
  line-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 右侧箭头图标 */
.notice-bar__arrow {
  font-size: 16px;
  color: var(--van-text-color-3, #8A9AAA);
  flex-shrink: 0;
}

/* ============================================================
   十一、返回顶部按钮
   ============================================================ */

/**
 * 返回顶部按钮：固定在右下角，Tabbar 上方
 * 圆形背景，带阴影，点击时缩放反馈
 */
.back-top-btn {
  position: fixed;
  right: 16px;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: var(--van-background-color-light, #FFFFFF);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.back-top-btn:active {
  transform: scale(0.92);
}

.back-top-btn .ti-chevron-up {
  font-size: 20px;
  color: var(--van-text-color, #1A2B3C);
}