/* Kindle 分页系统样式 */

/* 禁用默认滚动条，因为我们使用分页 */
html {
  overflow: hidden;
}

body {
  overflow: hidden;
  height: 100vh;
}

/* 应用容器优化 */
.app {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* 页面切换动画 */
.app > section {
  transition: opacity 0.2s ease-in-out;
}

.app > section[style*="display: none"] {
  opacity: 0;
}

/* 页面指示器样式 */
.page-indicator {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--fg);
  color: var(--bg);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  z-index: 1000;
  opacity: 0.8;
  pointer-events: none;
  font-family: Arial, "Helvetica Neue", "Segoe UI", sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s ease;
}

/* 确保组件在分页中的合理间距 */
.app > section {
  margin-bottom: 8px;
}

.app > section:last-child {
  margin-bottom: 0;
}

/* 优化各组件在分页中的显示 */
.time {
  flex-shrink: 0;
  /* 时间组件不参与分页，始终保持在页面顶部 */
  position: relative;
  z-index: 100;
  display: flex !important; /* 强制保持flex布局 */
}

.weather {
  flex-shrink: 0;
}

.countdown {
  flex-shrink: 0;
}

.anniversary {
  flex-shrink: 0;
}

.sentence {
  flex-shrink: 0;
}

.lunch {
  flex-shrink: 0;
}

.exchange {
  flex-shrink: 0;
}

.world-time {
  flex-shrink: 0;
}

.salary-calculator {
  flex-shrink: 0;
}

/* 响应式优化 */
@media (max-height: 600px) {
  .app {
    padding: 12px;
    gap: 6px;
  }
  
  .app > section {
    margin-bottom: 6px;
  }
}

@media (max-height: 480px) {
  .app {
    padding: 8px;
    gap: 4px;
  }
  
  .app > section {
    margin-bottom: 4px;
  }
  
  .page-indicator {
    bottom: 10px;
    right: 10px;
    padding: 4px 8px;
    font-size: 11px;
  }
}

/* 确保在分页模式下，组件不会被截断 */
.app > section {
  page-break-inside: avoid;
  break-inside: avoid;
}

/* 平滑的页面切换效果 */
.page-transition {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* 禁用文本选择，避免意外选择 */
.app {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 但允许在输入框中选择文本 */
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* 优化触摸设备的滚动体验 */
.app {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* 确保页面内容不会超出视口 */
.app > section {
  max-height: calc(100vh - 32px);
  overflow: hidden;
}

/* 特殊处理可能很长的组件 */
.countdown,
.anniversary,
.world-time {
  overflow: visible;
}

/* 在小屏幕上进一步优化 */
@media (max-width: 480px) {
  .page-indicator {
    font-size: 10px;
    padding: 3px 6px;
  }
}