/* Reset and base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #1F2A44;
    color: #E0E0E0;
    min-height: 100vh;
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: #162035;
    border-bottom: 2px solid #C89D2D;
}
.header h1 { font-size: 1.3rem; color: #C89D2D; font-weight: 600; }
.header-right { display: flex; align-items: center; gap: 16px; font-size: 0.9rem; }
#utc-clock { color: #A0B0C0; font-family: monospace; }
.sse-dot { font-size: 1.2rem; }
.sse-dot.connected { color: #2CA87F; }
.sse-dot.disconnected { color: #D94F45; }

/* Dashboard grid - 3 columns */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    padding: 16px 24px;
    max-width: 1800px;
    margin: 0 auto;
}

/* Panels */
.panel {
    background: #2A3655;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #3A4F70;
}
.panel:hover { border-color: #C89D2D44; }
.panel h2 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #C89D2D;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #3A4F70;
}
.panel.wide { grid-column: span 2; }
.panel.full-width { grid-column: 1 / -1; }

/* Worker cards */
.worker-cards { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.worker-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #1F2A44;
    border-radius: 6px;
    font-size: 0.85rem;
}
.worker-card .worker-name { font-weight: 500; }
.worker-card .worker-status { font-size: 0.8rem; }

/* Status rows */
.status-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 0.85rem;
}
.status-row .label { color: #A0B0C0; }

/* Badges */
.badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}
.badge.ok, .badge-green { background: #2CA87F22; color: #2CA87F; }
.badge.error, .badge-red { background: #D94F4522; color: #D94F45; }
.badge.warning { background: #C89D2D22; color: #C89D2D; }
.badge-bullish { color: #2CA87F; }
.badge-bearish { color: #D94F45; }

/* Progress bar */
.progress-bar-container {
    width: 100%;
    height: 20px;
    background: #1F2A44;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #28A4A4, #2CA87F);
    border-radius: 10px;
    transition: width 0.5s ease;
    min-width: 2%;
}

/* Pipeline stats */
.pipeline-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: 8px;
}
.pipeline-detail {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #A0B0C0;
}

/* Alert feed */
.alert-type-counts {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 0.8rem;
}
.alert-feed {
    max-height: 250px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.alert-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #1F2A44;
    border-radius: 4px;
    font-size: 0.8rem;
    border-left: 3px solid transparent;
    animation: fadeIn 0.3s ease;
}
.alert-item.bullish { border-left-color: #2CA87F; }
.alert-item.bearish { border-left-color: #D94F45; }
.alert-item .alert-symbol { font-weight: 600; }
.alert-item .alert-time { color: #A0B0C0; font-size: 0.75rem; }
.alert-item .alert-price { font-family: monospace; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Ticker table */
.table-wrap { overflow-x: auto; }
#ticker-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
#ticker-table th {
    text-align: left;
    padding: 8px 12px;
    color: #A0B0C0;
    font-weight: 500;
    border-bottom: 1px solid #3A4F70;
    white-space: nowrap;
}
#ticker-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #3A4F7044;
    white-space: nowrap;
}
#ticker-table tr { cursor: pointer; }
#ticker-table tr:hover { background: #334166; }
#ticker-table tr.selected { background: #28A4A422; }

/* Agent status */
.agent-member {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #1F2A44;
    border-radius: 4px;
    font-size: 0.83rem;
    margin-bottom: 4px;
}
.agent-task {
    padding: 6px 10px;
    background: #1F2A44;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-bottom: 4px;
    border-left: 3px solid #3A4F70;
}
.agent-task.completed { border-left-color: #2CA87F; opacity: 0.6; }
.agent-task.in_progress { border-left-color: #C89D2D; }
.agent-task.pending { border-left-color: #A0B0C0; }

/* Chart controls */
.chart-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.chart-selectors { display: flex; gap: 8px; }
.chart-selectors select, .chart-selectors button {
    padding: 6px 12px;
    background: #1F2A44;
    color: #E0E0E0;
    border: 1px solid #3A4F70;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
}
.chart-selectors button {
    background: #28A4A4;
    border-color: #28A4A4;
    font-weight: 500;
}
.chart-selectors button:hover { background: #2CA87F; }

/* Service health table */
.health-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.health-table th {
    text-align: left;
    padding: 6px 12px;
    color: #A0B0C0;
    font-weight: 500;
    border-bottom: 1px solid #3A4F70;
    white-space: nowrap;
}
.health-table td {
    padding: 7px 12px;
    border-bottom: 1px solid #3A4F7044;
    white-space: nowrap;
}
.health-table tr:last-child td { border-bottom: none; }
.health-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.health-dot.ok { background: #2CA87F; }
.health-dot.warning { background: #C89D2D; }
.health-dot.error { background: #D94F45; }
.health-details { color: #C0D0E0; font-family: monospace; font-size: 0.8rem; }
.health-time { color: #A0B0C0; font-size: 0.75rem; font-family: monospace; }

/* Empty states */
.empty-state {
    text-align: center;
    color: #A0B0C0;
    padding: 24px;
    font-size: 0.85rem;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #1F2A44; }
::-webkit-scrollbar-thumb { background: #3A4F70; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #C89D2D; }

/* Responsive */
@media (max-width: 1200px) {
    .dashboard-grid { grid-template-columns: 1fr 1fr; }
    .panel.wide { grid-column: span 2; }
    .panel.full-width { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .panel.wide, .panel.full-width { grid-column: span 1; }
    .header { padding: 12px 16px; }
    .dashboard-grid { padding: 12px 16px; }
}

/* Backtest Results Panel */
.backtest-header {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    font-size: 0.85rem;
}
.backtest-symbol { font-weight: 600; font-size: 1rem; color: #E0E0E0; }
.backtest-params { color: #C89D2D; font-family: monospace; }
.backtest-range { color: #A0B0C0; font-family: monospace; }

/* Backtest Comparison Table */
.bt-table-wrap { overflow-x: auto; }
.bt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
    font-family: 'Segoe UI', system-ui, sans-serif;
}
.bt-table th {
    text-align: left;
    padding: 8px 10px;
    color: #A0B0C0;
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #3A4F70;
    white-space: nowrap;
}
.bt-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #3A4F7033;
    white-space: nowrap;
    font-family: monospace;
    font-size: 0.82rem;
}
.bt-table tr:last-child td { border-bottom: none; }
.bt-row:hover { background: #33416644; }
.bt-row.best { background: #C89D2D0C; }
.bt-row.best td { border-bottom-color: #C89D2D33; }
.bt-tf { font-weight: 600; color: #E0E0E0; }
.bt-best-badge {
    font-size: 0.65rem;
    background: #C89D2D;
    color: #1F2A44;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 700;
    margin-left: 4px;
    vertical-align: middle;
}
.bt-sub { font-size: 0.72rem; color: #8090A0; }
.bt-positive { color: #2CA87F; }
.bt-negative { color: #D94F45; }
.bt-highlight { font-weight: 600; }

/* ============================================================
   Database Overview Panel
   ============================================================ */

/* Collection stat cards row */
.db-collection-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.db-collection-card {
    background: #1F2A44;
    border: 1px solid #3A4F70;
    border-radius: 8px;
    padding: 14px 20px;
    min-width: 160px;
    flex: 1;
}
.db-collection-card:hover { border-color: #C89D2D88; }
.db-collection-card .db-coll-name {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #A0B0C0;
    margin-bottom: 6px;
}
.db-collection-card .db-coll-count {
    font-size: 1.6rem;
    font-weight: 700;
    color: #E0E0E0;
    font-family: monospace;
    line-height: 1;
}
.db-collection-card .db-coll-size {
    font-size: 0.75rem;
    color: #C89D2D;
    margin-top: 4px;
}

/* Charts rows */
.db-charts-row {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    gap: 16px;
    margin-bottom: 16px;
}
.db-charts-row-2col {
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 1200px) {
    .db-charts-row { grid-template-columns: 1fr 1fr; }
    .db-charts-row-2col { grid-template-columns: 1fr; }
    .db-chart-cell:first-child { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
    .db-charts-row { grid-template-columns: 1fr; }
    .db-chart-cell { grid-column: 1 !important; }
}

.db-chart-cell {
    background: #1F2A44;
    border: 1px solid #3A4F70;
    border-radius: 8px;
    padding: 12px 14px;
}
.db-chart-cell-sm { max-width: 320px; }
.db-chart-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #A0B0C0;
    margin-bottom: 10px;
}
.db-chart-wrap {
    position: relative;
    width: 100%;
    height: 200px;
}
.db-chart-wrap-sq {
    height: 220px;
}
.db-chart-wrap-alpha {
    height: 180px;
}
.db-chart-wrap canvas {
    max-width: 100%;
}

/* Signal frequency list */
.signal-freq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.signal-freq-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #2A3655;
    border-radius: 6px;
    font-size: 0.85rem;
}
.signal-freq-symbol {
    font-weight: 600;
    width: 80px;
    color: #E0E0E0;
    flex-shrink: 0;
}
.signal-freq-bar-wrap {
    flex: 1;
    height: 8px;
    background: #1F2A44;
    border-radius: 4px;
    overflow: hidden;
}
.signal-freq-bar {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #28A4A4, #2CA87F);
    transition: width 0.4s ease;
}
.signal-freq-count {
    font-family: monospace;
    color: #C89D2D;
    font-size: 0.82rem;
    width: 70px;
    text-align: right;
    flex-shrink: 0;
}
.signal-freq-rate {
    font-family: monospace;
    color: #A0B0C0;
    font-size: 0.75rem;
    width: 70px;
    text-align: right;
    flex-shrink: 0;
}

/* Signal Charts Grid */
.signal-charts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 1200px) {
    .signal-charts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .signal-charts-grid { grid-template-columns: 1fr; }
}
.signal-chart-cell {
    background: #1F2A44;
    border-radius: 6px;
    border: 1px solid #3A4F70;
    overflow: hidden;
}
.signal-chart-label {
    padding: 6px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #C89D2D;
    background: #162035;
    border-bottom: 1px solid #3A4F70;
}
.sig-candle-container { width: 100%; }
.sig-macd-container { width: 100%; border-top: 1px solid #3A4F7044; }