/*
 * 指南详情模态框移动端滚动修复
 * 确保在移动设备上指南详情窗口可以上下滚动，完整查看内容
 * 同时提供深色模式适配
 */

/* 全局强制启用模态框滚动 */
.modal {
  -webkit-overflow-scrolling: touch !important;
}

/* 深色模式下的移动端模态框样式 */
.dark-mode #guide-details-modal .modal-content {
  background-color: var(--background-color) !important;
  border-color: var(--divider-color) !important;
}

.dark-mode #guide-details-modal .modal-header {
  border-bottom-color: var(--divider-color) !important;
  background-color: rgba(33, 33, 33, 0.9) !important;
}

.dark-mode #guide-details-modal .modal-title {
  color: var(--primary-text) !important;
}

.dark-mode #guide-details-modal .modal-body {
  background-color: var(--background-color) !important;
  color: var(--primary-text) !important;
}

.dark-mode #guide-details-modal h4,
.dark-mode #guide-details-modal h5,
.dark-mode #guide-details-modal h6 {
  color: var(--primary-text) !important;
}

.dark-mode #guide-details-modal p {
  color: var(--secondary-text) !important;
}

.dark-mode #guide-details-modal hr {
  border-color: var(--divider-color) !important;
}

.dark-mode #guide-details-modal .guide-points-list {
  background-color: rgba(33, 33, 33, 0.7) !important;
  border: 1px solid var(--divider-color) !important;
}

.dark-mode #guide-details-modal .guide-point-item {
  background-color: rgba(40, 40, 40, 0.8) !important;
  border-bottom: 1px solid var(--divider-color) !important;
}

.dark-mode #guide-details-modal .guide-point-item:hover {
  background-color: rgba(60, 60, 60, 0.9) !important;
}

.dark-mode #guide-details-modal .guide-point-item .point-name {
  color: var(--primary-text) !important;
}

.dark-mode #guide-details-modal .guide-point-item .point-anime {
  color: var(--secondary-text) !important;
}

.dark-mode #guide-details-modal .guide-point-item .point-image {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode #guide-details-modal .modal-body::-webkit-scrollbar-thumb {
  background-color: var(--primary-color) !important;
}

.dark-mode #guide-details-modal .modal-scroll-indicator {
  color: var(--primary-color) !important;
}

/* 深色模式下的按钮样式 */
.dark-mode #guide-details-modal .btn-outline-primary {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.dark-mode #guide-details-modal .btn-outline-primary:hover {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

.dark-mode #guide-details-modal .btn-outline-danger {
  color: #f44336 !important;
  border-color: #f44336 !important;
}

.dark-mode #guide-details-modal .btn-outline-danger:hover {
  background-color: #f44336 !important;
  color: #fff !important;
}

.dark-mode #guide-details-modal .btn-outline-success {
  color: #4caf50 !important;
  border-color: #4caf50 !important;
}

.dark-mode #guide-details-modal .btn-outline-success:hover {
  background-color: #4caf50 !important;
  color: #fff !important;
}

.dark-mode #guide-details-modal .btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}

.dark-mode #guide-details-modal .btn-primary:hover {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

/* 移动设备上的模态框样式调整 - 使用!important确保覆盖其他样式 */
@media (max-width: 768px) {
  /* 指南详情模态框样式 */
  #guide-details-modal .modal-dialog {
    margin: 0.5rem auto !important;
    max-width: 95% !important;
    height: auto !important;
    position: relative !important;
  }

  /* 确保模态框内容不超过视口高度并可滚动 */
  #guide-details-modal .modal-content {
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  /* 模态框标题固定在顶部 */
  #guide-details-modal .modal-header {
    flex-shrink: 0 !important;
    padding: 12px 16px !important;
  }

  /* 模态框内容区域可滚动 - 使用!important强制覆盖 */
  #guide-details-modal .modal-body {
    overflow-y: scroll !important; /* 使用scroll而不是auto，强制显示滚动条 */
    -webkit-overflow-scrolling: touch !important; /* 提供iOS流畅滚动 */
    overscroll-behavior: contain !important; /* 防止滚动传播 */
    padding: 15px !important;
    flex: 1 !important;
    max-height: calc(85vh - 60px) !important; /* 减去header的高度 */
    height: auto !important;
    touch-action: pan-y !important; /* 允许垂直滑动 */
    position: relative !important;
    transform: translateZ(0) !important; /* 启用GPU加速 */
    -webkit-transform: translateZ(0) !important;
    will-change: scroll-position !important; /* 提示浏览器滚动位置将会变化，优化性能 */
    backface-visibility: hidden !important; /* 减少渲染问题 */
    -webkit-backface-visibility: hidden !important;
    pointer-events: auto !important; /* 确保可以接收触摸事件 */
  }

  /* 自定义滚动条样式 */
  #guide-details-modal .modal-body::-webkit-scrollbar {
    width: 4px !important;
  }

  #guide-details-modal .modal-body::-webkit-scrollbar-thumb {
    background-color: var(--primary-color) !important;
    border-radius: 4px !important;
  }

  #guide-details-modal .modal-body::-webkit-scrollbar-track {
    background: transparent !important;
  }

  /* 确保指南点列表可以正常滚动 */
  #guide-details-modal .guide-points-list {
    max-height: none !important;
    overflow: visible !important;
  }

  /* 确保按钮区域不被截断 */
  #guide-details-modal .modal-body > div:last-child {
    margin-bottom: 15px !important;
    padding-bottom: 15px !important;
  }

  /* 修复Android设备上的滚动问题 */
  .android-device #guide-details-modal .modal-body {
    -webkit-transform: translateZ(0) !important; /* 启用硬件加速 */
    transform: translateZ(0) !important;
    will-change: scroll-position !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }

  /* 确保模态框内的所有内容都可以滚动 */
  #guide-details-modal .row,
  #guide-details-modal .col-md-8,
  #guide-details-modal .col-md-4,
  #guide-details-modal hr,
  #guide-details-modal h6,
  #guide-details-modal .d-flex {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 确保按钮组在移动端正确显示 */
  #guide-details-modal .d-flex {
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  #guide-details-modal .d-flex .btn {
    margin-bottom: 10px !important;
    flex: 0 0 auto !important;
  }

  /* 确保模态框在打开时可以滚动 */
  body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* 确保模态框背景不会阻止滚动 */
  .modal-backdrop {
    position: fixed !important;
  }
}