/* DataHub Admin Dashboard Styles — source of truth (replaces inline <style>) */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f7fa; min-height: 100vh; }

/* Login */
.login-container { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.login-card { background: #fff; border-radius: 12px; padding: 40px; width: 360px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.login-logo { text-align: center; margin-bottom: 32px; }
.login-logo h1 { font-size: 24px; color: #303133; margin-top: 12px; }
.login-logo .icon { font-size: 48px; color: #667eea; }
.login-error { color: #f56c6c; font-size: 13px; margin-top: 8px; text-align: center; }

/* Main Layout */
.app-container { min-height: 100vh; display: flex; flex-direction: column; }
.app-header { background: #fff; padding: 0 24px; height: 60px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 8px rgba(0,0,0,0.06); position: sticky; top: 0; z-index: 100; }
.app-header .logo { display: flex; align-items: center; gap: 12px; }
.app-header .logo h1 { font-size: 18px; color: #303133; font-weight: 600; }
.app-header .logo .icon { font-size: 28px; color: #409eff; }
.header-right { display: flex; align-items: center; gap: 16px; }
.refresh-indicator { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #909399; }
.stale-warning { background: linear-gradient(90deg, #fef0f0, #fde2e2); border: 1px solid #fab6b6; border-radius: 8px; padding: 12px 20px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; color: #f56c6c; }
.stale-warning .icon { font-size: 20px; }
.stale-warning .text { flex: 1; }
.stale-warning .title { font-weight: 600; margin-bottom: 2px; }
.stale-warning .desc { font-size: 12px; opacity: 0.8; }
.live-update-info { font-size: 11px; color: #909399; padding: 2px 8px; background: #f5f7fa; border-radius: 4px; }

/* Content */
.app-content { flex: 1; padding: 20px; max-width: 1400px; margin: 0 auto; width: 100%; }

/* Stats Grid */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.stat-card h3 { font-size: 13px; color: #909399; margin-bottom: 8px; font-weight: 500; }
.stat-card .value { font-size: 28px; color: #303133; font-weight: 600; }
.stat-card .sub { font-size: 12px; color: #909399; margin-top: 4px; }

/* Section */
.section { background: #fff; border-radius: 8px; padding: 20px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.section-title { font-size: 16px; color: #303133; margin-bottom: 16px; font-weight: 600; display: flex; align-items: center; gap: 12px; }

/* Live Status */
.status-dot-inline { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.status-dot-inline.connected { background: #67c23a; box-shadow: 0 0 6px rgba(103,194,58,0.5); }
.status-dot-inline.reconnecting { background: #e6a23c; animation: pulse 1.5s infinite; }
.status-dot-inline.disconnected { background: #f56c6c; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Running Tasks Grid */
.running-tasks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.running-task-item { background: #f0f9ff; border: 1px solid #d9ecff; border-radius: 6px; padding: 12px 16px; }
.running-task-item .task-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.running-task-item .task-name { font-weight: 600; color: #303133; font-size: 14px; }
.running-task-item .task-meta { font-size: 12px; color: #909399; margin-top: 8px; }

/* Hour Grid */
.hour-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; margin-bottom: 16px; }
.hour-cell { text-align: center; padding: 8px 4px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: all 0.2s; }
.hour-cell.exists { background: #f0f9eb; color: #67c23a; }
.hour-cell.missing { background: #fef0f0; color: #f56c6c; }
.hour-cell:hover { transform: scale(1.05); }

/* Table */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td { padding: 12px; text-align: left; border-bottom: 1px solid #ebeef5; }
.data-table th { background: #f5f7fa; color: #909399; font-weight: 500; }
.data-table tr:hover { background: #f5f7fa; }

/* Clickable table rows */
.clickable-table .el-table__row { cursor: pointer; transition: background-color 0.2s; }
.clickable-table .el-table__row:hover { background-color: #ecf5ff !important; }
.clickable-table .el-table__row:hover td { color: #409eff; }

/* Symbol Data Browser - Master Detail Layout */
.symbol-list-container { background: #fafafa; border-radius: 8px; border: 1px solid #ebeef5; }
.symbol-list-header { padding: 12px 16px; border-bottom: 1px solid #ebeef5; font-weight: 600; color: #606266; font-size: 13px; }
.symbol-list { max-height: 500px; overflow-y: auto; }
.symbol-item { padding: 12px 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: all 0.2s; }
.symbol-item:hover { background: #ecf5ff; }
.symbol-item.active { background: #409eff; color: #fff; }
.symbol-item.active .symbol-meta .el-tag { background: rgba(255,255,255,0.2); color: #fff; border-color: transparent; }
.symbol-item.active .symbol-stats { color: rgba(255,255,255,0.8); }
.symbol-name { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.symbol-meta { display: flex; gap: 6px; margin-bottom: 6px; }
.symbol-stats { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #909399; }
.day-detail-container { background: #fff; border-radius: 8px; border: 1px solid #ebeef5; padding: 16px; min-height: 500px; }
.day-detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #ebeef5; }
.symbol-title { font-size: 16px; font-weight: 600; color: #303133; }
.day-summary { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.date-label { font-size: 14px; color: #606266; }
.replay-grade { margin-left: auto; font-size: 12px; color: #909399; }

/* Quality Chart */
.chart-container { height: 300px; }

/* Settings */
.config-item { display: flex; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.config-item:last-child { border-bottom: none; }
.config-label { width: 180px; color: #909399; font-size: 13px; }
.config-value { flex: 1; color: #303133; font-size: 13px; font-family: monospace; }

/* Status Colors */
.status-ok { color: #67c23a; }
.status-warn { color: #e6a23c; }
.status-error { color: #f56c6c; }

/* Loading */
.loading-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; z-index: 9999; }

/* Backtest */
.filter-card { margin-bottom: 16px; }
.task-card { margin-top: 12px; }
.task-info { display: flex; flex-direction: column; gap: 4px; }
.task-title { font-weight: 600; color: #303133; }
.task-date { font-size: 12px; color: #909399; }
.unit { margin-left: 6px; color: #909399; font-size: 12px; }
.profit { color: #67c23a; }
.loss { color: #f56c6c; }
.resolution-selector { margin: 12px 0; }

/* Paper Trading KPI Grid */
.paper-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.paper-kpi-card { background: #fff; border-radius: 8px; padding: 14px 16px; border: 1px solid #ebeef5; }
.paper-kpi-card .label { font-size: 12px; color: #909399; margin-bottom: 6px; font-weight: 500; }
.paper-kpi-card .value { font-size: 20px; color: #303133; font-weight: 600; line-height: 1.2; }
.paper-kpi-card .value.profit { color: #67c23a; }
.paper-kpi-card .value.loss { color: #f56c6c; }
.paper-kpi-card .sub { font-size: 11px; color: #c0c4cc; margin-top: 4px; }
.paper-meta-bar { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; font-size: 13px; color: #606266; }
.paper-meta-bar .meta-item { display: flex; align-items: center; gap: 4px; }
.paper-meta-bar .meta-label { color: #909399; }

/* Cooldown badge */
.cooldown-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.cooldown-badge.normal { background: #f0f9eb; color: #67c23a; }
.cooldown-badge.entering { background: #fdf6ec; color: #e6a23c; }
.cooldown-badge.active { background: #fef0f0; color: #f56c6c; }
.cooldown-badge.exiting { background: #f0f9eb; color: #e6a23c; }

/* Summary Card Styles */
.summary-card { height: 100%; }
.summary-card .el-card__header { padding: 12px 16px; background: #f5f7fa; }
.card-header-title { font-size: 14px; font-weight: 600; color: #303133; }

/* Config Drawer Styles */
.param-overridden .el-descriptions__label { font-weight: 600; }

/* Date picker calendar cell colors for data availability */
td.date-complete .el-date-table-cell__text {
    position: relative;
}
td.date-complete .el-date-table-cell__text::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #67c23a;
}
td.date-partial .el-date-table-cell__text {
    position: relative;
}
td.date-partial .el-date-table-cell__text::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #e6a23c;
}
td.date-complete.in-range .el-date-table-cell__text::after,
td.date-complete.start-date .el-date-table-cell__text::after,
td.date-complete.end-date .el-date-table-cell__text::after {
    background-color: #67c23a;
}
td.date-partial.in-range .el-date-table-cell__text::after,
td.date-partial.start-date .el-date-table-cell__text::after,
td.date-partial.end-date .el-date-table-cell__text::after {
    background-color: #e6a23c;
}

/* Date picker legend */
.date-picker-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: #909399; }
.date-picker-legend .legend-item { display: flex; align-items: center; gap: 4px; }
.date-picker-legend .legend-dot { width: 12px; height: 12px; border-radius: 50%; }
.date-picker-legend .legend-dot.complete { background-color: #67c23a; }
.date-picker-legend .legend-dot.partial { background-color: #e6a23c; }
.date-picker-legend .legend-dot.unavailable { background-color: #c0c4cc; }

/* Responsive */
@media (max-width: 1200px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .stats-grid { grid-template-columns: 1fr; } .hour-grid { grid-template-columns: repeat(6, 1fr); } }