/* Dark mode for Insight. SharedUI styles are driven by semantic color variables, so most of the
   app themes by redefining them when <html data-bs-theme="dark"> is set (see UserProfileSessionManager). */
[data-bs-theme="dark"] {
    color-scheme: dark;

    --color-surface: #1f2937;
    --color-surface-hover: #273548;
    --color-background: #111827;
    --color-text-primary: #f3f4f6;
    --color-text-secondary: #9ca3af;
    --color-border: #374151;
    --color-border-dark: #4b5563;

    --color-brand-light-5: color-mix(in srgb, var(--color-brand-light) 10%, transparent);
    --color-brand-light-10: color-mix(in srgb, var(--color-brand-light) 18%, transparent);
    --color-brand-light-20: color-mix(in srgb, var(--color-brand-light) 28%, transparent);

    --bs-body-color: var(--color-text-primary);
    --bs-body-bg: var(--color-background);
}

[data-bs-theme="dark"] body {
    color: var(--color-text-primary);
    background-color: var(--color-background);
}

[data-bs-theme="dark"] a,
[data-bs-theme="dark"] .btn-link {
    color: var(--color-blue-400);
}

[data-bs-theme="dark"] code {
    color: #f472b6;
}

/* Bootstrap 5.1 has no dark palette, so the form controls and dropdowns it renders need explicit colors. */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] select {
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    border-color: var(--color-border-dark);
}

[data-bs-theme="dark"] ::placeholder {
    color: var(--color-text-secondary);
}

[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .list-group-item {
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--color-text-primary);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--color-surface-hover);
}

[data-bs-theme="dark"] .table {
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

[data-bs-theme="dark"] hr {
    border-color: var(--color-border-dark);
}

[data-bs-theme="dark"] #blazor-error-ui {
    color: #111827;
}

[data-bs-theme="dark"] .loading-progress circle {
    stroke: var(--color-border);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background-color: var(--color-background);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: var(--color-border-dark);
}