/* 运行状态视图样式 (Service Status View Styles) */

/* ==========================================================================
   1. 系统状态监控小卡片组件 (System Status Cards)
   ========================================================================== */
.status-card-fill {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.status-card-full-height {
    height: 100%;
}

.status-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.status-card-header--compact {
    margin-bottom: 20px;
}

/* 状态卡片右上角特色状态图标背景容器 */
.status-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* 根据监控资源性质设定专属主题色 */
.status-card-icon--service {
    background: rgba(59, 130, 246, 0.1); /* 系统后台服务蓝色 */
}

.status-card-icon--eew {
    background: rgba(103, 80, 164, 0.12); /* EEW地震预警核心紫色 */
}

.status-card-icon--actions {
    background: rgba(236, 72, 153, 0.1); /* 快捷动作栏粉色 */
}

.status-card-title {
    font-weight: 700 !important;
}

.status-card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    justify-content: center;
}

/* 单项参数左右对照分布行 */
.status-card-row {
    display: flex;
    justify-content: space-between;
}

.status-card-row--center {
    align-items: center;
}

.status-card-label {
    opacity: 0.7;
    font-weight: 500 !important;
}

.status-card-value {
    font-weight: 600 !important;
}

.status-card-separator {
    height: 1px;
    background: var(--md-sys-color-outline-variant);
}

.status-card-ratio-separator {
    opacity: 0.4;
}

/* 系统监控加载时骨架屏 */
.status-card-skeleton-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    justify-content: center;
}

.status-skeleton-line {
    height: 24px;
    border-radius: 6px;
}

.eew-skeleton-line {
    height: 20px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.eew-skeleton-line--wide {
    width: 85%;
}

.eew-skeleton-line--medium {
    width: 70%;
    margin-bottom: 0;
}

/* ==========================================================================
   2. 地震预警应急事件状态显示 (EEW Real-time Response)
   ========================================================================== */
.eew-empty-text {
    opacity: 0.75;
}

.eew-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 核心预警文本信息 (大号高对比度字体展示应急防灾指令) */
.eew-line-strong {
    font-weight: 600 !important;
}

.eew-line-muted {
    opacity: 0.92;
}

.eew-line-subtle {
    opacity: 0.85;
}

.eew-section-spacer {
    height: 8px;
}

/* ==========================================================================
   3. WebSocket 灾害发布接口多路监听状态网格 (Disaster Source WS Connect Grid)
   ========================================================================== */
.status-connections-grid {
    display: grid;
    /* 固定 4 列：第 2 列 P2P+S-Net，第 4 列 GQ+EQSC 上下堆叠 */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.status-connections-grid.connections-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 堆叠列：P2P+S-Net / GQ+EQSC 共享高度 */
.connection-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    height: 100%;
}

.connection-stack > .connection-item,
.connection-stack > .status-connection-skeleton-card {
    flex: 1 1 0;
    min-height: 0;
}

@media (max-width: 1024px) {
    .status-connections-grid,
    .status-connections-grid.connections-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .status-connections-grid,
    .status-connections-grid.connections-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .status-connections-grid .connection-stack {
        display: contents;
    }

    .status-connections-grid .connection-item--compact {
        min-height: 140px;
        padding: 16px;
    }
}

/* 长连接项目列表项骨架屏 */
.status-connection-skeleton-card {
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    padding: 20px;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.status-skeleton-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-skeleton-title {
    width: 120px;
    height: 22px;
    border-radius: 6px;
}

.status-skeleton-badge {
    width: 60px;
    height: 24px;
    border-radius: 12px;
}

.status-skeleton-subtitle {
    width: 80%;
    height: 16px;
    border-radius: 4px;
}

.status-skeleton-subtitle--short {
    width: 60%;
}

/* 接口服务提供商名字（与主备标签水平垂直居中） */
.connection-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
    color: var(--md-sys-color-on-surface);
}

/* 服务器主备标签 */
.server-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transform: translateY(-1px);
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.server-badge--primary {
    background: rgba(76, 175, 80, 0.15);
    color: #2E7D32;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.server-badge--backup {
    background: rgba(255, 193, 7, 0.15);
    color: #B26A00;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

html.theme-dark .server-badge--primary,
body.dark-theme .server-badge--primary {
    background: rgba(76, 175, 80, 0.2);
    color: #81C784;
    border-color: rgba(76, 175, 80, 0.4);
}

html.theme-dark .server-badge--backup,
body.dark-theme .server-badge--backup {
    background: rgba(255, 193, 7, 0.2);
    color: #FFD54F;
    border-color: rgba(255, 193, 7, 0.4);
}

/* 单个连接通道卡片本体 —— 命中壳 / 视觉面分离 */
.connection-item {
    --hover-lift: 2px;
    --card-bg: var(--md-sys-color-surface);
    --card-border-color: var(--glass-border);
    --card-shadow: none;
    --card-hover-border-color: var(--md-sys-color-primary);
    --card-hover-shadow: var(--glass-shadow), 0 0 0 1px color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent);
    position: relative;
    isolation: isolate;
    border-radius: 16px;
    border: 1px solid transparent;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 140px;
    background: transparent;
    box-shadow: none;
    transition: color 0.2s ease-out;
}

.connection-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--card-bg);
    border: 1px solid var(--card-border-color);
    box-shadow: var(--card-shadow);
    pointer-events: none;
    /* 短过渡无需常驻 will-change，避免每张卡都预建合成层 */
    transition:
        transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
        background 0.2s ease-out,
        border-color 0.2s ease-out,
        box-shadow 0.22s ease-out;
}

