/* Dashboard theme authority.
 * This file is loaded after the shared legacy styles to keep the hero and KPIs
 * independent from generic card backgrounds. */

#dashboardView {
    --dashboard-hero-surface: #171719;
    --dashboard-hero-gradient:
        radial-gradient(circle at 86% 10%, rgba(215, 25, 32, .24) 0%, rgba(215, 25, 32, .08) 25%, transparent 48%),
        linear-gradient(145deg, #252528 0%, #1a1a1d 55%, #121214 100%);
}

html[data-theme='dark'] #dashboardView .dashboard-hero,
html[data-theme='light'] #dashboardView .dashboard-hero {
    border-color: #3c3c41;
    background-color: var(--dashboard-hero-surface);
    background-image: var(--dashboard-hero-gradient);
    color: #ffffff;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .2);
}

#dashboardView .dashboard-hero.motion-enter {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
}

html[data-theme='dark'] #dashboardView .dashboard-hero-title,
html[data-theme='dark'] #dashboardView .dashboard-hero-copy,
html[data-theme='dark'] #dashboardView .health-label,
html[data-theme='dark'] #dashboardView .health-value,
html[data-theme='dark'] #dashboardView .health-meta,
html[data-theme='light'] #dashboardView .dashboard-hero-title,
html[data-theme='light'] #dashboardView .dashboard-hero-copy,
html[data-theme='light'] #dashboardView .health-label,
html[data-theme='light'] #dashboardView .health-value,
html[data-theme='light'] #dashboardView .health-meta {
    color: inherit;
}

html[data-theme='dark'] #dashboardView .dashboard-health,
html[data-theme='light'] #dashboardView .dashboard-health {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .085);
}

html[data-theme='dark'] #dashboardView .dashboard-hero::after,
html[data-theme='light'] #dashboardView .dashboard-hero::after {
    background: radial-gradient(circle at var(--pointer-x, 76%) var(--pointer-y, 18%), rgba(255, 255, 255, .07), transparent 58%);
}

html[data-theme='dark'] #dashboardView .metric-card {
    --metric-glow-rgb: 59, 130, 246;
    border-color: color-mix(in srgb, var(--metric-accent) 42%, #343439);
    background-color: #171719;
    background-image:
        radial-gradient(circle at 92% 10%, rgba(var(--metric-glow-rgb), .17) 0%, rgba(var(--metric-glow-rgb), .05) 30%, transparent 54%),
        linear-gradient(145deg, #202023 0%, #171719 100%);
}

html[data-theme='light'] #dashboardView .metric-card {
    --metric-glow-rgb: 59, 130, 246;
    border-color: color-mix(in srgb, var(--metric-accent) 32%, #d6d9de);
    background-color: #ffffff;
    background-image:
        radial-gradient(circle at 92% 10%, rgba(var(--metric-glow-rgb), .08) 0%, rgba(var(--metric-glow-rgb), .025) 31%, transparent 54%),
        linear-gradient(145deg, #ffffff 0%, #f5f6f7 100%);
}

html #dashboardView .dashboard-metrics > .metric-card.metric-materials { --metric-glow-rgb: 59, 130, 246; }
html #dashboardView .dashboard-metrics > .metric-card.metric-events { --metric-glow-rgb: 245, 158, 11; }
html #dashboardView .dashboard-metrics > .metric-card.metric-movements { --metric-glow-rgb: 16, 185, 129; }
html #dashboardView .dashboard-metrics > .metric-card.metric-value-stock { --metric-glow-rgb: 244, 63, 94; }

#dashboardView .metric-card:hover {
    border-color: color-mix(in srgb, var(--metric-accent) 58%, #5b5f66);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--metric-accent) 11%, rgba(0, 0, 0, .2));
}

/* Older global surface rules use the background shorthand. These declarations
 * intentionally own only the two Dashboard component backgrounds. */
html[data-theme='dark'] #dashboardView > .dashboard-hero,
html[data-theme='light'] #dashboardView > .dashboard-hero {
    background-color: var(--dashboard-hero-surface) !important;
    background-image: var(--dashboard-hero-gradient) !important;
}

html[data-theme='dark'] #dashboardView .dashboard-metrics > .metric-card {
    background-color: #171719 !important;
    background-image:
        radial-gradient(circle at 92% 10%, rgba(var(--metric-glow-rgb), .17) 0%, rgba(var(--metric-glow-rgb), .05) 30%, transparent 54%),
        linear-gradient(145deg, #202023 0%, #171719 100%) !important;
}

html[data-theme='light'] #dashboardView .dashboard-metrics > .metric-card {
    background-color: #ffffff !important;
    background-image:
        radial-gradient(circle at 92% 10%, rgba(var(--metric-glow-rgb), .08) 0%, rgba(var(--metric-glow-rgb), .025) 31%, transparent 54%),
        linear-gradient(145deg, #ffffff 0%, #f5f6f7 100%) !important;
}