/**
 * 家事通 公共样式表 (jst-common.css)
 * 从 page-controller.js 中提取的跨页面公共样式
 * 包含：CSS变量/主题系统、页面容器、Tab栏、骨架屏、Toast、
 *       下拉刷新、空状态、分享按钮、深色模式适配等通用组件样式
 */

/* ============================================================
   一、CSS 变量（主题系统）
   - 定义全局颜色、间距、阴影等设计令牌
   - 支持亮色/暗色模式切换
   ============================================================ */
:root {
  --jst-bg: #ffffff;
  --jst-bg-secondary: #f5f5f5;
  --jst-card: #ffffff;
  --jst-text: #1a1a1a;
  --jst-text-secondary: #666666;
  --jst-text-tertiary: #999999;
  --jst-border: #e5e5e5;
  --jst-theme: #07C160;
  --jst-theme-light: #e8f5e9;
  --jst-overlay: rgba(0,0,0,0.5);
  --jst-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

:root.jst-dark {
  --jst-bg: #1a1a1a;
  --jst-bg-secondary: #242424;
  --jst-card: #2d2d2d;
  --jst-text: #ffffff;
  --jst-text-secondary: #b0b0b0;
  --jst-text-tertiary: #808080;
  --jst-border: #3d3d3d;
  --jst-theme: #07C160;
  --jst-theme-light: #1a3a1f;
  --jst-overlay: rgba(0,0,0,0.7);
  --jst-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ============================================================
   二、页面容器
   - 全屏固定定位的主容器
   - 包含内容区域和底部Tab栏
   ============================================================ */
#jst-page-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5000;
  background: var(--jst-bg);
  display: none;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  color: var(--jst-text);
  padding-top: env(safe-area-inset-top, 0);
}

#jst-page-container.active {
  display: flex;
}

/* 页面内容区域 */
#jst-page-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* ============================================================
   三、Tab内容容器（四页面切换）
   - 每个Tab对应一个绝对定位的容器
   - 支持淡入淡出 + 上移动画的切换效果
   ============================================================ */
#jst-genealogy-container,
#jst-chats-container,
#jst-services-container,
#jst-profile-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  will-change: transform, opacity;
}

#jst-genealogy-container.active,
#jst-chats-container.active,
#jst-services-container.active,
#jst-profile-container.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   四、骨架屏（加载占位）
   - 页面首次加载时显示的占位动画
   - 渐变闪烁效果提示用户正在加载
   ============================================================ */
.jst-skeleton-screen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--jst-bg);
  z-index: 10;
  padding: 16px;
  display: none;
}

.jst-skeleton-screen.active {
  display: block;
}

.jst-skeleton-item {
  background: linear-gradient(90deg, var(--jst-border) 25%, var(--jst-bg-secondary) 50%, var(--jst-border) 75%);
  background-size: 200% 100%;
  animation: jstSkeletonPulse 1.5s ease-in-out infinite;
  border-radius: 6px;
  margin-bottom: 12px;
}

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

/* ============================================================
   五、底部Tab栏
   - 四个Tab：消息、家族、服务、我的
   - 支持角标显示未读消息数
   - 适配安全区域（iPhone底部）
   ============================================================ */
#jst-tab-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 56px;
  background: var(--jst-card);
  border-top: 1px solid var(--jst-border);
  padding-bottom: env(safe-area-inset-bottom, 0);
  flex-shrink: 0;
}

.jst-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  cursor: pointer;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  background: transparent;
  border: none;
  outline: none;
}

.jst-tab-item:focus-visible {
  outline: 2px solid var(--jst-theme);
  outline-offset: -2px;
}

.jst-tab-item:active {
  opacity: 0.7;
}

.jst-tab-icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 2px;
}

.jst-tab-label {
  font-size: 10px;
  color: var(--jst-text-tertiary);
  font-weight: 500;
}

.jst-tab-item.active .jst-tab-label {
  color: var(--jst-theme);
  font-weight: 600;
}

/* Tab角标（未读消息数） */
.jst-tab-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 22px);
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #ff3b30;
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-weight: 600;
}

.jst-tab-badge.hidden {
  display: none;
}

/* ============================================================
   六、返回Expo按钮
   - 左上角的关闭按钮，用于返回原版App界面
   ============================================================ */
#jst-back-expo {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 5001;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: var(--jst-overlay);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 16px;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

#jst-back-expo:focus-visible {
  outline: 2px solid var(--jst-theme);
  outline-offset: 2px;
}

#jst-page-container.active ~ #jst-back-expo {
  display: flex;
}

/* ============================================================
   七、全局Toast提示
   - 顶部弹出的轻量级消息提示
   - 支持 success / error / info / warning 四种类型
   - 自动消失，不阻断用户操作
   ============================================================ */
.jst-global-toast {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding-top: 12px;
}