/*
 * 内容层：与视觉面同步上浮。
 * 防糊策略：
 * 1) 内容层不挂 will-change / font-smoothing（避免全局影响子树）
 * 2) hover 用 translate3d 整像素位移
 * 3) 子项 .connection-sub-source-item 禁止再挂 transform/will-change
 * 4) 字体平滑仅落在真正易糊的小字选择器上
 */
.connection-item > * {
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 堆叠列内的精简卡片（P2P / S-Net / GQ / EQSC）
 * 彻底移除头部、摘要及分割线的覆盖，继承基类所有属性，确保全维度精准一致
 */
.connection-item--compact {
    min-height: 0;
}

.status-connection-skeleton-card--compact {
    min-height: 110px;
}

.connection-item:hover::before,
.connection-item:hover > * {
    /* translate3d 保持整像素位移，避免子像素采样导致文字发糊 */
    transform: translate3d(0, calc(-1 * var(--hover-lift)), 0);
}

.connection-item:hover::before {
    border-color: var(--card-hover-border-color);
    box-shadow: var(--card-hover-shadow);
}

html.theme-dark .connection-item,
body.dark-theme .connection-item {
    --card-hover-shadow: var(--glass-shadow), 0 0 0 1px color-mix(in srgb, var(--md-sys-color-primary) 26%, transparent);
}

/* 通道正常在线 (绿色底纹混合) */
.connection-item-online {
    --card-bg: var(--status-tone-online-soft);
    --card-border-color: var(--status-tone-online-border);
}

/* 通道网络离线或重连中 (红色底纹混合) */
.connection-item-offline {
    --card-bg: var(--status-tone-offline-soft);
    --card-border-color: var(--status-tone-offline-border);
}

/* 通道未配置或被管理员停用 (灰色底纹混合) */
.connection-item-disabled {
    --card-bg: var(--status-tone-disabled-soft);
    --card-border-color: var(--status-tone-disabled-border);
}

.connection-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 24px;
    margin-bottom: 12px;
}


.connection-status-cluster {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
}

/* 通道当前异常重新建立连接次数标志 */
.connection-retry-count {
    color: #ED6C02;
    font-weight: 600 !important;
}

/* 通道右上角核心状态指示呼吸灯点 */
.connection-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: background-color 0.3s;
}

.connection-item-online .connection-indicator {
    background: #4CAF50;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
}

.connection-item-offline .connection-indicator {
    background: #F44336;
    box-shadow: 0 0 8px rgba(244, 67, 54, 0.6);
}

.connection-item-disabled .connection-indicator {
    background: #9E9E9E;
}

.connection-summary {
    min-height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    margin-bottom: 16px;
}

/* 连接状态名 (例如 "连接正常", "通道断开") */
.connection-status-label {
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    display: flex;
    align-items: center;
}

.connection-item-online .connection-status-label {
    color: #4CAF50;
}

.connection-item-offline .connection-status-label {
    color: #F44336;
}

.connection-item-disabled .connection-status-label {
    color: #9E9E9E;
}

/* 通道握手往返延迟统计 */
.connection-latency-line {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.85rem !important;
    margin-top: 4px !important;
    display: flex;
    align-items: center;
    gap: 4px;
}

.connection-latency-line.is-pending {
    opacity: 0.6;
    font-style: italic;
}

.connection-latency-icon {
    font-size: 0.75rem;
}

.connection-latency-value {
    font-weight: 600;
}

/* 通道往返手延迟等级颜色划分 (根据延迟毫秒数划分) */
.connection-latency-value--fast {
    color: #4CAF50;
}

.connection-latency-value--medium {
    color: #FF9800;
}

.connection-latency-value--slow {
    color: #F44336;
}

