.appContainer {
    background-color: var(--color-bg);
    width: 100vw;
    height: 100vh;

    display: grid;
    grid-template-columns: 50px 1fr;

    padding: var(--padding);
    box-sizing: border-box;
    gap: var(--gap-sm);
}

#bg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    filter: blur(180px) !important;
}

.app {
    background-color: var(--color-primary);
    border-radius: var(--radius-md);
    display: grid;
    /* Use minmax(0,1fr) so inner scroll areas can actually overflow instead of expanding row */
    grid-template-rows: 50px minmax(0, 1fr);
    padding: var(--padding);
    box-sizing: border-box;
    gap: var(--gap);
    /* Allow the 1fr row (dashboard) to actually shrink so inner scroll areas work */
    min-height: 0;

    .appHeader {
        width: 100%;
        height: 100%;
        background-color: var(--color-secondary);
        border-radius: var(--radius-md);

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .serverStat {
        position: absolute;
        left: var(--padding);
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: var(--gap-sm);


        figure {
            all: unset;
            border-radius: var(--radius-full);
            aspect-ratio: 1 / 1;
            width: .8rem;
        }

        figure.online {
            background-color: var(--color-success);
            animation: greenglow 2s ease-in-out infinite;
        }

        figure.offline {
            background-color: var(--color-danger);
            animation: redglow 2s ease-in-out infinite;
        }
    }
}

@keyframes greenglow {
    0% { 
        box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7), 0 0 0 0 rgba(0, 255, 0, 0.4);
    }
    50% { 
        box-shadow: 0 0 0 5px rgba(0, 255, 0, 0), 0 0 0 7px rgba(0, 255, 0, 0);
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(0, 255, 0, 0), 0 0 0 0 rgba(0, 255, 0, 0);
    }
}

@keyframes redglow {
    0% { 
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7), 0 0 0 0 rgba(255, 0, 0, 0.4);
    }
    50% { 
        box-shadow: 0 0 0 5px rgba(0, 255, 0, 0), 0 0 0 7px rgba(0, 255, 0, 0);
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(0, 255, 0, 0), 0 0 0 0 rgba(0, 255, 0, 0);
    }
}

.col {
    background-color: var(--color-secondary);
    border-radius: var(--radius-md);
    position: relative;
    padding: var(--padding-sm);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    box-sizing: border-box;

    .colHead {
        display: flex;
        flex-direction: column;
        position: relative;

        .backupBtn {
            position: absolute;
            right: var(--padding-sm);
            top: 50%;
            transform: translateY(-50%);

            background-color: transparent;
            opacity: .5;
            transition: opacity var(--ease-fast), background-color var(--ease-fast);
            border-radius: var(--radius-full);
            padding: unset;

            &:hover { opacity: 1; }
        }
    }

    .colHeadAbsolut {
        position: absolute;
        left: var(--padding-sm);
        top: var(--padding-sm);
    }
}

.countdown {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;

    transform: scale(1.3);
}