body.theme-dark {
    /****************/
    /* Transmission */
    /****************/
    --tm-color-neutral-gray: #999;
    --theme-table-bg: var(--t-color-background-primary);
    --theme-button-primary-bg-rest: #f5f5f5;
    --theme-button-primary-text-rest: #161616;
    --theme-button-primary-bg-hover: #c5c5c5;
    --theme-table-heading-bg: #353535;
    --theme-label: #d5d5d5;
    --theme-input-text-color-rest: #e5e5e5;
    /* Inactive tab labels: Transmission's light tab-text token doesn't invert, leaving them
       near-black on the dark surface. Pin to white. The active/selected tab keeps
       Transmission's --tm-color-primary green. */
    --theme-tab-bar-button-text: var(--t-color-text-primary);
    --theme-box-bg: var(--t-color-background-primary);
    --theme-box-text: var(--t-color-text-primary);
    --tm-color-neutral-mid-gray: var(--t-color-border-primary);
    --tm-color-neutral-white: var(--t-color-background-primary, #353535);

    --t-color-background-primary: #212121;
    --t-color-text-primary: #fff;
    --t-color-background-secondary: #2f2f2f;
    --t-color-text-secondary: #d5d5d5;
    --t-color-border-primary: #5b5b5b;
    --t-color-background-text-input: #2f2f2f;
    --t-color-text-brand:#9F9DFF;
    --pr-text-error: #ff8277;

    /* Chip palette — dark overrides (light values in site.css). ActionRequired and Other
       are a deeper red / distinct greys, not a straight light/dark swap of the light value. */
    --pr-chip-action-bg: rgb(163 47 36);
    --pr-chip-action-text: rgb(255 255 255);
    --pr-chip-progress-bg: rgb(1 27 130);
    --pr-chip-progress-text: rgb(166 200 255);
    --pr-chip-completed-bg: rgb(31 72 36);
    --pr-chip-completed-text: rgb(189 233 194);
    --pr-chip-neutral-bg: rgb(91 91 91);
    --pr-chip-neutral-text: rgb(224 224 224);

    --pr-chip-app-ld-bg: rgb(6 56 88);
    --pr-chip-app-ld-text: rgb(171 217 246);
    --pr-chip-app-fv-bg: rgb(3 72 70);
    --pr-chip-app-fv-text: rgb(163 236 235);
    --pr-chip-app-v-bg: rgb(53 34 97);
    --pr-chip-app-v-text: rgb(217 196 255);
    --pr-chip-app-other-bg: rgb(91 91 91);
    --pr-chip-app-other-text: rgb(224 224 224);
}

/* Subtle page notes: the muted light-grey (site.css .pr-page-note) is too dim on the
   dark surface, so lift it to white. */
body.theme-dark .pr-page-note {
    color: #fff;
}

/* Theme-swapped illustrations
 * Light image shows by default; dark theme hides it and reveals the dark variant.
*/
.pr-themed-img-dark { display: none; }
body.theme-dark .pr-themed-img-light { display: none; }
body.theme-dark .pr-themed-img-dark { display: block; }

/* Body & Header
 * Gets a slightly lighter background color
*/
body.theme-dark{
    background-color: var(--t-color-background-secondary, #2F2F2F);
}

body.theme-dark #pr-main-header, .cp-case-card{
    background-color: var(--t-color-background-secondary, #2F2F2F);
}

/* Contrast Main panel on registration forms */
body.theme-dark #pr-two-column-content-main{
    background-color: var(--t-color-background-primary, #212121);
}

/* Readonly */
body.theme-dark .tm-input[readonly] {
    background-color: #042236;
}

/* Select */
body.theme-dark select.tm-input {
    background-image: url('data:image/svg+xml;utf8,<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="%23e6e6e6" /></svg>');
}

/* DataTables length / search controls: site.css gives them `background: none`, so in dark mode
   the native <option> popup falls back to a light system surface and the light option text is
   invisible. Give the controls (and the <option>s) the same dark input surface as .tm-input. */
body.theme-dark #pr-one-column-content .dt-search input,
body.theme-dark #pr-one-column-content .dt-length select,
body.theme-dark #pr-one-column-content .dt-length select option,
body.theme-dark #pr-one-column-content select.tm-input,
body.theme-dark #pr-one-column-content select.tm-input option {
    background-color: var(--t-color-background-text-input);
    color: var(--t-color-text-primary);
}

/* tm-dropdown menus (admin Actions dropdown + user-icon menu): Transmission derives the menu
   surface/text/hover from light-theme tokens that don't invert on the dark theme, so the menus
   stayed light while the registration <select class="tm-input"> controls and the page-size
   dropdown above are dark. Pin the menu to that same dark input surface so every dropdown in
   the app matches. */
body.theme-dark .tm-menu {
    background-color: var(--t-color-background-text-input);
}
body.theme-dark .tm-menu > li > a,
body.theme-dark .tm-menu > li > button,
body.theme-dark .tm-menu > li > form > button {
    color: var(--t-color-text-primary);
}
body.theme-dark .tm-menu > li > a:hover,
body.theme-dark .tm-menu > li > button:hover,
body.theme-dark .tm-menu > li > form > button:hover {
    background-color: var(--t-color-background-primary);
}

/* Banner
 * Transmission fills is-positive/is-negative with light tones and ships no dark override,
 * so without these they render as light islands in dark mode. Tones mirror the dark
 * notification overrides below.
*/
body.theme-dark .tm-banner {
    &.is-informative {
        background-color: #042236;
        border-color: #0b609a;
        color: #fff;
    }

    &.is-caution {
        background-color: #3d2407;
        border-color: #a66213;
        color: #fff;
    }

    &.is-negative {
        background-color: #3d110d;
        /* Lighter than the fill so the region boundary clears WCAG 1.4.11 (3:1) against the dark page. */
        border-color: #da1e28;
        color: #fff;
    }

    &.is-positive {
        background-color: #17361b;
        border-color: #24a148;
        color: #fff;
    }
}

/* Notifications */
body.theme-dark .tm-notification{
    --background-color: #3d3d3d;
    --icon-color: #5b5b5b;
}
body.theme-dark .tm-notification.is-positive{
    --background-color: #17361b;
    --icon-color: #24a148;
}
body.theme-dark .tm-notification.is-negative{
    --background-color: #3d110d;
    --icon-color: #ff8277;
}
body.theme-dark .tm-notification.is-caution{
    --background-color: #4d2d09;
    --icon-color: #f9ae4a;
}