/* ==========================================================================
   4. 数据源细分子接口通道状态列表 (Sub Sources Connections)
   ========================================================================== */
.connection-sub-source-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}

body.dark-theme .connection-sub-source-section {
    border-top-color: rgba(255, 255, 255, 0.14);
}

.connection-sub-source-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.connection-sub-source-title {
    opacity: 0.8;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase;
}

.connection-sub-source-count {
    opacity: 0.6;
    font-size: 11px !important;
    font-weight: 600 !important;
}

.connection-sub-source-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 子通道容器单条 */
.connection-sub-source-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
    background: var(--md-sys-color-surface);
    border: 1px solid rgba(76, 175, 80, 0.15);
    /* 仅背景/描边反馈；不要 will-change:transform，否则嵌套在父级 hover 位移层内会糊字 */
    transition:
        background-color 0.18s ease-out,
        border-color 0.18s ease-out,
        box-shadow 0.2s ease-out;
    transform: none;
    will-change: auto;
}

.connection-sub-source-item:hover {
    background: color-mix(in srgb, var(--md-sys-color-surface) 92%, var(--md-sys-color-primary) 8%);
}

.connection-sub-source-item.is-disabled {
    background: rgba(0, 0, 0, 0.03);
    border-color: transparent;
}

.connection-sub-source-item.is-disabled:hover {
    background: rgba(0, 0, 0, 0.04);
}

body.dark-theme .connection-sub-source-item:hover,
html.theme-dark .connection-sub-source-item:hover {
    background: color-mix(in srgb, var(--md-sys-color-surface) 90%, var(--md-sys-color-primary) 10%);
}

body.dark-theme .connection-sub-source-item.is-disabled,
html.theme-dark .connection-sub-source-item.is-disabled {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .connection-sub-source-item.is-disabled:hover,
html.theme-dark .connection-sub-source-item.is-disabled:hover {
    background: rgba(255, 255, 255, 0.06);
}

.connection-sub-source-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4CAF50;
    margin-right: 12px;
    flex-shrink: 0;
}

.connection-sub-source-item.is-disabled .connection-sub-source-dot {
    background: #BDBDBD;
}

.connection-sub-source-name,
.connection-sub-source-title,
.connection-sub-source-count,
.connection-sub-source-off-badge {
    /* 仅小字号文案做字体平滑；不使用 text-rendering，避免影响字距/布局 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.connection-sub-source-name {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--md-sys-color-on-surface);
    flex: 1;
    line-height: 1.2 !important;
}

.connection-sub-source-item.is-disabled .connection-sub-source-name {
    font-weight: 400 !important;
    color: var(--md-sys-color-on-surface-variant);
}

/* 被管理员禁用的提示芯片 */
.connection-sub-source-off-badge {
    font-size: 10px !important;
    color: color-mix(in srgb, var(--md-sys-color-on-surface) 45%, transparent);
    font-weight: 700 !important;
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent);
    border: 1px solid transparent;
    padding: 2px 6px;
    border-radius: 6px;
    letter-spacing: 0.3px !important;
}

