/**
 * status.css — 数据源状态页（产品计划阶段二 2.2）
 * 样式引用 design-tokens.css 变量，禁止硬编码色值（docs/rules/frontend-architecture.md §四）
 */

.st-page {
    max-width: 920px;
    margin: 0 auto;
    padding: var(--agu-space-lg) var(--agu-space-md) var(--agu-space-xl);
}

/* ===== 总状态横幅 ===== */
.st-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--agu-space-md);
    padding: var(--agu-space-lg);
    border: 1px solid var(--agu-divider);
    border-radius: var(--agu-radius-lg);
    background: var(--agu-bg-card);
}

.st-banner-main {
    display: flex;
    align-items: center;
    gap: var(--agu-space-sm);
}

.st-banner-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--agu-success);
    flex-shrink: 0;
}

.st-banner-lag .st-banner-dot {
    background: var(--agu-warning);
}

.st-banner-error .st-banner-dot {
    background: var(--agu-danger);
}

.st-banner-title {
    margin: 0;
    font-size: var(--agu-font-xl);
    color: var(--agu-text);
}

.st-banner-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--agu-space-lg);
    font-size: var(--agu-font-sm);
    color: var(--agu-text-secondary);
}

.st-probe-ok {
    color: var(--agu-success);
    font-weight: 600;
}

.st-probe-error {
    color: var(--agu-danger);
    font-weight: 600;
}

/* ===== 分组表格 ===== */
.st-section {
    margin-top: var(--agu-space-lg);
}

.st-section-title {
    margin: 0 0 var(--agu-space-md);
    font-size: var(--agu-font-lg);
    color: var(--agu-text);
}

.st-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--agu-divider);
    border-radius: var(--agu-radius);
    background: var(--agu-bg-card);
}

.st-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--agu-font-sm);
}

.st-table th,
.st-table td {
    padding: var(--agu-space-sm) var(--agu-space-md);
    text-align: left;
    border-bottom: 1px solid var(--agu-divider);
}

.st-table th {
    color: var(--agu-text-secondary);
    font-weight: 600;
    white-space: nowrap;
    background: var(--agu-bg-soft);
}

.st-table tbody tr:last-child td {
    border-bottom: none;
}

/* ===== 状态徽标 ===== */
.st-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--agu-radius-pill);
    font-size: var(--agu-font-xs);
    white-space: nowrap;
    background: var(--agu-bg-soft);
}

.st-badge-ok {
    color: var(--agu-success);
}

.st-badge-lag {
    color: var(--agu-warning);
}

.st-badge-empty {
    color: var(--agu-text-muted);
}

.st-badge-error {
    color: var(--agu-danger);
}

/* ===== 说明区 ===== */
.st-legend {
    margin: 0;
    padding-left: var(--agu-space-lg);
    color: var(--agu-text-secondary);
    font-size: var(--agu-font-sm);
}

.st-legend li {
    margin: var(--agu-space-xs) 0;
    display: flex;
    align-items: center;
    gap: var(--agu-space-sm);
}

.st-note {
    margin-top: var(--agu-space-sm);
    color: var(--agu-text-muted);
    font-size: var(--agu-font-sm);
}

.st-note a {
    color: var(--agu-link);
}