/* Invert the existing light palette while preserving the original colors of media. */
html.dark-theme {
    color-scheme: dark;
    --page-surface-before-filter: #e2e2e2;
    background-color: #1d1d1d;
}

html.dark-theme body {
    filter: invert(1) hue-rotate(180deg);
    background-color: var(--page-surface-before-filter) !important;
    min-height: 100vh;
}

/* Mobile filter popups are outside the transformed body to stay centered in the viewport. */
html.dark-theme > .linked-popup.viewport-centered {
    filter: invert(1) hue-rotate(180deg);
}

/* This muted label needs a darker source color to remain readable after body inversion. */
html.dark-theme .help > .lgrey {
    color: #444;
}

/* The body filter inverts these source colors to softer text on the home page. */
html.dark-theme #main .news {
    color: #4b4b4b;
}

html.dark-theme #main .news .news-heading {
    color: #333;
}

html.dark-theme #main .news a {
    color: #486078;
}

html.dark-theme img,
html.dark-theme video,
html.dark-theme canvas,
html.dark-theme iframe {
    filter: invert(1) hue-rotate(180deg);
}

/* The browser's dark control palette otherwise produces dark text after inversion. */
html.dark-theme .button-group button {
    color: #111 !important;
    color-scheme: light;
}

html.dark-theme .ui-datepicker .ui-datepicker-buttonpane button {
    color: #111 !important;
    color-scheme: light;
}

/* Keep the small gold coin recognizable against the dark page. */
html.dark-theme .img-logo {
    filter: invert(1) hue-rotate(180deg);
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
}

/* Selected group button: lighter than its neighbours, with readable text. */
html.dark-theme .button-group button.sel {
    background-color: #a0a0a0 !important;
    color: #111 !important;
}

/* Neutral grey surfaces for custom and jQuery UI popups. */
html.dark-theme #overlay div.modal,
html.dark-theme .ui-dialog.ui-widget-content {
    background-color: #d4d4d4 !important;
}

html.dark-theme #overlay .popup-header,
html.dark-theme #overlay .popup-buttons .fill-dark-green,
html.dark-theme .ui-dialog .ui-dialog-titlebar,
html.dark-theme .ui-dialog .ui-dialog-buttonpane {
    background-color: #c1c1c1 !important;
}

/* Keep alternating table rows distinct on the dark surface. */
html.dark-theme tr.light,
html.dark-theme tr.light_center,
html.dark-theme tr.light_right,
html.dark-theme td.light,
html.dark-theme table.simple:first-child tbody tr:nth-child(2n) td {
    background-color: #d2d2d2 !important;
}

html.dark-theme tr.dark,
html.dark-theme tr.dark_center,
html.dark-theme tr.dark_right,
html.dark-theme td.dark,
html.dark-theme .dark,
html.dark-theme table.simple tbody tr:nth-child(2n-1) td {
    background-color: #c3c3c3 !important;
}

/* The statistics table header and footer share the page surface. */
html.dark-theme #entryTable thead th,
html.dark-theme #entryTable tfoot td {
    background-color: var(--page-surface-before-filter) !important;
}

/* Match the hovered heading to its clone in the open filter. */
html.dark-theme table.simple thead th a.ui:hover,
html.dark-theme .linked-popup .filter-heading-clone {
    background-color: #d0d0d0 !important;
}

html.dark-theme table.simple thead th a.ui:hover,
html.dark-theme .linked-popup a[id$="-cloned"]:hover {
    box-shadow: none !important;
}

html.dark-theme .linked-popup a[id$="-cloned"]:hover {
    background: transparent !important;
}

/* The account balance label needs more contrast inside the popup. */
html.dark-theme #accountForm span.lGray {
    color: #444 !important;
}