body.dark-theme .connection-sub-source-off-badge {
    color: #E6E1E5;
    background: rgba(208, 188, 255, 0.18);
    border-color: rgba(208, 188, 255, 0.35);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.connection-empty-detail {
    color: var(--md-sys-color-on-surface-variant);
    font-style: italic;
    opacity: 0.7;
}

/* ==========================================================================
   5. FAN Studio 翻转卡片 (Front: 主通道 / Back: CENC 烈度速报独立 WS)
   ========================================================================== */
.connection-item--flippable {
    /* 翻转壳：保留原 connection-item 命中区域，内部做 3D 翻面 */
    padding: 0;
    min-height: 140px;
    cursor: default;
    perspective: 1400px;
    /* 外壳本身不再画底色，改由当前可见面承担，避免双层边框 */
    --card-bg: transparent;
    --card-border-color: transparent;
    --card-shadow: none;
    --card-hover-border-color: transparent;
    --card-hover-shadow: none;

    background: transparent;
    /*
     * 防糊关键：不要对「带 perspective 的 3D 容器」再叠 translate transform。
     * 上浮改用 top 整像素位移，避免 3D 子树二次投影导致文字发糊。
     */
    top: 0;
    transition:
        top 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
        color 0.2s ease-out;
}

.connection-item--flippable::before {
    /* 外壳不绘制视觉面，避免与 flip face 叠边 */
    display: none;
}

/*
 * hover 上浮策略（防糊 + 不破坏翻转）：
 * 1) 外壳用 top 上浮，禁止 transform（perspective + translate 会糊字）
 * 2) 禁止 .connection-item:hover > * 把 transform 叠到 flip-inner
 * 3) 翻转态必须显式保留 rotateY，避免 hover 规则覆盖 is-flipped
 */
.connection-item--flippable:hover {
    top: calc(-1 * var(--hover-lift));
    /* 覆盖可能继承的 transform 上浮，保持 3D 文字清晰 */
    transform: none;
}

.connection-item--flippable:hover::before {
    transform: none;
}

.connection-item--flippable:hover > .connection-flip-inner {
    /* 覆盖通用 .connection-item:hover > * 的上浮，避免覆盖 3D 翻转 */
    transform: none;
}

.connection-item--flippable:hover > .connection-flip-inner.is-flipped {
    transform: rotateY(180deg);
}

.connection-flip-inner {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    min-height: inherit;
    transform-style: preserve-3d;
    transform-origin: center center;
    transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.connection-flip-inner.is-flipped {
    transform: rotateY(180deg);
}

.connection-flip-face {
    /* 两面叠在同一网格单元，高度取较高一面，避免翻转时塌陷 */
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 140px;
    height: 100%;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid var(--card-border-color, var(--glass-border));
    background: var(--card-bg, var(--md-sys-color-surface));
    box-shadow: var(--card-shadow, none);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /*
     * translateZ(0) 把可见面钉在整像素合成层，减轻 perspective 下文字发糊。
     * 不要对内容子节点再挂 transform/will-change。
     */
    transform: rotateY(0deg) translateZ(0);
    transition:
        border-color 0.2s ease-out,
        box-shadow 0.22s ease-out,
        background 0.2s ease-out;
}

.connection-flip-face--front {
    /* 正面默认在上层，保证未翻转时可点 */
    z-index: 2;
}

.connection-flip-face--back {
    transform: rotateY(180deg) translateZ(0);
    z-index: 1;
}

/* 隐藏面禁用命中，避免叠层挡住可见面的 ⇋ 按钮 */
.connection-flip-inner:not(.is-flipped) .connection-flip-face--back,
.connection-flip-inner.is-flipped .connection-flip-face--front {
    pointer-events: none;
}

/* 翻转面沿用 online/offline/disabled 色板变量 */
.connection-flip-face.connection-item-online {
    --card-bg: var(--status-tone-online-soft);
    --card-border-color: var(--status-tone-online-border);
}

.connection-flip-face.connection-item-offline {
    --card-bg: var(--status-tone-offline-soft);
    --card-border-color: var(--status-tone-offline-border);
}

.connection-flip-face.connection-item-disabled {
    --card-bg: var(--status-tone-disabled-soft);
    --card-border-color: var(--status-tone-disabled-border);
}

.connection-item--flippable:hover .connection-flip-face {
    border-color: var(--md-sys-color-primary);
    box-shadow: var(--glass-shadow), 0 0 0 1px color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent);
}

html.theme-dark .connection-item--flippable:hover .connection-flip-face,
body.dark-theme .connection-item--flippable:hover .connection-flip-face {
    box-shadow: var(--glass-shadow), 0 0 0 1px color-mix(in srgb, var(--md-sys-color-primary) 26%, transparent);
}

/* 右上角翻转入口：状态灯左侧的 ⇋ 按钮，仅点击触发 */
.connection-flip-toggle {
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
    background: color-mix(in srgb, var(--md-sys-color-surface) 82%, var(--md-sys-color-primary) 18%);
    color: var(--md-sys-color-primary);
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    transition:
        background-color 0.18s ease-out,
        border-color 0.18s ease-out,
        color 0.18s ease-out,
        transform 0.18s ease-out,
        box-shadow 0.18s ease-out;
}

.connection-flip-toggle:hover {
    background: color-mix(in srgb, var(--md-sys-color-primary-container) 70%, var(--md-sys-color-surface) 30%);
    border-color: color-mix(in srgb, var(--md-sys-color-primary) 45%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--md-sys-color-primary) 18%, transparent);
    transform: scale(1.06);
}

.connection-flip-toggle:active {
    transform: scale(0.94);
}

.connection-flip-toggle:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--md-sys-color-primary) 55%, transparent);
    outline-offset: 2px;
}

/* 背面状态灯/文案色跟随背面自身 status class */
.connection-flip-face.connection-item-online .connection-indicator {
    background: #4CAF50;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
}

.connection-flip-face.connection-item-offline .connection-indicator {
    background: #F44336;
    box-shadow: 0 0 8px rgba(244, 67, 54, 0.6);
}

.connection-flip-face.connection-item-disabled .connection-indicator {
    background: #9E9E9E;
    box-shadow: none;
}

