.dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.5fr;
    gap: var(--gap);
    min-height: 0;

    .col1 {
        display: grid;
        grid-template-rows: .1fr 1fr;
        gap: var(--gap);
        min-height: 0;
        max-height: 100%;
    }

    .col4 {
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        gap: var(--gap);
        min-height: 0;

        .console {
            width: 100%;
            min-height: 0;
            height: 100%;
            max-height: 100%;
            border: 1px solid rgb(64, 64, 64);
            border-radius: var(--radius-md);
            display: grid;
            grid-template-rows: 1fr calc(1.5rem + var(--padding-sm));
            background-color: var(--color-primary);
            overflow: hidden;
            scrollbar-width: none;

            .screen {
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 100%;
                position: relative;
                overflow-y: auto;
                overflow-x: hidden;
                scrollbar-width: none;
                overscroll-behavior: contain;
                font-family: var(--font-mono, monospace);
                font-size: 0.7rem;
                line-height: 1.1rem;
                padding: var(--padding-sm);
                box-sizing: border-box;
                background: radial-gradient(circle at 15% 15%, rgba(255,255,255,0.03), transparent 70%);
                flex: 1 1 auto;
                contain: layout paint;
            }

            .log-line.level-warn { color: #e0b800; }
            .log-line.level-error { color: #ff5555; }
            .log-line.level-info { color: #acacac; }

            .screen::-webkit-scrollbar { width: 0; height: 0; }
            .screen .log-line { white-space: pre-wrap; word-break: break-word; }

            input {
                all: unset;
                width: 100%;
                padding: var(--padding-sm);
                box-sizing: border-box;
                border: 1px solid rgb(64, 64, 64);
                border-radius: 0px 0px var(--radius-md);
                font-size: 0.85rem; 
            }
        }
    }

    .serverControls {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: var(--gap);

        img {
            width: 2rem ;
        }

        button {
            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; }
        }

        button.serverOn { cursor: not-allowed !important; }
        button.serverOff { cursor: not-allowed !important; }
        button.serverRestart { transform: scale(.76); }
    }

    .mapCol {
        overflow: hidden;
        aspect-ratio: 16 / 9;
        width: 100%;
        box-sizing: border-box;
        flex: 1 1 0;
        img,
        iframe { 
            aspect-ratio: 16 / 9;
            height: 100%;
            top: 0px;
            left: 0px;
            position: absolute;
            cursor: pointer;
            pointer-events: all;
            opacity: .2;
            z-index: -2;
            transition: opacity var(--ease-fast);
            
            &:hover { opacity: 1; }
        }
        
        img, iframe { z-index: -1; }
    }

    .BoxContainer {
        position: relative;
        width: 100%;
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: var(--gap-sm);
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: none;

        .playerProfileContainer {
            width: 100%;
            height: 50px;
            background-color: var(--color-primary);
            display: flex;
            flex-direction: row;
            gap: var(--gap-sm);
            padding: var(--padding-sm);
            box-sizing: border-box;
            border-radius: var(--radius-md);
            border: 1px solid transparent;
            transition: border-color var(--ease-fast);
            position: relative;
            animation: appearBottom 300ms ease-out;

            &:hover { border-color: var(--color-accent); }

            img {
                aspect-ratio: 1 / 1;
                height: 100%;
                border-radius: var(--radius-sm);
            }

            .profile {
                display: flex;
                flex-direction: column;

                span { line-height: normal; }
            }

            .profileOptions {
                position: absolute;
                right: var(--padding-sm);
                top: 50%;
                transform: translateY(-50%);
                display: flex;
                flex-direction: row;

                button {
                    padding: var(--gap-sm);
                    aspect-ratio: 1 / 1;
                    width: 1rem;
                    opacity: .5;
                    transition: opacity var(--ease-fast);
                    background-color: transparent;

                    &:hover { opacity: 1;}
                }
            }
        }
    }
}

@keyframes appearBottom {
    0% { 
        opacity: 0;
        bottom: -5px;
    }
    100% { 
        opacity: 1; 
        bottom: 0px;
    }
}