/* ========== 地图容器预设高度 ========== */
/* 避免 Leaflet 初始化时容器为 0 导致首帧布局错乱，下半部分瓦片缺失 */
.admin-map {
  min-height: 420px;
  height: 100%;
  width: 100%;
  background: #f0f2f5;
  contain: strict;           /* CSS containment 阻止子元素重绘外溢 */
}

/* 确保卡片 body 给地图腾出空间 */
.map-preview-section .el-card__body {
  min-height: 450px;
  display: flex;
  flex-direction: column;
}

.map-preview-section .el-card__body > .el-loading-parent--relative {
  flex: 1;
  display: flex;
  min-height: 400px;
}

/* 地图管理卡片区域优化 */
.map-preview-section {
  contain: layout style;
}

/* ========== 真全屏地图预览：覆盖整个浏览器视口 ========== */
.map-preview-expanded {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;  /* 移动端动态视口 */
  z-index: 9999 !important;
  background: #fff;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.map-preview-expanded .el-card {
  height: 100vh !important;
  height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 0 !important;
  border: none !important;
}

.map-preview-expanded .el-card .el-card__header {
  flex-shrink: 0 !important;
  padding: 10px 20px !important;
  background: #fff !important;
  border-bottom: 1px solid #ebeef5 !important;
}

.map-preview-expanded .el-card .el-card__body {
  flex: 1 !important;
  overflow: hidden !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.map-preview-expanded .admin-map {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  background: #f0f2f5;
}

/* ========== 全屏按钮样式 ========== */
.map-fullscreen-btn {
  margin-left: 8px !important;
}

.map-fullscreen-icon-enter,
.map-fullscreen-icon-exit {
  font-size: 16px;
  margin-right: 2px;
}

/* ========== 双语播放按钮优化 ========== */
/* 按钮容器 */
.detail-view__audio-actions {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* 播放按钮基础样式 */
.detail-view__audio-actions .el-button.audio-play-btn {
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  border: 2px solid transparent !important;
  min-width: 110px !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* 中文按钮 */
.detail-view__audio-actions .el-button.audio-btn-zh {
  background: linear-gradient(135deg, #7E1F1F, #a83232) !important;
  border-color: #7E1F1F !important;
  color: #fff !important;
}

.detail-view__audio-actions .el-button.audio-btn-zh:hover {
  background: linear-gradient(135deg, #8b2222, #b83b3b) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(126,31,31,0.30) !important;
}

/* 藏文按钮 */
.detail-view__audio-actions .el-button.audio-btn-bo {
  background: linear-gradient(135deg, #C9A24A, #d4b05c) !important;
  border-color: #C9A24A !important;
  color: #fff !important;
}

.detail-view__audio-actions .el-button.audio-btn-bo:hover {
  background: linear-gradient(135deg, #d4b05c, #dfbc6e) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(201,162,74,0.35) !important;
}

/* 播放中状态 - 脉冲动画 */
.detail-view__audio-actions .el-button.audio-btn-playing {
  animation: audio-pulse 1.5s ease-in-out infinite !important;
}

.detail-view__audio-actions .el-button.audio-btn-playing.audio-btn-zh {
  background: linear-gradient(135deg, #27ae60, #2ecc71) !important;
  border-color: #27ae60 !important;
}

.detail-view__audio-actions .el-button.audio-btn-playing.audio-btn-bo {
  background: linear-gradient(135deg, #27ae60, #2ecc71) !important;
  border-color: #27ae60 !important;
}

@keyframes audio-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(39,174,96,0.20); }
  50% { box-shadow: 0 4px 20px rgba(39,174,96,0.45); transform: scale(1.03); }
}

/* 按钮前面加图标 */
.detail-view__audio-actions .el-button.audio-btn-zh::before {
  content: '🔊';
  font-size: 16px;
}

.detail-view__audio-actions .el-button.audio-btn-zh.audio-btn-playing::before {
  content: '⏸';
}

.detail-view__audio-actions .el-button.audio-btn-bo::before {
  content: '🔊';
  font-size: 16px;
}

.detail-view__audio-actions .el-button.audio-btn-bo.audio-btn-playing::before {
  content: '⏸';
}

/* el-icon（Vue 渲染的图标）不显示，用我们自己的伪元素替代 */
.detail-view__audio-actions .el-button .el-icon {
  display: none !important;
}

/* 移动端按钮缩小但保持可点击 */
@media screen and (max-width: 500px) {
  .detail-view__audio-actions {
    gap: 8px !important;
  }
  .detail-view__audio-actions .el-button.audio-play-btn {
    font-size: 13px !important;
    padding: 9px 14px !important;
    min-width: 90px !important;
    border-radius: 8px !important;
  }
}

/* ========== 瓦片渲染优化 ========== */
/* 让瓦片在高清屏下更清晰，并避免加载中的模糊 */
.admin-map .leaflet-tile {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  will-change: transform;
  backface-visibility: hidden;
}

/* 瓦片加载时的占位背景，减少白屏感知 */
.admin-map .leaflet-tile-container {
  background-color: #f0f2f5;
}

/* 拖动/缩放时保持瓦片可见，不要等加载完才显示 */
.admin-map .leaflet-fade-anim .leaflet-tile,
.admin-map .leaflet-zoom-anim .leaflet-tile {
  will-change: transform, opacity;
  transition: opacity 0.1s linear;
}

/* ========== 二维码对话框移动端优化 ========== */
@media screen and (max-width: 500px) {
  /* 窄屏下二维码 dialog 不要溢出 */
  .el-dialog:has(.qr-container) {
    width: calc(100vw - 24px) !important;
    max-width: 400px !important;
    margin-top: 5vh !important;
  }

  .el-dialog:has(.qr-container) .el-dialog__header {
    padding: 12px 16px 8px !important;
  }

  .el-dialog:has(.qr-container) .el-dialog__body {
    padding: 0 16px 16px !important;
  }

  /* 二维码图片在小屏上不超出 */
  .qr-image {
    max-width: 220px !important;
    width: 100% !important;
  }

  .qr-url p {
    font-size: 11px !important;
    word-break: break-all !important;
  }
}