@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..700;1,9..40,400..700&family=Space+Grotesk:wght@500;600;700&display=swap");

/* Ein Insights–inspired dark shell (public dashboard) */
:root {
    --ei-bg-deep: #0b0f1a;
    --ei-bg-panel: #111827;
    --ei-bg-card: #151c2c;
    --ei-border: rgba(148, 163, 184, 0.18);
    --ei-text: #f8fafc;
    --ei-text-muted: #e2e8f0;
    --ei-text-dim: #cbd5e1;
    --ei-accent-blue: #3b82f6;
    --ei-accent-green: #10b981;
    --ei-amber: #f59e0b;
    --ei-danger: #ef4444;
    --bs-primary: #3b82f6;
    --bs-info: #10b981;
}

body {
    background: var(--ei-bg-deep);
    color: var(--ei-text);
    font-family: "DM Sans", system-ui, -apple-system, sans-serif;
}

.font-display {
    font-family: "Space Grotesk", "DM Sans", sans-serif;
    font-weight: 600;
}

.premium-shadow {
    box-shadow:
        0 10px 15px -3px rgb(0 0 0 / 0.35),
        0 4px 6px -4px rgb(0 0 0 / 0.25);
}

.metric-card,
.recommendation-card,
.card {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.metric-card:hover,
.recommendation-card:hover,
.card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 20px 25px -5px rgb(0 0 0 / 0.4),
        0 8px 10px -6px rgb(0 0 0 / 0.35);
}

.demo-badge {
    background: linear-gradient(90deg, var(--ei-accent-blue), var(--ei-accent-green));
    border-radius: 9999px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.section-header {
    color: var(--ei-text-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dash-table-container .dash-spreadsheet-container {
    border-radius: 1rem;
    border: 1px solid var(--ei-border);
    background: var(--ei-bg-card);
}

/* Dash DataTable */
.dash-cell,
.dash-header {
    background-color: var(--ei-bg-card) !important;
    color: var(--ei-text) !important;
    border-color: var(--ei-border) !important;
}

.dash-spreadsheet-menu {
    background: var(--ei-bg-panel) !important;
}

.card {
    border: 1px solid var(--ei-border) !important;
    border-radius: 1.5rem !important;
    overflow: hidden;
    background-color: var(--ei-bg-card) !important;
    color: var(--ei-text) !important;
}

.card-header {
    background: var(--ei-bg-panel) !important;
    border-bottom: 1px solid var(--ei-border) !important;
    color: var(--ei-text) !important;
    font-weight: 700;
}

.text-primary,
.card .text-primary,
.card-body .text-primary,
.card-header.text-primary {
    color: #93c5fd !important;
}

.text-info,
.card .text-info,
.card-body .text-info {
    color: #6ee7b7 !important;
}

.card-text,
.card-title,
.card-body {
    color: var(--ei-text) !important;
}

.text-muted,
.text-secondary,
.card .text-muted,
.card-body .text-muted,
.card .text-secondary,
.card-body .text-secondary {
    color: var(--ei-text-muted) !important;
}

/* Plotly mode bar and paper blend with dark UI */
.js-plotly-plot .plotly {
    background: transparent !important;
}

/* Dash dropdown (dcc.Dropdown) */
.Select-control {
    background-color: var(--ei-bg-card) !important;
    border-color: var(--ei-border) !important;
    color: var(--ei-text) !important;
}

.Select-menu-outer {
    background-color: var(--ei-bg-panel) !important;
    border: 1px solid var(--ei-border) !important;
}

.Select-option {
    background-color: var(--ei-bg-panel) !important;
    color: var(--ei-text) !important;
}

.Select-option.is-focused {
    background-color: #1e293b !important;
}

.Select-value-label,
.Select-placeholder {
    color: var(--ei-text) !important;
}

.SingleValue {
    color: var(--ei-text) !important;
}

/* Bootstrap accordion on dark cards */
.accordion-item {
    background-color: transparent !important;
    border-color: var(--ei-border) !important;
    color: var(--ei-text) !important;
}

.accordion-button {
    background-color: var(--ei-bg-panel) !important;
    color: var(--ei-text) !important;
}

.accordion-button:not(.collapsed) {
    background-color: #1e293b !important;
    color: var(--ei-text) !important;
}

.accordion-body {
    background-color: var(--ei-bg-card) !important;
    color: var(--ei-text) !important;
}