/* Sprites */

.sprite {
    display: inline-block;
    width: clamp(70px, 12cqi, 140px);
    height: clamp(70px, 12cqi, 140px);
    background-size: 555% 300%;
    background-repeat: no-repeat;
    transition: all .5s ease;
    z-index: 1;
}

.business-sprite { background-image: url(/sprite_sheet_business.png); }
.generic-sprite  { background-image: url(/sprite_sheet_generic.png); }
.item-sprite     { background-image: url(/sprite_sheet_items.png); background-size: 330% 175%; }

#alice              { background-position: 26.5% 0%; }
#bob                { background-position: 50.5% 0%; }
#charlie            { background-position: 74% 0%; }
#david              { background-position: 3% 0%; }
#estelle            { background-position: 50% 0%; }
#bauteile-gmbh      { background-position: 97% 0%; }
#global-solutions-ltd { background-position: 27% 53%; }
#omas-backstube     { background-position: 73.5% 97%; }
#organic-zutaten-ag { background-position: 50% 53%; }
.money-sprite       { background-position: 3% 100%; }
.bill-sprite        { background-position: 50% 70%; }
.product-sprite     { background-position: 85% 70%; }

/* Item template overlay */

.item       { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; place-items: center; }
.item *     { grid-area: 1 / 1; }
.item *:first-child { z-index: 1; }
.item *:last-child  { z-index: 2; }

/* Layout */

.app-body {
    min-height: 100vh;
}

.main-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.actors-box {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.actors-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-content: space-evenly;
    justify-items: center;
    gap: 1rem;
    container-type: inline-size;
}

@media (max-width: 600px) {
    .actors-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 380px) {
    .actors-grid { grid-template-columns: 1fr; }
}

.ledger-box {
    max-height: 35vh;
    overflow-y: auto;
}

/* Toasts */

#toast, #error-toast {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 200;
    max-width: 28em;
    transition: opacity 0.4s ease;
}

#error-toast {
    top: 5rem;
}