/* Warm graphite palette. Keep media and chart colors unchanged. */
html.dark-theme {
    color-scheme: dark;
    --dark-page: #111110;
    --dark-surface: #222221;
    --dark-raised: #31312e;
    --dark-hover: #3b3a37;
    --dark-border: #494844;
    --dark-text: #eeeeec;
    --dark-muted: #b5b3ad;
    --dark-accent: #cbb99f;
    --dark-row-selected: #6a5a3e;
    --dark-weekend: #e6aaa2;
    background-color: var(--dark-page);
}

html.dark-theme body {
    color: var(--dark-text);
    background-color: var(--dark-page);
    min-height: 100vh;
}

html.dark-theme a,
html.dark-theme #main .news a,
html.dark-theme .ui-widget-content a {
    color: var(--dark-accent);
}

html.dark-theme h1,
html.dark-theme h2,
html.dark-theme .black,
html.dark-theme .black a,
html.dark-theme .black span,
html.dark-theme table.stat td a.nohand {
    color: var(--dark-text);
}

html.dark-theme .lightGray,
html.dark-theme .lightGray a,
html.dark-theme .lightGray span,
html.dark-theme .lGray,
html.dark-theme .lgrey,
html.dark-theme .help > .lgrey {
    color: var(--dark-muted);
}

html.dark-theme .bg-light-green {
    background-color: var(--dark-surface);
}

/* Only the icon silhouette gets a soft glow; its transparent pixels stay transparent. */
html.dark-theme .img-logo {
    filter: drop-shadow(0 0 1px var(--dark-accent));
    background-color: transparent;
}

/* Navigation and interactive states. */
html.dark-theme .nav-links {
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
}

html.dark-theme .nav-link {
    border-color: var(--dark-border);
}

html.dark-theme .nav-link:hover,
html.dark-theme .ui:hover,
html.dark-theme .ui-compact:hover,
html.dark-theme a:not([class=no-hover]):hover {
    background-color: var(--dark-hover);
    box-shadow: none;
}

html.dark-theme .nav-link a:hover {
    background-color: transparent;
}

html.dark-theme .button-group button.sel {
    color: var(--dark-text) !important;
    background-color: #544f46 !important;
}

html.dark-theme a:focus-visible,
html.dark-theme button:focus-visible,
html.dark-theme input:focus-visible,
html.dark-theme select:focus-visible,
html.dark-theme textarea:focus-visible {
    outline: 2px solid var(--dark-accent);
    outline-offset: 2px;
}

/* Forms, buttons and searchable lists. */
html.dark-theme input,
html.dark-theme textarea,
html.dark-theme select,
html.dark-theme button,
html.dark-theme .button-group button {
    color: var(--dark-text);
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
}

html.dark-theme input::placeholder,
html.dark-theme textarea::placeholder {
    color: var(--dark-muted);
}

html.dark-theme input[type="checkbox"],
html.dark-theme input[type="radio"] {
    accent-color: var(--dark-accent);
}

html.dark-theme button:hover,
html.dark-theme input[type="button"]:hover,
html.dark-theme input[type="submit"]:hover,
html.dark-theme .button-group button:hover {
    background-color: var(--dark-hover);
}

html.dark-theme button.img {
    background-color: transparent;
}

html.dark-theme .searchable-select-results,
html.dark-theme .slide_div,
html.dark-theme .list-small,
html.dark-theme .list-small-long {
    color: var(--dark-text);
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
    box-shadow: none;
}

html.dark-theme .searchable-select-option:hover,
html.dark-theme .searchable-select-option.active {
    background-color: var(--dark-hover);
}

/* Alternating table surfaces and their borders. */
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: var(--dark-surface) !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: #2a2a28 !important;
}

html.dark-theme table.simple tr.filters,
html.dark-theme tr.header,
html.dark-theme .fill-dark-green {
    background-color: var(--dark-raised);
}

html.dark-theme table.simple th,
html.dark-theme table.simple tr.basement td,
html.dark-theme table.simple tfoot tr:first-child td,
html.dark-theme table.stat td,
html.dark-theme .dotted,
html.dark-theme .underlineDash {
    border-color: var(--dark-border);
}

html.dark-theme tr.header_border_bottom td,
html.dark-theme tr.header_border_bottom_bold_center td,
html.dark-theme tr.header_border_top td,
html.dark-theme #entryTable thead th,
html.dark-theme #entryTable tfoot td {
    color: var(--dark-text);
    background-color: var(--dark-raised) !important;
    border-color: var(--dark-border);
}

html.dark-theme #entryTable th,
html.dark-theme #entryTable td {
    border-color: var(--dark-border) !important;
}

html.dark-theme #entryTable tr td:first-child::after,
html.dark-theme #entryTable tr th:first-child::after,
html.dark-theme #entryTable tr td:last-child::before,
html.dark-theme #entryTable tr th:last-child::before {
    border-color: var(--dark-border);
}