.connection-flip-face.connection-item-online .connection-status-label {
    color: #4CAF50;
}

.connection-flip-face.connection-item-offline .connection-status-label {
    color: #F44336;
}

.connection-flip-face.connection-item-disabled .connection-status-label {
    color: #9E9E9E;
}

@media (prefers-reduced-motion: reduce) {
    .connection-item--flippable {
        transition: none;
    }

    .connection-item--flippable:hover {
        top: 0;
        transform: none;
    }

    .connection-flip-inner {
        transition: none;
    }

    .connection-flip-toggle {
        transition: none;
    }
}

/* ==========================================================================
   6. 顶部三栏竖向滚动跑马灯 (Vertical News Ticker: 地震 / 气象 / 海啸+台风)
   ========================================================================== */
.news-ticker-card {
    --hover-lift: 0px;
    padding: 0 24px !important;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    /* 不追加底部外边距：跑马灯与下方卡片的间距统一交给
       .dashboard-grid 的 gap（24px）接管 */
    margin-bottom: 0;
}

/* 加载骨架态：保持单行横排布局 */
.news-ticker-card--loading {
    gap: 16px;
    height: 56px;
    padding: 0 24px !important;
}

.news-ticker-card.is-dark {
    --card-bg: var(--md-sys-color-surface);
    --card-border-color: rgba(255, 255, 255, 0.1);
    color: var(--md-sys-color-on-surface);
}

.news-ticker-card.is-light {
    --card-bg: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.news-ticker-card--empty {
    overflow: visible;
}

/* 走马灯左侧固定标题面板。
   竖向布局下无横向滑入元素，去除右侧投影与面板底色，
   避免在文字后方形成独立色块/阴影块。 */
.news-ticker-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    min-width: fit-content;
    z-index: 2;
    background: transparent;
    padding-right: 0;
    box-shadow: none;
}

.news-ticker-head--loading {
    font-size: 0.9rem;
    box-shadow: none;
    z-index: auto;
}

.news-ticker-head__icon {
    font-size: 18px;
}

.news-ticker-head__icon--large {
    font-size: 20px;
}

.news-ticker-head__title {
    font-weight: 700 !important;
}

.news-ticker-skeleton {
    flex: 1;
    height: 24px;
    border-radius: 12px;
}

.news-ticker-empty-text {
    opacity: 0.6;
    font-size: 0.9rem !important;
}

/* ── 三栏网格：占满标题右侧剩余宽度 ────────────────────────
   列宽比例 35:45:25（地震 : 气象 : 海啸+台风）。 */
.news-ticker-v-grid {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-columns: 7fr 9fr 5fr;
    gap: 16px;
    align-items: stretch;
}

/* 单栏容器：无底框无背景，文字直接在跑马灯条上滚 */
.news-ticker-v-column {
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* 竖向滚动遮罩视窗：上下淡入淡出。
   顶部淡出区收窄（8px），避免文字停在顶部时被模糊影响阅读。 */
.news-ticker-v-mask {
    height: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent, black 8px, black 92%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 8px, black 92%, transparent);
}

/* 事件过少（≤2 条）时的静态展示容器：纵向排列，不滚动。
   不加顶部内边距，保证与滚动轨道（贴顶）的停止位置一致。 */
.news-ticker-v-static {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 竖向无缝循环滚动动画轨道：内容自我复制双份，translateY 0→-50% 首尾相接。
   内容向上滚出（最新时间沉在底部），动画名/时长由 JSX 动态注入
   （含"播完停 3 秒再续"的关键帧），此处保留基础声明作为 JS 未注入时的兜底，
   并给出默认时长（12s），避免 animation 简写缺少时长回落为 0s 导致轨道静止。 */
.news-ticker-v-track {
    display: flex;
    flex-direction: column;
    animation: ticker-scroll-up 12s linear infinite;
    animation-play-state: running;
    will-change: transform;
}

/* 悬停走马灯时自动暂停滚动，方便管理员阅读 */
.news-ticker-v-track.is-paused {
    animation-play-state: paused;
}

/* 单条竖向播报条目 */
.news-ticker-v-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 2px;
    min-height: 24px;
    white-space: nowrap;
}

