/**
 * @file dashboard.css
 * @brief Dashboard tab styles for controls and standalone metric charts
 * @note Uses scoped dashboard-* classes to avoid collisions with existing UI
 * @copyright Copyright (c) 2026 GLT Design. All rights reserved.
 */

.dashboard-shell {
    --dashboard-surface: #f5f9ff;
    --dashboard-surface-strong: #eaf2ff;
    --dashboard-border: #d3e1f3;
    --dashboard-text-muted: #4f637a;
    --dashboard-title: #17395c;
    --dashboard-chart-grid: #dfe9f4;
    --dashboard-radius: var(--bs-border-radius);
    --dashboard-clients: #2376f2;
    --dashboard-money: #0c9d74;
    --dashboard-beacon: #f28a1f;
    --dashboard-balance: #5164f3;
    --dashboard-messages: #ea4c89;
}

.dashboard-controls-card,
.dashboard-metric-card {
    border: 1px solid var(--dashboard-border);
    box-shadow: 0 16px 35px -28px rgba(15, 44, 84, 0.78);
    border-radius: var(--dashboard-radius);
}

.dashboard-controls-card .card-body {
    background:
        radial-gradient(circle at 92% 15%, rgba(72, 132, 236, 0.16), transparent 55%),
        linear-gradient(135deg, var(--dashboard-surface) 0%, #ffffff 100%);
}

.dashboard-range-summary {
    font-size: 0.92rem;
    color: var(--dashboard-text-muted);
    font-weight: 600;
}

.dashboard-control-loading {
    opacity: 0.62;
    pointer-events: none;
}

.dashboard-metric-card {
    overflow: hidden;
}

.dashboard-metric-card .card-body {
    background:
        linear-gradient(172deg, rgba(255, 255, 255, 0.96) 0%, var(--dashboard-surface-strong) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(242, 248, 255, 1) 100%);
    padding: 1rem 1rem 0.85rem;
}

.dashboard-metric-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    min-height: 62px;
}

.dashboard-metric-label {
    font-size: 0.82rem;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--dashboard-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.dashboard-metric-note {
    margin-top: 0.14rem;
    font-size: 0.77rem;
    color: #6b7f97;
    font-weight: 500;
}

.dashboard-metric-value {
    font-size: 1.65rem;
    line-height: 1.05;
    font-weight: 800;
    color: var(--dashboard-title);
    text-align: right;
    white-space: nowrap;
}

.dashboard-metric-chart-wrap {
    position: relative;
    border: 1px solid var(--dashboard-border);
    border-radius: var(--dashboard-radius);
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 7%, #fbfdff 0%, #ffffff 58%),
        linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}

.dashboard-metric-chart {
    width: 100%;
    height: 240px;
}

.dashboard-metric-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dashboard-text-muted);
    font-size: 0.92rem;
    font-weight: 600;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(245, 249, 255, 0.92) 100%);
}

.dashboard-metric-clients {
    border-top: 4px solid var(--dashboard-clients);
}

.dashboard-metric-money {
    border-top: 4px solid var(--dashboard-money);
}

.dashboard-metric-beacon {
    border-top: 4px solid var(--dashboard-beacon);
}

.dashboard-metric-balance {
    border-top: 4px solid var(--dashboard-balance);
}

.dashboard-metric-messages {
    border-top: 4px solid var(--dashboard-messages);
}

.dashboard-metric-clients .dashboard-metric-label i,
.dashboard-metric-clients .dashboard-metric-value {
    color: var(--dashboard-clients);
}

.dashboard-metric-money .dashboard-metric-label i,
.dashboard-metric-money .dashboard-metric-value {
    color: var(--dashboard-money);
}

.dashboard-metric-beacon .dashboard-metric-label i,
.dashboard-metric-beacon .dashboard-metric-value {
    color: var(--dashboard-beacon);
}

.dashboard-metric-balance .dashboard-metric-label i,
.dashboard-metric-balance .dashboard-metric-value {
    color: var(--dashboard-balance);
}

.dashboard-metric-messages .dashboard-metric-label i,
.dashboard-metric-messages .dashboard-metric-value {
    color: var(--dashboard-messages);
}

.dashboard-echarts-theme {
    --dashboard-echarts-grid: var(--dashboard-chart-grid);
    --dashboard-echarts-axis: #7690ac;
}

@media (max-width: 991px) {
    .dashboard-metric-chart {
        height: 214px;
    }

    .dashboard-metric-value {
        font-size: 1.48rem;
    }
}

@media (max-width: 575px) {
    .dashboard-metric-header {
        min-height: 58px;
    }

    .dashboard-metric-value {
        font-size: 1.3rem;
    }

    .dashboard-metric-chart {
        height: 198px;
    }

    .dashboard-range-summary {
        font-size: 0.84rem;
    }
}