/* ==========================================
 * 全聚合 MCN 数据中心 — Kalodata 风格设计系统
 * ========================================== */

/* ── 字体加载 ── */
/* Google Webfont stripped to fix 28s blocking latency in China */

/* ── 设计令牌 (亮色主题 - 默认) ── */
:root {
    --kd-primary: #0191F8;
    --kd-primary-hover: #0178D4;
    --kd-primary-light: #E6F4FE;
    --kd-primary-bg: #EEF6FD;
    --kd-text-default: #222222;
    --kd-text-secondary: #666666;
    --kd-text-muted: #999999;
    --kd-text-hint: #BBBBBB;
    --kd-bg-page: #F7FBFE;
    --kd-bg-container: #FFFFFF;
    --kd-bg-header: #F3F7FC;
    --kd-bg-sidebar: #FFFFFF;
    --kd-border: #EEEEEE;
    --kd-border-light: #F5F5F5;
    --kd-shadow: 0 2px 4px rgba(34,34,34,0.08);
    --kd-shadow-lg: 0 4px 12px rgba(34,34,34,0.12);
    --kd-radius: 8px;
    --kd-success: #52C41A;
    --kd-warning: #FAAD14;
    --kd-danger: #F94B60;
}

/* ── 设计令牌 (暗色主题) ── */
.dark {
    --kd-primary: #0191F8;
    --kd-primary-hover: #3EAAFD;
    --kd-primary-light: rgba(1,145,248,0.12);
    --kd-primary-bg: rgba(1,145,248,0.08);
    --kd-text-default: #E8EAED;
    --kd-text-secondary: #9AA0A6;
    --kd-text-muted: #6B7280;
    --kd-text-hint: #4B5563;
    --kd-bg-page: #0B1120;
    --kd-bg-container: #141B2D;
    --kd-bg-header: #1A2236;
    --kd-bg-sidebar: #111827;
    --kd-border: #1F2937;
    --kd-border-light: #1A2332;
    --kd-shadow: 0 2px 4px rgba(0,0,0,0.3);
    --kd-shadow-lg: 0 4px 12px rgba(0,0,0,0.4);
}

