/**
 * Shared theme bridge - load AFTER bootstrap.min.css and BEFORE the page's own stylesheet.
 *
 * Azure DevOps publishes its palette as CSS variables on :root and forces
 * `body { color: var(--text-primary-color) }`. Nothing sets a background, so on
 * the dark theme Bootstrap's hardcoded `--bs-body-bg: #fff` leaves white text on
 * a white surface. Everything here resolves to the host's own colours, so the
 * light theme renders exactly as before.
 */

:root {
    --da-bg: var(--background-color, #ffffff);
    --da-surface: var(--background-color, #ffffff);
    --da-surface-alt: rgba(var(--palette-neutral-4, 244, 244, 244), 1);
    --da-surface-raised: var(--callout-background-color, #ffffff);

    --da-border: rgba(var(--palette-neutral-8, 234, 234, 234), 1);
    --da-border-strong: rgba(var(--palette-neutral-20, 210, 208, 206), 1);

    --da-text: var(--text-primary-color, #323130);
    --da-text-secondary: var(--text-secondary-color, #605e5c);
    --da-text-disabled: var(--text-disabled-color, #a19f9d);

    --da-row-hover: rgba(var(--palette-neutral-4, 244, 244, 244), 1);
    --da-row-selected: rgba(var(--palette-neutral-8, 234, 234, 234), 1);

    --da-primary: var(--communication-background, #0078d4);
    --da-primary-text: var(--communication-foreground, #0078d4);
    --da-on-primary: var(--text-on-communication-background, #ffffff);
    --da-focus: var(--focus-border-color, #0078d4);
}

/**
 * Bootstrap components derive their own variables from these two - a
 * .dropdown-menu is literally `--bs-dropdown-bg: var(--bs-body-bg)` - so
 * remapping them here repaints dropdowns, cards, tables, modals and inputs.
 */
:root {
    --bs-body-bg: var(--da-bg);
    --bs-body-color: var(--da-text);
    /* .text-body / .bg-body / .card-header build rgba() from these, and a hex
       variable cannot be interpolated - use the host's own base triplets. */
    --bs-body-bg-rgb: var(--palette-neutral-0, 255, 255, 255);
    --bs-body-color-rgb: var(--palette-neutral-100, 51, 49, 48);
    --bs-emphasis-color-rgb: var(--palette-neutral-100, 51, 49, 48);
    --bs-emphasis-color: var(--da-text);
    --bs-secondary-color: var(--da-text-secondary);
    --bs-secondary-bg: var(--da-surface-alt);
    --bs-tertiary-color: var(--da-text-secondary);
    --bs-tertiary-bg: var(--da-surface-alt);
    --bs-border-color: var(--da-border-strong);
    --bs-border-color-translucent: var(--da-border-strong);
    --bs-link-color: var(--da-primary-text);
    --bs-link-hover-color: var(--da-primary-text);
    --bs-heading-color: var(--da-text);
}

/**
 * The host paints the page behind us; opting out of an opaque background keeps
 * our iframes from cutting a light rectangle into the dark shell.
 */
html[data-da-theme="dark"],
html[data-da-theme="dark"] body {
    background-color: var(--da-bg);
    color: var(--da-text);
}

/* Utility classes that hardcode a light surface in markup. */
html[data-da-theme="dark"] .bg-white,
html[data-da-theme="dark"] .bg-light {
    background-color: var(--da-surface) !important;
    color: var(--da-text) !important;
}

/**
 * Inline `style="background-color: white"` beats any class-based rule, so the
 * surfaces we cannot reach from CSS are marked with this hook instead.
 */
html[data-da-theme="dark"] .da-surface {
    background-color: var(--da-surface) !important;
    color: var(--da-text) !important;
}

/* Bootstrap's contextual alerts stay legible but keep their semantic hue. */
html[data-da-theme="dark"] .alert {
    background-color: var(--da-surface-alt);
    border-color: var(--da-border-strong);
    color: var(--da-text);
}

/* SweetAlert2 ships a fixed light palette. */
html[data-da-theme="dark"] .swal2-popup {
    background: var(--da-surface-raised);
    color: var(--da-text);
}

html[data-da-theme="dark"] .swal2-title,
html[data-da-theme="dark"] .swal2-html-container {
    color: var(--da-text);
}

html[data-da-theme="dark"] .swal2-input,
html[data-da-theme="dark"] .swal2-textarea,
html[data-da-theme="dark"] .swal2-select {
    background-color: var(--da-surface-alt) !important;
    color: var(--da-text) !important;
    border-color: var(--da-border-strong) !important;
}

html[data-da-theme="dark"] .swal2-cancel {
    color: var(--da-text) !important;
    border-color: var(--da-border-strong) !important;
}

/* Work item type icons are dark-on-transparent PNGs served by the host. */
html[data-da-theme="dark"] img.da-invert-on-dark {
    filter: var(--third-party-icon-filter, none);
}
