/* The dark colors, after enginegraph.css. Loaded by the choice in the profile (Profile::THEMES, EngineGraph): only with a
   dark browser (media="(prefers-color-scheme: dark)"), always, or not at all */

:root {
    --bg: #121212;
    --fg: #eaeaea;
    --panel: #1e1e1e;
    --border: #CCCCCC;
}

body {
    background-color: #444;
    color: #e6e6e6;
}

input,
select,
textarea {
    background-color: #1a1a1a;
    color: #e6e6e6;
    border-color: #444;
}

/* A button stays light, except in the places below */
.eg-button:hover {
    background-color: #3a3a3a;
    color: #919191;
}

.eg-button:active {
    background-color: #444;
}

#ajaxOverlay {
    background: rgba(0,0,0,0.35);
}

.eg-home .eg-button,
.eg-unsaved-dialog .eg-button,
.eg-suggestion-dialog .eg-button,
.eg-photo-viewer .eg-button {
    background-color: #2b2b2b;
    color: #e6e6e6;
    border-color: #555;
}

.eg-home .eg-button:hover,
.eg-unsaved-dialog .eg-button:hover,
.eg-suggestion-dialog .eg-button:hover,
.eg-photo-viewer .eg-button:hover {
    background-color: #3a3a3a;
}

/* Lighter than the page behind its overlay */
.eg-suggestion-dialog {
    background: #4a4a4a;
}

.eg-suggestion-status {
    color: #f3b4b4;
}

.eg-notice-error {
    background: #3a1d1d;
    color: #f3b4b4;
    border-color: #7a3a3a;
}

.eg-notice-success {
    background: #1d3324;
    color: #b4e3c3;
    border-color: #3f7a52;
}

.eg-vf-error {
    color: #f3b4b4;
}

.eg-vf-tab-complete {
    color: #7fd69a;
}

.eg-vf-tab-incomplete,
.eg-garage-incomplete,
.clutch-slips,
.bmep-too-high,
.whatif-over-limit,
.eg-mcs-mismatch,
.eg-mcs-table .eg-mcs-warn td,
.eg-mcs-scraper-error {
    color: #f3b4b4;
}

.eg-catalog-pill-review {
    color: #e6bb62;
    background: #3a2f14;
}

.eg-catalog-pill-link {
    color: #8cc6ea;
    background: #1d3a4c;
}

.eg-catalog-pill-done {
    color: #b4e3c3;
    background: #1d3324;
}

.eg-catalog-panel .eg-catalog-danger,
.eg-mcs-table .eg-mcs-invalid .eg-mcs-status {
    color: #f09a90;
}

/* Without the background of .eg-home .eg-button above */
.eg-catalog-panel .eg-catalog-danger {
    background-color: transparent;
}