/* Reset CSS */
html, body {
    margin: 0;
    padding: 0;
    /* Driven by assets/theme.css so light mode actually applies.
       These were hardcoded dark and outranked the theme. */
    background-color: var(--pf-bg);
    color: var(--pf-fg);
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

/* Ensure Dash app containers don't have unwanted margins */
#react-entry-point,
._dash-loading-callback {
    margin: 0;
    padding: 0;
    /* This is the Dash root that wraps the whole app, and as an ID selector it
       outranks every rule in theme.css. Hardcoding it dark is what kept the page
       black in light mode while the cards switched correctly. */
    background-color: var(--pf-bg);
}

/* Fix any potential white space at top from Dash */
.dash-debug-menu {
    margin-top: 0;
    background-color: var(--pf-surface-2);
    color: var(--pf-fg);
}

/* Override any potential white backgrounds */
.dash-wrapper {
    background-color: var(--pf-bg);
}