/* Event Editor */
.data-card {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 5px;
    max-width: 100%;
}
.data-card p {
    word-break: break-all;
}
.data-card-grid .data-card {
    padding: .3em .5em;
    aspect-ratio: 1;
    flex-direction: column;
}
.data-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1rem;
    row-gap: 1rem;
}
.data-card-row .data-card {
    padding: 10px .5em;
}
.data-card-row {
    display: grid;
    grid-template-columns: 1;
    row-gap: 1rem;
}
.partiicipants-table {
    background-color: var(--background-cshift);
    border-radius: 5px;
    border-collapse: collapse;
}
.partiicipants-table td {
    text-align: center;
    padding: 8px 0;
}
.partiicipants-table td:first-child {
    text-align: left;
    padding-left: 10px;
}
.partiicipants-table th {
    padding: 5px 0;
    color: var(--primary);
    border-bottom: 5px solid var(--primary);
}
.partiicipants-table .groupBorder td {
    border-top: 5px solid var(--primary);
}
#event-code {
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 5vh;
}
#event-code #event-code-span {
    padding: .7em 1em !important;
    border-radius: 10px;
    background-color: var(--background-cshift);
    transition: var(--transition-speed);
    font-weight: bold;
    cursor: pointer;
    background: var(--gradient-bg-2);
}
#event-code #event-code-span:hover {
    filter: brightness(.9);
}
#event-code #event-code-span:active {
    filter: brightness(.8);
    transform: scale(.8);
}
.eventpage-addition-form-frame {
    background: var(--gradient-bg);
    border-radius: 10px;
    position: relative;
}
.eventpage-addition-form {
    background-color: transparent;
    padding: 2em !important;
    position: sticky;
    top: 5vh;
}
.event-data-modifier-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    margin-bottom: 5vh;
    container-type: inline-size;
}
/* Home page */
#balance-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--low);
    width: 85vw;
    margin: 0 auto;
    border-radius: 10px;
}
#balance-section h2 {
    font-size: 1.2em;
    color: var(--low-contrast-dark);
}
#balance-section p {
    font-weight: 800;
    font-size: 1.8em;
    margin: 1rem 0;
}
.station-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.station-buttons .station-qr-code-button {
    background-color: var(--background-cshift);
    color: var(--low-contrast-dark);
    aspect-ratio: 2/1;
}
#qr-code-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2em;
}
#qr-code-frame #qr-code {
    display: flex;
    justify-content: center;
    width: 30vw;
}
#bet-placer {
    padding: 5vh 0 !important;
}
#bet-placer input {
    font-size: 1.7em;
    text-align: center;
    border: none;
}
/* Dashboard */
.dashboard-section {
    margin-bottom: 5vh;
}
.dashboard-section h2 {
    text-align: center;
}
.dashboard-section #participant-ranking {
    display: flex;
    justify-content: center;
}
.dashboard-section .group-title {
    font-weight: 500;
    margin-top: 1vh;
    display: grid;
    grid-template-columns: 1fr 5fr 3fr;
}
.dashboard-section .group-title p {
    display: inline;
    margin: 0;
}
.dashboard-section .group-title .group-balance {
    text-align: left;
    margin-left: 15px;
}
.dashboard-section .group-members {
    display: flex;
    justify-content: center;
}
.dashboard-section .table-frame {
    margin-top: 2vh;
    overflow: hidden;
    padding: 2vh;
    width: 100%;
    box-sizing: border-box;
}
.dashboard-section table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
}
.dashboard-section table tr:has(th) {
    background: var(--table-th-bg);
}
.dashboard-section table td {
    text-align: center;
}
.dashboard-section table tr:nth-child(even) {
    background: var(--table-td-bg);
}
/* Stations */
#active-games {
    display: grid;
    grid-template-rows: 1;
    row-gap: 1em;
}
#active-games .gamers-heading {
    display: flex;
    justify-content: space-between;
    background-color: var(--background-cshift);
    padding: 0 1em;
    font-weight: 600;
}
#active-games .action-buttons {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    align-items: center;
}
#active-games .bet-form {
    display: flex;
    justify-content: space-between;
    background-color: var(--background-cshift);
    padding: 0 1em;
    font-weight: 600;
}
#active-games .bet-form input {
    background-color: transparent;
    outline: none;
    border: none;
    font-size: 1.2em;
    width: 5em;
}
#qr-reader {
    width: 400px;
    max-width: 90%;
    height: auto;
    position: fixed !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
#scan-btn {
    display: block;
    margin: 5vh auto;
    aspect-ratio: 1;
}
.bet-popup-values {
    font-weight: 900;
}
/* All Participants QR Code Page */
#qr-list {
    margin: 0 5vw;
}
.qr-item {
    text-align: center;
    page-break-inside: avoid;
}
.qr-item canvas {
    width: 100%;
    max-width: 150px;
}
.codes-inner-container {
    background-color: var(--background-cshift);
    margin-bottom: 2rem;
    padding: 1em;
}
.group-title {
    grid-column: 1 / -1;
    font-weight: bold;
    margin-top: 30px;
    text-align: center;
    color: var(--primary);
    font-size: 1.5em;
}
.qr-code-wrapper {
    background-color: white;
    text-align: center;
    page-break-inside: avoid;
    border: 1px solid var(--background-cshift);
}
@media screen and (max-width: 800px) {
    .station-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
    #active-games .gamers-heading {
        display: flex;
        justify-content: space-between;
        background-color: var(--background-cshift);
        padding: 0 1em;
        font-weight: 600;
        font-size: .8em;
    }
    .event-data-modifier-section {
        column-gap: 1vw;
    }
}
@media screen and (max-width: 600px) {
    .event-data-modifier-section {
        grid-template-columns: repeat(1, 1fr);
    }
    .data-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media screen and (max-width: 500px) {
    .station-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
    #active-games .gamers-heading {
        display: flex;
        justify-content: space-between;
        background-color: var(--background-cshift);
        padding: 0 1em;
        font-weight: 600;
        font-size: .8em;
    }
}
@container (max-width: 1000px) {
    .data-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@container (max-width: 800px) {
    .data-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}