@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
/* @import url('./js/lib/generic-list.css'); */
@import "./css/animations.css";

body,
html,
#app {
    margin: 0;
    height: 100%;
}

#app {
    font-family: 'Roboto', sans-serif;
    --color-foreground: black;
    --color-background: white;
    --color-accent: #525252;
    --color-highlight-background: var(--color-foreground);
    --color-highlight-foreground: var(--color-background);
    --color-text-default: var(--color-foreground);
    --color-text-error: hsl(6 73% 41% / 1);

    --color-accent-hue-1: #bad0f0;

    color: var(--color-text-default);
    background: var(--color-background);

    margin: 0;
    padding: 0;
    display: grid;
}




/*
ToDo. try this black white gray scheme
Hex	RGB
#e8e8e8	(232,232,232)
#b7b7b7	(183,183,183)
#8c8c8c	(140,140,140)
#525252	(82,82,82)
#000000	(0,0,0)
*/


@media (prefers-color-scheme: dark) {
    body {
        background: black;
    }

    #app {
        --color-foreground: white;
        --color-background: black;
        --color-accent-hue-1: #47688c;
    }

}

.form__button-wrapper {
    color: var(--color-text-default);
    margin-top: 2em;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
}

.form-invalid button[type="submit"] {
    color: var(--color-text-error);
    border-color: transparent;
}

.button-set {
    display: grid;
    grid-auto-columns: 1fr;
    column-gap: 3em;
    grid-auto-flow: column;
}

button {
    border: 2px solid var(--color-accent);
    padding: 12px 34px 9px;
    color: var(--color-foreground);
    background: var(--color-background);
    border-radius: 2px;
    font-size: 1.25rem;
}


button.toggled-on {
    background-color: var(--color-accent-hue-1);
}

button.disabled {
    background: lightgray;
}

.page__current-status,
.current-status__wrapper {
    display: grid;
    padding: 1em 1em;
}

.current-status__label {
    grid-column: 1/2;
    align-self: center;
    text-align: right;
}

.current-status__item {
    display: grid;
    grid-auto-columns: 1fr;
    column-gap: .625em;
}

.current-status__value {
    text-align: left;
    grid-column: 2/3;
    font-size: 1.3em;
    align-self: center;
}

.current-status__value>span {
    border: 1px solid var(--color-foreground);
    padding: 0.25em;
    border-radius: 5px;
}

.page__current-status section,
.current-status__wrapper section {
    display: grid;
    grid-auto-rows: 3em;
    align-content: center;
}

.current-status__refresh-button {
    align-content: center;
    justify-self: center;
    padding: 0.625em 3em;
    margin-top: 3em;
    border: 1px solid var(--color-foreground);
    color: var(--color-foreground);
    background-color: var(--color-background);
    text-decoration: none;
    border-radius: 2px;
}

.page__dashboard {
    padding: 0;
}

.page {
    display: grid;
    /* align-items: center; */
    justify-items: center;
}

.form__button-wrapper button {
    width: 100%;
}


.form__input[type="number"] {
    width: 4em;
    font-size: 2em;
    text-align: center;
}

.form__input-wrapper label {
    padding: 1.25em 3em;
}

.form__input-label {
    display: grid;
}

.form__input-label__wrapper {
    font-size: 1.25rem;
}


.async__bottle__saving {
    .form__input-wrapper {
        filter: contrast(20%);
    }

    .form__input-wrapper input {
        opacity: .5;
    }
}

.bi.bi-plus-circle-dotted {
    width: 24px;
    height: 24px;
    color: var(--color-foreground);
    margin-left: 0.2em;
}


.vis-item-content {
    background: var(--color-background);
    color: var(--color-text-default);
}

.vis-time-axis .vis-text {
    color: var(--color-text-default);
}

.vis-content svg text {
    fill: var(--color-text-default);
}

a {
    color: var(--color-text-default);
}

.timeline__viz-wrapper {
    width: 100vw;
    height: calc(100vh);
}



.go-back-button {
    position: absolute;
    z-index: 100;
}

.nav-link,
.go-back-button {
    background: var(--color-accent-hue-1);
    padding: 0.625em;
    border: 1px solid var(--color-accent);
    border-radius: 0 0 2px 2px;
}

.vis-labelset .vis-label,
.vis-time-axis .vis-text {
    color: var(--color-text-default) !important;
}

.vis-item-content {
    width: 100%;
}

.page__timeline .vis-timeline {
    border: none;
    /*1px solid #bfbfbf;*/
}

nav {
    display: grid;
    grid-auto-columns: max-content;
    position: absolute;
    top: -100%;
    transition: top 1s cubic-bezier(0.4, 0.0, 0.2, 1), line-height 1s;
}

.nav-menu__closed {
    top: calc(var(--nav-element-height) * -1);
}

.nav-menu__open {
    top: 0;
}

/* Responsiveness for alt screen orientations */
/* .page__current-status {
    grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
}
.page__current-status:last-child:nth-child(3n - 1) {
    grid-column-end: -2;
}

.page__current-status:nth-last-child(2):nth-child(3n + 1) {
    grid-column-end: 4;
} */