@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;
    /* visible so dcc.Dropdown / Select menus are not clipped */
    overflow: visible;
    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;
    /* above sticky nav (z-50) and card stacking contexts */
    z-index: 1060 !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;
}

/* Bootstrap tabs on dark shell */
.nav-tabs {
    border-bottom-color: var(--ei-border) !important;
}

.nav-tabs .nav-link {
    color: var(--ei-text-muted) !important;
    border-color: transparent !important;
}

.nav-tabs .nav-link:hover {
    color: var(--ei-text) !important;
    border-color: transparent !important;
}

.nav-tabs .nav-link.active {
    color: var(--ei-text) !important;
    background-color: var(--ei-bg-card) !important;
    border-color: var(--ei-border) var(--ei-border) var(--ei-bg-card) !important;
}

/* Custom main-tab buttons (dbc.Tabs is broken with Dash 2.14 + dbc 2.0.4) */
.nav-tabs > button.nav-link {
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding: 0.5rem 1rem;
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

.tab-content {
    padding-top: 1rem;
}

/* Customize: keep Campaign overlays above the next card */
.customize-campaign-card {
    position: relative;
    z-index: 20;
    overflow: visible !important;
}

.customize-audience-card {
    position: relative;
    z-index: 1;
}

.customize-campaign-card .card-body,
.customize-campaign-card .row,
.customize-campaign-card .col,
.customize-campaign-card .DateInput,
.customize-campaign-card .SingleDatePicker,
.customize-campaign-card .SingleDatePickerInput {
    overflow: visible !important;
}

/* react-dates calendar (dcc.DatePickerSingle) */
.SingleDatePicker {
    position: relative;
    z-index: 30;
}

.SingleDatePickerInput,
.DateInput,
.DateInput_input,
.DateInput_input__focused {
    background: var(--ei-bg-card) !important;
    color: var(--ei-text) !important;
    border-color: var(--ei-border) !important;
}

.DateInput_input {
    font-weight: 500;
}

.SingleDatePicker_picker,
.SingleDatePicker_picker__directionLeft,
.SingleDatePicker_picker__directionRight {
    z-index: 3000 !important;
}

.customize-email-type-dropdown,
.customize-email-type-dropdown .Select,
.customize-email-type-dropdown .Select-control {
    position: relative;
    z-index: 25;
}

.customize-email-type-dropdown .Select-menu-outer,
.customize-campaign-card .Select-menu-outer {
    z-index: 3000 !important;
}

/* Bootstrap tables on dark shell (Customize audience preview, etc.) */
.customize-audience-table,
.table.customize-audience-table {
    --bs-table-bg: #151c2c !important;
    --bs-table-bg-type: #151c2c !important;
    --bs-table-bg-state: #151c2c !important;
    --bs-table-color: #f8fafc !important;
    --bs-table-border-color: rgba(148, 163, 184, 0.25) !important;
    --bs-table-striped-bg: #1a2336 !important;
    --bs-table-striped-color: #f8fafc !important;
    --bs-table-hover-bg: #1e293b !important;
    --bs-table-hover-color: #f8fafc !important;
    color: #f8fafc !important;
    background-color: #151c2c !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
}

.customize-audience-table th,
.customize-audience-table td,
.table.customize-audience-table > :not(caption) > * > * {
    color: #f8fafc !important;
    background-color: #151c2c !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
}

.customize-audience-table thead th {
    color: #e2e8f0 !important;
    font-weight: 600;
}