body, html {
    height: 100vh;
    overflow: hidden;
}

header {
    background: var(--color-layer);
    width: 100%;
    z-index: 10;

    &.collapsed #headerContent { display: none; }
}

.button-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-element);
    padding: var(--space-element);
}

.drop-zone {
    display: flex;
    flex-wrap: wrap;
    min-height: 80px;
    background: var(--color-layer);
}

#pool {
    border: var(--border-width) solid var(--color-border);
}

#tier-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 40px); /* fallback height */
}

/* Make table take remaining space */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tier-row {
    display: flex;
    flex: 1;
    border-bottom: var(--border-width) solid var(--color-border);

    .drop-zone {
        flex: 1;
        overflow-y: auto;
    }
}

.label {
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #000;
}

.s { background: #ff7f7f; }
.a { background: #ffbf7f; }
.b { background: #ffff7f; }
.c { background: #7fff7f; }
.d { background: #7fbfff; }

.draggable-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    cursor: move;
    touch-action: none; /* Required for DragDropTouch polyfill */
}

.material-icons { font-size: 18px; }