.news-ticker-time {
    opacity: 0.7;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* 时间标签跟随主题色：与震级胶囊内的 Mx.x 保持一致，明暗主题各自取主色 */
.news-ticker-time.is-dark {
    opacity: 0.95;
    color: var(--md-sys-color-primary);
}

.news-ticker-time.is-light {
    opacity: 0.9;
    color: var(--md-sys-color-primary);
}

.news-ticker-type-icon {
    font-size: 14px;
    line-height: 20px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* 气象预警颜色等级 Emoji：与类型图标同尺寸对齐，无额外间距干扰描述 */
.news-ticker-color-icon {
    font-size: 14px;
    line-height: 20px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* 走马灯内微型震级高亮胶囊 */
.news-ticker-mag-chip,
.news-ticker-mag-chip.MuiChip-root,
.news-ticker-mag-chip.MuiChip-sizeSmall,
.news-ticker-mag-chip.MuiChip-filled,
.news-ticker-mag-chip.MuiChip-filled.MuiChip-sizeSmall {
    height: 20px !important;
    min-height: 20px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 0 !important;
}

.news-ticker-mag-chip .MuiChip-label,
.news-ticker-mag-chip.MuiChip-root .MuiChip-label,
.news-ticker-mag-chip.MuiChip-sizeSmall .MuiChip-label,
.news-ticker-mag-chip.MuiChip-filled .MuiChip-label,
.news-ticker-mag-chip.MuiChip-filled.MuiChip-sizeSmall .MuiChip-label {
    padding: 0 7px !important;
    line-height: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    color: var(--md-sys-color-primary) !important;
}

.news-ticker-mag-chip.is-dark,
.news-ticker-mag-chip.is-dark.MuiChip-root,
.news-ticker-mag-chip.is-dark.MuiChip-sizeSmall,
.news-ticker-mag-chip.is-dark.MuiChip-filled,
.news-ticker-mag-chip.is-dark.MuiChip-filled.MuiChip-sizeSmall {
    background: rgba(208, 188, 255, 0.22) !important;
    color: var(--md-sys-color-primary) !important;
    border: 1px solid rgba(208, 188, 255, 0.45) !important;
    box-shadow: 0 0 0 1px rgba(208, 188, 255, 0.2), 0 6px 14px rgba(0, 0, 0, 0.25) !important;
}

.news-ticker-mag-chip.is-dark .MuiChip-label,
.news-ticker-mag-chip.is-dark.MuiChip-root .MuiChip-label,
.news-ticker-mag-chip.is-dark.MuiChip-sizeSmall .MuiChip-label,
.news-ticker-mag-chip.is-dark .MuiChip-label span {
    color: var(--md-sys-color-primary) !important;
}

.news-ticker-mag-chip.is-light,
.news-ticker-mag-chip.is-light.MuiChip-root,
.news-ticker-mag-chip.is-light.MuiChip-sizeSmall,
.news-ticker-mag-chip.is-light.MuiChip-filled,
.news-ticker-mag-chip.is-light.MuiChip-filled.MuiChip-sizeSmall {
    background: rgba(0, 0, 0, 0.08) !important;
    color: var(--md-sys-color-primary) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.news-ticker-mag-chip.is-light .MuiChip-label,
.news-ticker-mag-chip.is-light.MuiChip-root .MuiChip-label,
.news-ticker-mag-chip.is-light.MuiChip-sizeSmall .MuiChip-label,
.news-ticker-mag-chip.is-light .MuiChip-label span {
    color: var(--md-sys-color-primary) !important;
}

.news-ticker-desc {
    font-weight: 600 !important;
    line-height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 空栏目占位：居中显示，不加斜体 */
.news-ticker-v-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    opacity: 0.55;
    font-size: 12.5px !important;
    font-style: normal;
}

/* 竖向无缝滚动关键帧：内容向上滚出，最新时间沉在底部（轨道含双份数据） */
@keyframes ticker-scroll-up {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

@media (max-width: 1024px) {
    .news-ticker-v-grid {
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .news-ticker-card {
        height: 56px;
        padding: 0 14px !important;
    }

    /* 移动端跑马灯：压缩标题与栏间距，保证三栏文字可读 */
    .news-ticker-head {
        gap: 4px;
    }

    .news-ticker-head__icon {
        font-size: 15px;
    }

    .news-ticker-v-grid {
        gap: 8px;
        grid-template-columns: 7fr 9fr 5fr;
    }

    .news-ticker-time {
        font-size: 11px;
    }

    .news-ticker-desc {
        font-size: 12px;
    }

    /* 触屏设备：连接项点击区域至少 48px 高，避免误触 */
    .connection-item,
    .connection-item--compact {
        min-height: 48px;
    }

    .connection-flip-toggle {
        width: 28px;
        height: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .news-ticker-v-track {
        /* 内联 style（animationName/animationDuration）优先级高于样式表规则，
           必须加 !important 才能覆盖，真正关闭"减少动态效果"用户看到的滚动。 */
        animation: none !important;
        transform: none !important;
    }
}

/* ==========================================================================
   7. 快速操作控制卡片 (Status Quick Actions Card)
   ========================================================================== */
.status-quick-actions-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.status-quick-actions-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    justify-content: center;
}

.status-action-button {
    opacity: 1;
}

.status-action-button.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.status-action-icon {
    font-size: 18px;
}

/* 正在操作或重连测试中的小旋转加载圈 */
.status-action-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: var(--md-sys-color-primary);
    border-radius: 50%;
}

/* ==========================================================================
   8. 通道健康 Statuspage（90 天条带 + 事故）
   视觉：经典 statuspage 条带 + 管理端 surface/圆角体系
   ========================================================================== */
.connection-health-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.connection-health-subtitle {
    display: block;
    opacity: 0.68;
    margin-top: 2px;
    font-weight: 500 !important;
    font-size: 0.86rem !important;
}

/* 总横幅：经典实心色条，圆角贴合管理端 */
.connection-health-banner {
    border-radius: 10px;
    padding: 18px 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.connection-health-banner--operational {
    background: #2f855a;
}

.connection-health-banner--degraded {
    background: #b7791f;
}

.connection-health-banner--partial_outage {
    background: #c05621;
}

.connection-health-banner--major_outage {
    background: #c53030;
}

.connection-health-banner--not_monitored,
.connection-health-banner--maintenance {
    background: #718096;
}

.connection-health-banner__label {
    font-size: 1.2rem;
    letter-spacing: -0.01em;
}

.connection-health-banner__meta {
    font-size: 0.84rem;
    font-weight: 500;
    opacity: 0.92;
}

.connection-health-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 2px 2px 0;
}

.connection-health-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
}

.connection-health-legend__swatch {
    width: 10px;
    height: 18px;
    border-radius: 2px;
    display: inline-block;
}

/* 经典 statuspage 色：绿 / 黄 / 橙 / 红 / 灰 */
.connection-health-legend__swatch.is-operational,
.connection-health-bar.is-operational {
    background: #3ba55c;
}

.connection-health-legend__swatch.is-degraded,
.connection-health-bar.is-degraded {
    background: #f1c40f;
}

.connection-health-legend__swatch.is-partial_outage,
.connection-health-bar.is-partial_outage {
    background: #e67e22;
}

.connection-health-legend__swatch.is-major_outage,
.connection-health-bar.is-major_outage {
    background: #e74c3c;
}

.connection-health-legend__swatch.is-not_monitored,
.connection-health-bar.is-not_monitored,
.connection-health-legend__swatch.is-maintenance,
.connection-health-bar.is-maintenance {
    background: #dfe3e8;
}

body.dark-theme .connection-health-bar.is-not_monitored,
html.theme-dark .connection-health-bar.is-not_monitored,
body.dark-theme .connection-health-legend__swatch.is-not_monitored,
html.theme-dark .connection-health-legend__swatch.is-not_monitored,
body.dark-theme .connection-health-bar.is-maintenance,
html.theme-dark .connection-health-bar.is-maintenance {
    background: #4a5568;
}

/* 组件列表：统一白底 + 细分割 */
.connection-health-list {
    display: flex;
    flex-direction: column;
    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
    border-radius: 12px;
    overflow: hidden;
    background: var(--md-sys-color-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.connection-health-row {
    padding: 20px 20px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 45%, transparent);
    background: var(--md-sys-color-surface);
}

.connection-health-row:last-child {
    border-bottom: none;
}

.connection-health-row__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.connection-health-row__name {
    font-weight: 700 !important;
    font-size: 1.08rem !important;
    color: var(--md-sys-color-on-surface);
    line-height: 1.3 !important;
}

.connection-health-row__state {
    font-weight: 700 !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
}

.connection-health-row__state.is-operational { color: #2f855a; }
.connection-health-row__state.is-degraded { color: #b7791f; }
.connection-health-row__state.is-partial_outage { color: #c05621; }
.connection-health-row__state.is-major_outage { color: #c53030; }
.connection-health-row__state.is-not_monitored,
.connection-health-row__state.is-maintenance { color: #a0aec0; }

/* 条带：经典竖条
   - 不用 flex gap：间隙是 pointer 死区，会触发 enter/leave 高频闪烁
   - 分隔用 inset box-shadow，命中区域连续
   - hover 仅调亮度，禁止 scale（会改命中盒导致抖动） */
.connection-health-bars {
    display: flex;
    gap: 0;
    align-items: stretch;
    height: 36px;
    width: 100%;
    cursor: pointer;
}

.connection-health-bar {
    flex: 1 1 0;
    min-width: 0;
    display: block;
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    cursor: inherit;
    background: #dfe3e8;
    /* 右侧 1px 视觉分隔，不占用布局间隙 */
    box-shadow: inset -1px 0 0 color-mix(in srgb, var(--md-sys-color-surface) 88%, transparent);
    transition: filter 0.12s ease-out;
    pointer-events: none; /* 事件由父容器统一处理，避免条间死区 */
}

.connection-health-bar:last-child {
    box-shadow: none;
}

.connection-health-bar.is-hot {
    filter: brightness(0.92);
}

.connection-health-row__footer {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.82;
    line-height: 1.2;
}

.connection-health-row__edge {
    flex: 0 0 auto;
    white-space: nowrap;
}

.connection-health-row__rule {
    flex: 1 1 0;
    height: 1px;
    min-width: 12px;
    margin: 0 10px;
    /* 经典 statuspage 分隔线：足够可见，又不抢正文 */
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 28%, transparent);
    align-self: center;
}

body.dark-theme .connection-health-row__rule,
html.theme-dark .connection-health-row__rule {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}

.connection-health-row__uptime {
    flex: 0 0 auto;
    text-align: center;
    white-space: nowrap;
    font-weight: 650;
    font-size: 12.5px;
    color: var(--md-sys-color-on-surface-variant);
}

.connection-health-incidents {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
}

.connection-health-incidents__title {
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    font-size: 1.22rem !important;
}

.connection-health-incident-day {
    padding-bottom: 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 40%, transparent);
}

.connection-health-incident-day:last-child {
    border-bottom: none;
}

.connection-health-incident-day__label {
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    font-size: 1.05rem !important;
}

.connection-health-incidents__empty {
    opacity: 0.58;
    margin-bottom: 8px !important;
    font-size: 0.95rem !important;
}

.connection-health-incident {
    padding: 12px 14px;
    border-radius: 8px;
    border-left: 3px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 80%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 40%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 40%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 40%, transparent);
    background: color-mix(in srgb, var(--md-sys-color-surface) 97%, var(--md-sys-color-on-surface) 3%);
    margin-bottom: 10px;
}

.connection-health-incident__title {
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 0.95rem;
}

.connection-health-incident__title.is-major_outage {
    color: #c53030;
    border-color: #c53030;
}

.connection-health-incident:has(.is-major_outage) {
    border-left-color: #c53030;
}

.connection-health-incident:has(.is-partial_outage) {
    border-left-color: #c05621;
}

.connection-health-incident:has(.is-degraded) {
    border-left-color: #b7791f;
}

.connection-health-incident__title.is-partial_outage { color: #c05621; }
.connection-health-incident__title.is-degraded { color: #b7791f; }

.connection-health-incident__meta,
.connection-health-incident__time {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 2px;
}

.connection-health-incident__timeline {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
}

/* 自定义 tooltip：JS 写 left/top 为左上角，禁止 translate 造成贴边裁切 */
.connection-health-tooltip-layer {
    position: fixed;
    z-index: 1200;
    left: 0;
    top: 0;
    transform: none;
    pointer-events: none;
    max-width: min(280px, calc(100vw - 16px));
    box-sizing: border-box;
}

.connection-health-tooltip-layer.is-below {
    transform: none;
}

.connection-health-tooltip {
    min-width: 160px;
    max-width: min(260px, calc(100vw - 16px));
    padding: 10px 12px;
    border-radius: 8px;
    background: #1a202c;
    color: #f7fafc;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    font-size: 12px;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    box-sizing: border-box;
}

html.theme-dark .connection-health-tooltip,
body.dark-theme .connection-health-tooltip {
    background: #0f1419;
    border-color: rgba(255, 255, 255, 0.12);
}

.connection-health-tooltip__title {
    font-weight: 700;
    margin-bottom: 2px;
    font-size: 12.5px;
}

.connection-health-tooltip__day {
    opacity: 0.75;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
}

.connection-health-tooltip__line {
    opacity: 0.92;
}

.connection-health-error {
    color: #c53030;
    opacity: 0.9;
}

.connection-health-skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.connection-health-skeleton-banner {
    height: 52px;
    border-radius: 10px;
}

.connection-health-skeleton-row {
    height: 84px;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .connection-health-bars {
        height: 28px;
        gap: 0;
    }

    .connection-health-row {
        padding: 16px 14px 14px;
    }

    .connection-health-banner {
        padding: 14px 16px;
    }

    .connection-health-banner__label {
        font-size: 1.05rem;
    }

    .connection-health-row__name {
        font-size: 1rem !important;
    }

    .connection-health-row__state {
        font-size: 0.95rem !important;
    }

    .connection-health-row__rule {
        margin: 0 6px;
        min-width: 8px;
    }
}