/* DXCC Collector map basic style fix */
/* 主要作用：确保地图容器有高度、避免页面空白 */

#dxcc-map {
  height: 70vh;          /* 视口 70% 高度 */
  min-height: 420px;     /* 防止主题样式压扁容器 */
  width: 100%;           /* 确保宽度铺满 */
  margin: 0 auto;
  padding: 0;
}

/* Leaflet 容器背景，调试用，可去掉 */
.leaflet-container {
  background: #f7f7f7;
}

/* ==== 去除 Leaflet 点击蓝框 ==== */
.leaflet-container,
.leaflet-container:focus,
.leaflet-interactive:focus,
.leaflet-marker-icon:focus,
.leaflet-control:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* 保险：去掉框选放大时的蓝色边框 */
.leaflet-zoom-box {
  border: 0 !important;
}

/* —— 弹窗（统一版，覆盖旧样式） —— */
.dxcc-modal{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: none;
  animation: dxcc-fade .18s ease-out;
}
@keyframes dxcc-fade { from{opacity:0} to{opacity:1} }

.dxcc-modal__inner{
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(980px, 92vw); max-height: min(82vh, 900px);
  overflow: auto;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,.25);
  padding: 18px 18px 22px;
  animation: dxcc-pop .18s ease-out;
}
@keyframes dxcc-pop { from{transform:translate(-50%,-48%) scale(.98)} to{transform:translate(-50%,-50%) scale(1)} }

.dxcc-modal__title{
  margin: 6px 6px 14px;
  font-weight: 700;
  letter-spacing: .2px;
  font-size: clamp(18px, 2.3vw, 22px);
}

/* 关闭按钮：统一黑色（iOS Safari 也黑） */
.dxcc-modal__close{
  position: sticky; float: right; top: 0;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center;
  font-size: 18px; line-height: 1; cursor: pointer;
  color: #000 !important;
  -webkit-text-fill-color: #000;
  -webkit-appearance: none; appearance: none;
  z-index: 10000;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: transform .12s ease, background .12s ease;
}
.dxcc-modal__close:hover{ transform: scale(1.06); background:#fff }

/* 卡片网格 */
.dxcc-cards{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

/* 单卡片：无红边框；整体轻浮起 */
.dxcc-card{
  display:flex; flex-direction:column; gap:10px;
  text-decoration:none; color:inherit;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 14px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dxcc-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.12);
}

/* 统一图片容器：默认不设固定比例，由 JS 按图片真实宽高写入 aspect-ratio */
.dxcc-card__img{
  position: relative;
  width: 100%;
  /* 关键：不预设 3:2/2:3，由 JS 写入真实比例 */
  aspect-ratio: auto !important;
  border: 0 !important;                /* 强制去红边框 */
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.dxcc-card__img::before, .dxcc-card__img::after{
  content:''; border:0 !important; box-shadow:none !important; outline:none !important;
}

/* <img> 自适应：完整显示不裁切 */
.dxcc-card__img > img{
  max-width: 100%;
  max-height: 60vh;                    /* 防止超高撑爆弹窗，可按需调整 */
  width: auto; height: auto;
  display: block; object-fit: contain;
}

/* 文本区 */
.dxcc-card__meta{ padding: 0 2px 2px }
.dxcc-card__title{ font-weight: 700; margin-bottom: 4px; }
.dxcc-card__sub{ font-size: 12px; color: #555 }

/* 夜间模式 */
@media (prefers-color-scheme: dark) {
  .dxcc-modal{ background: rgba(0,0,0,.55) }
  .dxcc-modal__inner{ background: rgba(28,28,30,.78); border-color: rgba(255,255,255,.06) }
  .dxcc-modal__close{ background: rgba(255,255,255,.06); color:#fff; border-color: rgba(255,255,255,.1) }
  .dxcc-card{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.06) }
  .dxcc-card__sub{ color: #bbb }
}

/* 打开弹窗时禁滚屏 */
body.dxcc-lock{ overflow: hidden }

/* —— 彻底去蓝色外框（Leaflet + Modal） —— */
.leaflet-container,
.leaflet-container *:focus,
.leaflet-interactive:focus,
.leaflet-marker-icon:focus,
.leaflet-control:focus,
.dxcc-modal *:focus,
.dxcc-card:focus,
.dxcc-card__img:focus,
.dxcc-card a:focus{
  outline: none !important;
  box-shadow: none !important;
}
.leaflet-zoom-box{ border:0 !important }

/* 打开弹窗时禁滚屏 */
body.dxcc-lock{ overflow: hidden }

/* —— 顶部进度条（红色=已收集 / 灰色=未收集） —— */
.dxcc-progress{ margin: 10px 0 16px; }
.dxcc-progress__track{
  position: relative;
  height: 10px;
  background: #ddd;            /* 灰色代表未收集 */
  border-radius: 999px;
  overflow: hidden;
}
.dxcc-progress__fill{
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: #d22;            /* 红色代表已收集 */
  width: 0;
}
.dxcc-progress__label{
  margin-top: 6px;
  font-size: 14px;
  color: #333;
}
@media (prefers-color-scheme: dark){
  .dxcc-progress__track{ background: #444; }
  .dxcc-progress__label{ color: #ddd; }
}
/* DXCC 进度条右对齐文字 */
.dxcc-progress__label {
  text-align: right;
  font-family: system-ui, sans-serif;
  font-size: 0.95em;
  color: #333;
  margin-top: 4px;
}