html.dark-theme .highlight,
html.dark-theme tr.highlight td {
    background-color: #503330 !important;
}

html.dark-theme .highlightGreen,
html.dark-theme .highlight-green,
html.dark-theme .highlight-green td,
html.dark-theme td.hightlight_td_green {
    background-color: #304333 !important;
}

/* Popups can sit outside body and some have inline light backgrounds. */
html.dark-theme #fullBG {
    background-color: rgba(0, 0, 0, 0.6);
}

html.dark-theme #fullBG img {
    opacity: 0;
}

html.dark-theme .ui-widget-overlay {
    background-color: rgba(0, 0, 0, 0.6);
}

html.dark-theme .linked-popup,
html.dark-theme #overlay div.modal,
html.dark-theme div.comment,
html.dark-theme .ui-dialog.ui-widget-content,
html.dark-theme .ui-datepicker,
html.dark-theme .ui-widget-content,
html.dark-theme .ui-tooltip,
html.dark-theme #basement .p16 {
    color: var(--dark-text) !important;
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !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,
html.dark-theme .ui-datepicker .ui-datepicker-header,
html.dark-theme .ui-widget-header {
    color: var(--dark-text);
    background-color: var(--dark-raised) !important;
    border-color: var(--dark-border);
}

html.dark-theme .ui-state-default,
html.dark-theme .ui-widget-content .ui-state-default,
html.dark-theme .ui-widget-header .ui-state-default {
    color: var(--dark-text);
    background: var(--dark-raised);
    border-color: var(--dark-border);
}

html.dark-theme .ui-state-hover,
html.dark-theme .ui-state-focus,
html.dark-theme .ui-widget-content .ui-state-hover,
html.dark-theme .ui-widget-content .ui-state-focus {
    background-color: var(--dark-hover);
}

html.dark-theme .ui-state-active,
html.dark-theme .ui-widget-content .ui-state-active,
html.dark-theme .ui-widget-header .ui-state-active {
    color: var(--dark-text);
    background: #544f46;
    border-color: var(--dark-accent);
}

html.dark-theme .ui-state-default a,
html.dark-theme .ui-state-default a:link,
html.dark-theme .ui-state-default a:visited,
html.dark-theme .ui-state-hover a,
html.dark-theme .ui-state-focus a,
html.dark-theme .ui-state-active a,
html.dark-theme div.tagcloud a:link,
html.dark-theme div.tagcloud a:visited,
html.dark-theme div.tagcloud a:hover {
    color: var(--dark-accent);
}

html.dark-theme .ui-datepicker .ui-datepicker-buttonpane button {
    color: var(--dark-text) !important;
}

html.dark-theme table.simple thead th a.ui:hover,
html.dark-theme .linked-popup .filter-heading-clone {
    background-color: var(--dark-hover) !important;
    box-shadow: none !important;
}

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

html.dark-theme #accountForm span.lGray {
    color: var(--dark-muted) !important;
}

html.dark-theme .popup-header > div,
html.dark-theme .popup-buttons > div {
    border-color: var(--dark-border) !important;
}

html.dark-theme .calculator-popup,
html.dark-theme .calculator-inline,
html.dark-theme .calculator-result,
html.dark-theme .calculator-keystroke {
    color: var(--dark-text);
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
}

html.dark-theme .calculator-row button,
html.dark-theme .calculator-row .calculator-ctrl {
    color: var(--dark-text);
    background-color: var(--dark-raised);
    border-color: var(--dark-border);
}

html.dark-theme .calculator-row button:hover,
html.dark-theme .calculator-focussed {
    background-color: var(--dark-hover);
}

html.dark-theme .calculator-disabled {
    background-color: var(--dark-page);
}

html.dark-theme tr.sel,
html.dark-theme tr.sel td,
html.dark-theme .sel {
    background-color: #444039 !important;
}

/* Grid cells have their own alternating backgrounds, so highlight them directly. */
html.dark-theme table.simple tbody tr.entityRow.sel,
html.dark-theme table.simple tbody tr.entityRow.sel > td {
    background-color: var(--dark-row-selected) !important;
}

html.dark-theme table.simple tbody tr.entityRow.sel a {
    color: #f2d39a;
}

html.dark-theme .red {
    color: #efa8a0;
}

html.dark-theme .weekend-day,
html.dark-theme input[id^="day_of_week_for_"].red,
html.dark-theme .ui-datepicker-week-end span {
    color: var(--dark-weekend);
}

html.dark-theme table.simple tbody tr.entityRow.sel .weekend-day {
    color: #f5d0c6;
}

html.dark-theme .green,
html.dark-theme span.s_today {
    color: #9dcca5;
}

html.dark-theme .money-fraction {
    color: var(--dark-text) !important;
}

html.dark-theme .money-fraction-empty {
    color: var(--dark-muted) !important;
}

html.dark-theme progress[value]::-webkit-progress-bar {
    background-color: var(--dark-surface);
}

html.dark-theme progress[value]::-webkit-progress-value {
    background: var(--dark-accent);
}