/* 城市群专题页 /map/chengshiqun
 * 依赖 earthquakes.css（eq-* 工作区/侧栏基座）+ geography.css（geo-* 列表/详情基座），
 * 本文件只补 cc-* 专有：批复徽章、图例色块、成员标签、文档列表、Leaflet tooltip。
 */

/* 图表容器尺寸：earthquakes.css 的 #eqChart 规则不会命中本页的 #ccChart，必须镜像声明，
   否则容器高度坍塌为 0，ECharts geo 组件在 0 高画布下 resize 内部访问 null[0] 报错 */
#ccChart {
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* 全屏按钮与图层开关同高（id 与 geography 页不同，单独对齐） */
#ccFullscreenBtn {
    padding-top: 0.22rem;
    padding-bottom: 0.22rem;
}

#ccFullscreenBtn i {
    font-size: 0.78rem;
}

/* 图例：批复状态色块 + 文档数气泡（配色与 JS 内 COLOR 常量一致） */
.cc-lg-face {
    display: inline-block;
    width: 12px;
    height: 9px;
    border-radius: 3px;
}

/* 图例面色块：与地图面渲染一致，颜色取自站点主题变量（随主题切换） */
.cc-lg-face--approved {
    background: color-mix(in srgb, var(--bs-primary) 72%, transparent);
    border: 1px solid var(--sc-deep-primary);
}

.cc-lg-face--unapproved {
    background: color-mix(in srgb, var(--sc-solid-gold) 72%, transparent);
    border: 1px solid var(--sc-deep-gold);
}

/* 批复状态徽章（侧栏列表 + 详情面板共用，pill 形状） */
.cc-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.35;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
}

.cc-badge i {
    font-size: 0.6rem;
    margin-right: 0.22rem;
}

/* 批复徽章：站点状态徽章同款浅底+深字派生色（随主题切换） */
.cc-badge--approved {
    color: var(--sc-deep-primary);
    background: var(--sc-badge-primary);
}

.cc-badge--unapproved {
    color: var(--sc-deep-gold);
    background: var(--sc-badge-gold);
}

.cc-badge--tier {
    color: #57534e;
    background: rgba(120, 113, 108, 0.12);
}

/* 成员数统计徽章：轻量灰蓝，弱于批复/梯队徽章 */
.cc-badge--count {
    color: #64748b;
    background: rgba(100, 116, 139, 0.1);
}

/* 详情面板：信息区置顶固定 + 文档列表独立滚动（参照 /map/dili 详情置顶结构，
   成员名单不占面板，聚焦后显示在地图注记上）。面板自身不滚动，撑满侧栏面板头
   以下全部空间直到底部，只有 #ccDocsList 内部滚动 */
#ccDetail.eq-detail {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow: hidden;
}

#ccDetail.eq-detail.d-none {
    display: none !important;
}

.cc-detail-info {
    flex-shrink: 0;
}

.cc-detail-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem 0.3rem;
}

/* 简介正文：无标题行直接展示 */
.cc-detail-desc {
    padding: 0.35rem 0.75rem 0;
    font-size: 0.84rem;
    color: #37424c;
    line-height: 1.65;
    word-break: break-word;
}

/* 规划文件 / 口径说明：无标题行，图标 + 浅底圆角直接展示正文
   （不用左竖线，与标题/强调样式区分；两块同结构、配色区分层级） */
.cc-detail-plan,
.cc-detail-note {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0.5rem 0.75rem 0;
    padding: 0.45rem 0.6rem;
    font-size: 0.78rem;
    line-height: 1.55;
    border-radius: 0.4rem;
    word-break: break-word;
}

.cc-detail-plan {
    color: var(--sc-deep-primary);
    background: color-mix(in srgb, var(--bs-primary) 6%, transparent);
}

.cc-detail-plan > i {
    flex-shrink: 0;
    margin-top: 0.18rem;
    font-size: 0.72rem;
    color: var(--bs-primary, #2163e8);
}

/* 口径说明：灰蓝系，与规划文件的蓝系区分 */
.cc-detail-note {
    color: #5b6b7c;
    background: rgba(120, 113, 108, 0.07);
}

.cc-detail-note > i {
    flex-shrink: 0;
    margin-top: 0.18rem;
    font-size: 0.72rem;
    color: #8a95a1;
}

/* 关联文档区：标题行置顶固定 / 列表独立滚动 / 分页 */
#ccDocsList {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 0.75rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cc-docs-head {
    flex-shrink: 0;
    margin-top: 0.65rem;
    padding: 0.55rem 0.75rem 0.3rem;
    border-top: 1px dashed #e2e8f0;
    font-size: 0.78rem;
    font-weight: 700;
    color: #4b5563;
}

.cc-doc-item {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    transition: background 0.15s ease;
}

.cc-doc-item:hover {
    background: #f2f6fb;
}

.cc-doc-item-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.45;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cc-doc-item:hover .cc-doc-item-title {
    color: var(--bs-primary, #2163e8);
}

.cc-doc-item-meta {
    font-size: 0.7rem;
    color: #8a95a1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-docs-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.55rem;
    padding: 0 0.55rem 0.45rem;
}

.cc-docs-prev,
.cc-docs-next {
    font-size: 0.72rem;
    padding: 0.16rem 0.55rem;
}

.cc-docs-page {
    font-size: 0.72rem;
    color: #8a95a1;
    white-space: nowrap;
}

/* Leaflet 在线模式：面 tooltip 与名称注记 */
.cc-leaf-tip {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.78rem;
    line-height: 1.35;
}

.cc-leaf-tip b {
    font-size: 0.82rem;
}

.cc-leaf-tip-sub {
    color: #64748b;
    font-size: 0.7rem;
}

/* 群名注记：竖排（每字一行）避免全国视图相邻群名横向重叠；
   小字号 + 紧凑内边距，缩小注记体积减少互相遮挡；
   前缀 .leaflet-tooltip 提高优先级，防止 leaflet.css 默认 padding 覆盖 */
.leaflet-tooltip.cc-leaf-name {
    writing-mode: vertical-rl;
    font-size: 0.66rem;
    font-weight: 600;
    color: #334155;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 0.2rem 0.1rem;
    line-height: 1.1;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}