/* ── 全局基线 ── */
html { font-size: 14px; }
body {
    background-color: var(--kd-bg-page);
    color: var(--kd-text-default);
    font-family: Roboto, 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── 滚动条 (10px 宽, 更好的点击区域) ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
.dark ::-webkit-scrollbar-thumb { background: #374151; background-clip: padding-box; }
.dark ::-webkit-scrollbar-thumb:hover { background: #4B5563; background-clip: padding-box; }

/* ── 玻璃效果 (暗色主题用) ── */
.glass {
    background: var(--kd-bg-container);
    border: 1px solid var(--kd-border);
    box-shadow: var(--kd-shadow);
}

/* ── 动画 ── */
.fade-in { animation: fadeIn 0.35s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── 折叠面板 ── */
.collapse-panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.collapse-panel.open { max-height: 500px; }

/* ── 下拉选择器 ── */
select option { background-color: var(--kd-bg-container); color: var(--kd-text-default); font-weight: 500; cursor: pointer; }
select optgroup { background-color: var(--kd-bg-header); color: var(--kd-text-muted); font-weight: 700; font-style: normal; }

/* ── 侧栏详情抽屉 ── */
.detail-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:90; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.detail-overlay.open { opacity:1; pointer-events:auto; }
.detail-drawer { position:fixed; top:0; right:0; width:78%; max-width:1200px; height:100vh; background:var(--kd-bg-container); border-left:1px solid var(--kd-border); z-index:100; transform:translateX(100%); transition:transform 0.35s cubic-bezier(.4,0,.2,1); overflow-y:auto; box-shadow:-8px 0 40px rgba(0,0,0,0.15); }
.detail-drawer.open { transform:translateX(0); }
.detail-drawer::-webkit-scrollbar { width: 8px; }
.detail-drawer::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 10px; }
.dark .detail-drawer::-webkit-scrollbar-thumb { background: #374151; }

/* ── 数据卡片 ── */
.stat-card { background:var(--kd-bg-container); border:1px solid var(--kd-border); border-radius:var(--kd-radius); padding:16px 20px; box-shadow:var(--kd-shadow); }

/* ── 详情标签页 ── */
.detail-tab { padding:8px 16px; font-size:13px; font-weight:500; border-radius:var(--kd-radius); cursor:pointer; transition:all 0.2s; color:var(--kd-text-muted); }
.detail-tab:hover { color:var(--kd-text-default); background:var(--kd-bg-header); }
.detail-tab.active { color:var(--kd-primary); background:var(--kd-primary-light); border:1px solid var(--kd-primary); }

/* ── 详情子表格 ── */
.detail-sub-table th { padding:10px 16px; font-size:12px; letter-spacing:0.02em; color:var(--kd-text-muted); font-weight:500; background:var(--kd-bg-header); }
.detail-sub-table td { padding:10px 16px; font-size:13px; color:var(--kd-text-secondary); border-top:1px solid var(--kd-border-light); }
.detail-sub-table tr:hover { background:var(--kd-primary-bg); }

/* ==========================================
 * 翻页组件 — Kalodata 风格
 * ========================================== */
.kd-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    list-style: none;
    margin: 0;
    font-size: 14px;
    font-family: Roboto, sans-serif;
    user-select: none;
    flex-wrap: wrap;
}

.kd-pagination-total {
    margin-right: auto;
    color: var(--kd-text-muted);
    font-size: 13px;
    white-space: nowrap;
}
.kd-pagination-total b {
    color: var(--kd-text-default);
    font-weight: 500;
}

.kd-pagination-prev button,
.kd-pagination-next button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--kd-border);
    border-radius: 6px;
    background: var(--kd-bg-container);
    color: var(--kd-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    outline: none;
}
.kd-pagination-prev button:hover:not(:disabled),
.kd-pagination-next button:hover:not(:disabled) {
    border-color: var(--kd-primary);
    color: var(--kd-primary);
}
.kd-pagination-disabled button {
    color: var(--kd-text-hint) !important;
    border-color: var(--kd-border) !important;
    cursor: not-allowed !important;
}

.kd-pagination-item {
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 6px;
    border: 1px solid var(--kd-border);
    background: var(--kd-bg-container);
    transition: all 0.2s;
    cursor: pointer;
}
.kd-pagination-item a {
    display: block;
    padding: 0 6px;
    color: var(--kd-text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.kd-pagination-item:hover { border-color: var(--kd-primary); }
.kd-pagination-item:hover a { color: var(--kd-primary); }
.kd-pagination-item-active { border-color: var(--kd-primary); }
.kd-pagination-item-active a { color: var(--kd-primary) !important; font-weight: 600; }

.kd-pagination-jump {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}
.kd-pagination-jump .kd-pagination-item-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.kd-pagination-jump .kd-pagination-ellipsis {
    color: var(--kd-text-hint);
    font-size: 12px;
    letter-spacing: 2px;
    transition: opacity 0.2s;
}
.kd-pagination-jump .kd-pagination-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kd-primary);
    opacity: 0;
    transition: opacity 0.2s;
}
.kd-pagination-jump:hover .kd-pagination-ellipsis { opacity: 0; }
.kd-pagination-jump:hover .kd-pagination-icon { opacity: 1; }

.kd-pagination-options {
    display: flex;
    align-items: center;
    margin-left: 8px;
}
.kd-pagination-size-select {
    height: 32px;
    padding: 0 28px 0 12px;
    border: 1px solid var(--kd-border);
    border-radius: 6px;
    background-color: var(--kd-bg-container);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    color: var(--kd-text-secondary);
    font-size: 13px;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: all 0.2s;
}
.kd-pagination-size-select:hover,
.kd-pagination-size-select:focus {
    border-color: var(--kd-primary);
    color: var(--kd-text-default);
}

.kd-pagination-jumper {
    display: flex;
    align-items: center;
    gap: 0;
    color: var(--kd-text-muted);
    font-size: 13px;
    white-space: nowrap;
    margin-left: 8px;
}
.kd-pagination-jumper-input {
    width: 50px;
    height: 32px;
    text-align: center;
    border: 1px solid var(--kd-border);
    border-radius: 6px;
    background: var(--kd-bg-container);
    color: var(--kd-text-default);
    font-size: 13px;
    font-weight: 500;
    outline: none;
    margin: 0 6px;
    transition: all 0.2s;
    font-variant-numeric: tabular-nums;
}
.kd-pagination-jumper-input:hover { border-color: var(--kd-primary); }
.kd-pagination-jumper-input:focus {
    border-color: var(--kd-primary);
    box-shadow: 0 0 0 2px rgba(1, 145, 248, 0.15);
}

/* ── 顶栏导航指示器 ── */
.nav-indicator {
    position: relative;
    padding: 0 4px;
    height: 56px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    color: var(--kd-text-default);
    cursor: pointer;
    transition: color 0.2s;
    white-space: nowrap;
}
.nav-indicator:hover { color: var(--kd-primary); font-weight: 500; }
.nav-indicator::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 2px;
    background: transparent;
    transition: background 0.2s;
}
.nav-indicator.active { color: var(--kd-text-default); font-weight: 500; }
.nav-indicator.active::after { background: var(--kd-primary); }

/* ── 网桥指示灯 (低调融入) ── */
.bridge-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--kd-text-hint);
    font-family: 'Roboto Mono', monospace;
}
.bridge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kd-success);
    box-shadow: 0 0 4px rgba(82, 196, 26, 0.4);
}

/* ── 主内容表格 ── */
.kd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.kd-table thead th {
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--kd-text-muted);
    background: var(--kd-bg-header);
    border-bottom: 1px solid var(--kd-border);
    text-align: left;
    white-space: nowrap;
}
.kd-table tbody td {
    padding: 12px 16px;
    color: var(--kd-text-secondary);
    border-bottom: 1px solid var(--kd-border-light);
    vertical-align: middle;
}
.kd-table tbody tr:hover { background: var(--kd-primary-bg); }
.kd-table tbody tr { transition: background 0.15s; }