.jst-global-toast-inner {
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transform: translateY(-60px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 80vw;
  word-break: break-all;
  display: flex;
  align-items: center;
  gap: 6px;
}

.jst-global-toast-inner.show {
  transform: translateY(0);
}

/* Toast类型颜色 */
.jst-global-toast--success {
  background: #07C160;
}

.jst-global-toast--error {
  background: #FF4D4F;
}

.jst-global-toast--info {
  background: #1890FF;
}

.jst-global-toast--warning {
  background: #FF9800;
}

/* ============================================================
   八、下拉刷新
   - 触摸下拉触发刷新操作
   - 包含刷新指示器和旋转加载动画
   ============================================================ */
.jst-pull-refresh {
  position: relative;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.jst-pull-refresh-indicator {
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--jst-text-tertiary);
  transition: opacity 0.2s;
}

.jst-pull-refresh-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--jst-border);
  border-top-color: var(--jst-theme);
  border-radius: 50%;
  animation: jstSpin 0.8s linear infinite;
  margin-right: 8px;
}

@keyframes jstSpin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   九、空状态
   - 列表或内容为空时显示的占位组件
   - 包含图标、标题、描述文字和操作按钮
   ============================================================ */
.jst-empty-state-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.jst-empty-state-v2-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.jst-empty-state-v2-title {
  font-size: 16px;
  color: var(--jst-text-secondary);
  font-weight: 500;
  margin-bottom: 8px;
}

.jst-empty-state-v2-desc {
  font-size: 13px;
  color: var(--jst-text-tertiary);
  margin-bottom: 20px;
}

.jst-empty-state-v2-btn {
  background: var(--jst-theme);
  color: #fff;
  border: none;
  padding: 8px 24px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
}

.jst-empty-state-v2-btn:focus-visible {
  outline: 2px solid var(--jst-theme);
  outline-offset: 2px;
}

.jst-empty-state-v2-btn:active {
  opacity: 0.8;
}

/* ============================================================
   十、分享按钮
   - 用于分享到微信或家族群的通用按钮组件
   ============================================================ */
.jst-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 16px;
  background: var(--jst-theme-light);
  color: var(--jst-theme);
  border: 1px solid var(--jst-theme);
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
  transition: opacity 0.15s, transform 0.15s;
}

.jst-share-btn:focus-visible {
  outline: 2px solid var(--jst-theme);
  outline-offset: 2px;
}

.jst-share-btn:active {
  opacity: 0.8;
  transform: scale(0.96);
}

/* ============================================================
   十一、主题切换按钮
   - 用于在亮色/暗色/自动模式之间切换的按钮
   ============================================================ */
.jst-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 16px;
  background: var(--jst-bg-secondary);
  color: var(--jst-text-secondary);
  border: 1px solid var(--jst-border);
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.jst-theme-toggle:focus-visible {
  outline: 2px solid var(--jst-theme);
  outline-offset: 2px;
}

.jst-theme-toggle:active {
  opacity: 0.7;
}

/* ============================================================
   十二、深色模式适配（各页面通用组件）
   - 对页面头部、卡片、列表项、输入框等通用组件
   - 进行深色模式下的颜色覆盖
   ============================================================ */
.jst-dark .jst-page-header {
  background: var(--jst-card);
  border-bottom: 1px solid var(--jst-border);
  color: var(--jst-text);
}

.jst-dark .jst-card {
  background: var(--jst-card);
  box-shadow: var(--jst-shadow);
}

.jst-dark .jst-list-item {
  background: var(--jst-card);
  border-bottom: 1px solid var(--jst-border);
}

.jst-dark .jst-input {
  background: var(--jst-bg-secondary);
  color: var(--jst-text);
  border: 1px solid var(--jst-border);
}

.jst-dark .jst-input::placeholder {
  color: var(--jst-text-tertiary);
}

/* ============================================================
   十三、减少动画（尊重用户系统偏好）
   - 当用户在系统中设置了"减少动画"时
   - 将所有动画和过渡效果缩短到最小
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   十四、家族事务页面组件
   - 喜庆料理模板卡片、任务卡片、联系人卡片
   - 弹窗表单组件
   ============================================================ */

/* 区域头部 */
.jst-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--jst-border);
}

.jst-section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--jst-text);
}

.jst-section-add-btn {
  background: var(--jst-theme);
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
}

/* 任务分类区域 */
.jst-task-category {
  padding: 16px;
  border-bottom: 1px solid var(--jst-border);
}

.jst-task-category-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--jst-text);
  margin-bottom: 8px;
}

.jst-task-category-desc {
  font-size: 13px;
  color: var(--jst-text-secondary);
  margin-bottom: 12px;
}

/* 喜庆模板卡片 */
.jst-funeral-template-card {
  background: var(--jst-card);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--jst-shadow);
}

.jst-funeral-template-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--jst-text);
  margin-bottom: 4px;
}

.jst-funeral-template-region {
  font-size: 12px;
  color: var(--jst-text-secondary);
  margin-bottom: 6px;
}

