/* DCPlayer Dashboard Light Theme — OPN-021
 * HUB 亮色体系覆盖，加载在 dashboard_style.css 之后。
 * 覆盖 :root 变量 + 组件级样式调整。
 */

/* ========== Root Variable Overrides ========== */
:root {
    --bg-primary: #f7f9fb;
    --bg-secondary: #eef2f5;
    --bg-card: rgba(255,255,255,0.82);
    --bg-hover: rgba(0,209,102,0.04);
    --border: #e2e8f0;
    --text-primary: #191c1e;
    --text-secondary: #5e6c63;
    --accent-cyan: #00d166;
    --accent-blue: #2e5bff;
    --accent-green: #00d166;
    --accent-purple: #8b5cf6;
    --accent-orange: #f59e0b;
    --accent-red: #ef4444;
}

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ========== Shell Layout (Sidebar + Main) ========== */
.shell {
    display: grid;
    grid-template-columns: 264px 1fr;
    min-height: 100vh;
}

@media (max-width: 900px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border); }
    .sidebar-nav { display: flex; gap: 4px; overflow-x: auto; }
}

/* ========== Sidebar ========== */
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background: #fff;
    border-right: 1px solid var(--border);
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
}

.sidebar-brand h1 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}
.sidebar-brand h1 a { color: inherit; text-decoration: none; }
.sidebar-brand p {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin: 0 0 24px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-nav .nav-item {
    display: block;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.sidebar-nav .nav-item:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.sidebar-nav .nav-item.active {
    background: rgba(0,209,102,0.1);
    color: #006d32;
    font-weight: 600;
}

.sidebar-cta {
    margin-top: auto;
    padding-top: 20px;
}
.sidebar-cta a {
    display: block;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--accent-cyan);
    color: #fff;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: opacity .15s;
}
.sidebar-cta a:hover { opacity: 0.9; }

/* ========== Header ========== */
.header {
    background: #fff !important;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}
.header h1 { color: var(--text-primary); }
.header h1 span { color: var(--accent-cyan); }
.header-meta { color: var(--text-secondary); }

/* ========== Tab Bar: Pill Style ========== */
.tabs {
    background: transparent;
    border: none;
    padding: 8px 0;
    gap: 6px;
}
.tab-btn {
    border: none !important;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    transition: background .15s, color .15s;
    cursor: pointer;
}
.tab-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.tab-btn.active {
    background: rgba(0,209,102,0.12) !important;
    color: #006d32 !important;
    font-weight: 600;
    border-bottom: none !important;
}

/* ========== Stat Cards ========== */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(17,24,39,0.04);
}
.stat-card .sv { color: var(--text-primary); }
.stat-card .sl { color: var(--text-secondary); }
.stat-card:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,209,102,0.08);
}

/* ========== Badge Colors (Light Background + Dark Text) ========== */
.badge { border-radius: 6px; font-size: 11px; font-weight: 500; }
.b-activity { background: rgba(0,209,102,0.12); color: #006d32; border-color: rgba(0,209,102,0.2); }
.b-behavior { background: rgba(245,158,11,0.12); color: #945f00; border-color: rgba(245,158,11,0.2); }
.b-game { background: rgba(139,92,246,0.12); color: #5b21b6; border-color: rgba(139,92,246,0.2); }
.b-genre { background: rgba(244,114,182,0.12); color: #9d174d; border-color: rgba(244,114,182,0.2); }
.b-steam { background: rgba(0,201,214,0.12); color: #0e7490; border-color: rgba(0,201,214,0.2); }
.b-value { background: rgba(74,222,128,0.12); color: #166534; border-color: rgba(74,222,128,0.2); }
.b-risk { background: rgba(248,113,113,0.12); color: #991b1b; border-color: rgba(248,113,113,0.2); }
.b-style { background: rgba(192,132,252,0.12); color: #6b21a8; border-color: rgba(192,132,252,0.2); }
.b-tag { background: rgba(147,197,253,0.12); color: #1e40af; border-color: rgba(147,197,253,0.2); }
.b-growth { background: rgba(110,231,183,0.12); color: #065f46; border-color: rgba(110,231,183,0.2); }
.b-pattern { background: rgba(251,146,60,0.12); color: #9a3412; border-color: rgba(251,146,60,0.2); }
.b-default { background: rgba(156,163,175,0.12); color: #374151; border-color: rgba(156,163,175,0.2); }

/* ========== Table (Light) ========== */
table.dt {
    border-collapse: collapse;
    width: 100%;
}
table.dt th {
    background: #fff;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 12px;
    position: sticky;
    top: 0;
    z-index: 2;
}
table.dt td {
    padding: 10px 12px;
    border-bottom: 1px solid #f2f4f6;
    font-size: 13px;
    color: var(--text-primary);
}
table.dt tr:hover td {
    background: rgba(0,209,102,0.04);
}

/* ========== Search Bar ========== */
.search-bar input, .search-bar select {
    background: #f2f4f6;
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text-primary);
    padding: 8px 14px;
    font-size: 13px;
}
.search-bar input:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(0,209,102,0.12);
    outline: none;
}

/* ========== Detail Panel (Side Slide) ========== */
.doverlay {
    background: rgba(0,0,0,0.2);
}
.dpanel {
    background: #fff;
    box-shadow: -8px 0 40px rgba(0,0,0,0.1);
    border-radius: 28px 0 0 28px;
}
.dpanel .dsection h3 {
    color: var(--accent-cyan);
}
.dpanel .drow { color: var(--text-primary); }
.dpanel .drow span:first-child { color: var(--text-secondary); }

/* ========== Server Cards ========== */
.server-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.server-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(17,24,39,0.08);
    border-color: var(--accent-cyan);
}

/* ========== Progress Bars ========== */
.progress-done { background: linear-gradient(135deg, #00d166, #00a854); }
.progress-active { background: linear-gradient(135deg, #2e5bff, #1d4ed8); }

/* ========== Category Cards ========== */
.cat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
}
.cat-card:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 4px 12px rgba(0,209,102,0.06);
}

/* ========== Data Text Color Fix (ensure #191c1e everywhere) ========== */
/* Override any gray/muted colors on data values */
.stat-card .sv,
.stat-card .sl,
.cat-card .cs,
.cat-card .cn,
.pie-legend span,
.pie-legend .pl-val,
.pie-pct,
table.dt td,
.dsection p,
.dsection span,
.drow span:last-child,
.health-val,
.health-pct,
.metric-val,
[class*="chart"] text,
[class*="chart"] .label,
.bar-label,
.bar-val {
    color: #191c1e !important;
}

/* Data Health module: force all values dark */
.health-card .value,
.health-card .pct,
.health-card span,
.health-module .val,
.health-module span:not(.status) {
    color: #191c1e !important;
}

/* Pie chart percentages */
.pie-chart text,
.pie-label,
.pie-value,
svg text {
    fill: #191c1e !important;
    color: #191c1e !important;
}

/* Generic: any .sv (stat value) or .sl (stat label) */
.sv { color: #191c1e !important; }
.sl { color: var(--text-secondary) !important; }

/* Override secondary text that should be primary on data */
.content p:not(.desc),
.content span.val,
.content .num,
.content strong {
    color: #191c1e;
}

/* ========== Loading Spinner ========== */
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== Responsive ========== */
@media (max-width: 1200px) {
    .stats-bar { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
    .stats-bar { grid-template-columns: 1fr !important; }
    .shell { grid-template-columns: 1fr; }
    .sidebar { display: none; }
}