.jst-funeral-template-progress {
  font-size: 13px;
  color: var(--jst-theme);
  margin-bottom: 10px;
}

.jst-funeral-template-btn {
  background: var(--jst-theme-light);
  color: var(--jst-theme);
  border: 1px solid var(--jst-theme);
  padding: 6px 16px;
  border-radius: 14px;
  font-size: 13px;
  cursor: pointer;
}

.jst-funeral-add-btn {
  width: 100%;
  background: var(--jst-bg-secondary);
  color: var(--jst-text-secondary);
  border: 1px dashed var(--jst-border);
  padding: 12px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 8px;
}

/* 任务卡片 */
.jst-task-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--jst-card);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
  box-shadow: var(--jst-shadow);
}

.jst-task-card-done {
  opacity: 0.6;
}

.jst-task-card-emoji {
  font-size: 24px;
  flex-shrink: 0;
}

.jst-task-card-info {
  flex: 1;
  min-width: 0;
}

.jst-task-card-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--jst-text);
  margin-bottom: 4px;
}

.jst-task-card-desc {
  font-size: 13px;
  color: var(--jst-text-secondary);
  margin-bottom: 4px;
}

.jst-task-card-meta {
  font-size: 12px;
  color: var(--jst-text-tertiary);
}

/* 联系人 */
.jst-contact-group {
  padding: 12px 16px;
}

.jst-contact-group-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--jst-text-secondary);
  margin-bottom: 8px;
  padding-left: 4px;
}

.jst-contact-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--jst-card);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
  box-shadow: var(--jst-shadow);
}

.jst-contact-emoji {
  font-size: 28px;
  flex-shrink: 0;
}

.jst-contact-info {
  flex: 1;
  min-width: 0;
}

.jst-contact-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--jst-text);
  margin-bottom: 2px;
}

.jst-contact-phone {
  font-size: 13px;
  color: var(--jst-theme);
  margin-bottom: 2px;
}

.jst-contact-note {
  font-size: 12px;
  color: var(--jst-text-tertiary);
}

.jst-contact-call-btn {
  background: var(--jst-theme);
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 14px;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}

/* 弹窗 */
.jst-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.jst-modal-panel {
  background: var(--jst-card);
  border-radius: 16px;
  padding: 20px;
  width: 100%;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
}

.jst-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--jst-text);
  margin-bottom: 4px;
}

.jst-modal-subtitle {
  font-size: 13px;
  color: var(--jst-text-secondary);
  margin-bottom: 16px;
}

.jst-modal-label {
  font-size: 13px;
  color: var(--jst-text-secondary);
  margin-bottom: 6px;
  margin-top: 12px;
}

.jst-modal-input,
.jst-modal-textarea,
.jst-modal-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--jst-border);
  border-radius: 8px;
  background: var(--jst-bg);
  color: var(--jst-text);
  font-size: 14px;
  box-sizing: border-box;
}

.jst-modal-input:focus,
.jst-modal-textarea:focus,
.jst-modal-select:focus {
  outline: 2px solid var(--jst-theme);
  outline-offset: -2px;
}

.jst-modal-btn-row {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.jst-modal-btn {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  font-weight: 500;
}

.jst-modal-btn-cancel {
  background: var(--jst-bg-secondary);
  color: var(--jst-text-secondary);
}

.jst-modal-btn-confirm {
  background: var(--jst-theme);
  color: #fff;
}

/* 更多页面折叠面板 */
.jst-more-section {
  margin-bottom: 8px;
  background: var(--jst-card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--jst-shadow);
}

.jst-more-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}

.jst-more-header:active {
  background: var(--jst-bg-secondary);
}

.jst-more-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--jst-text);
}

.jst-more-arrow {
  font-size: 12px;
  color: var(--jst-text-secondary);
  transition: transform 0.2s;
}

.jst-more-content {
  padding: 0 16px 16px;
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 喜庆事项列表 */
.jst-funeral-item-list {
  margin: 12px 0;
}

.jst-funeral-item-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--jst-border);
}

.jst-funeral-item-row.done {
  opacity: 0.5;
}

.jst-funeral-item-row.done .jst-funeral-item-name {
  text-decoration: line-through;
}

.jst-funeral-item-text {
  flex: 1;
}

.jst-funeral-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--jst-text);
  margin-bottom: 2px;
}

.jst-funeral-item-desc {
  font-size: 12px;
  color: var(--jst-text-secondary);
}

/* 空状态 */
.jst-empty-text {
  text-align: center;
  padding: 20px;
  color: var(--jst-text-tertiary);
  font-size: 14px;
}

/* 服务位置标签 */
.jst-svc-loc-tag {
  display: inline-block;
  background: var(--jst-theme-light, #e0f7fa);
  color: var(--jst-theme, #00838f);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 6px;
  vertical-align: middle;
  font-weight: 500;
}