* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    font-size: 10pt;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #fdfdfe;
    height: 100%;
}

body {
    width: 100%;
    display: grid;
    grid-template-columns: 75px auto 400px 400px 100px;
    grid-template-rows: 100px auto;
    grid-template-areas: "nav content content content content"
            "nav content content content content";
    grid-gap: .35em .35em;
    overflow: hidden;
}

body > nav {
    grid-area: nav;
    background-color: #121a2a;
    border-radius: 0 1em 1em 0;
    width: 100%;
    display: flex;
    flex-flow: column wrap;
    min-height: 100vh;
}

body > nav > div {
    flex-grow: 1;
    display: flex;
    flex-flow: column wrap;
}

body > nav a.lower {
    margin-top: auto;
}

body > nav #lower-nav a:last-child {
    margin-bottom: 1em;
}
body > nav a {
    text-align: center;
    display: inline-block;
    width: 50%;
    font-size: 1.5em;
    margin: 1em 25% 0 25%;
}
body > nav a, body > nav a:visited {
    color: #b6b9bd;
}

body > nav a:hover {
    color: #1eb6ac;
}
body > nav a:active, body > nav a.active {
    color: #1eaca4;
}

body > #head1 {
    display: none;
    grid-area: aside1;
}

body > #head2 {
    display: none;
    grid-area: aside2;
}

body > #head3 {
    display: none;
    grid-area: aside3;
}

body > #head4 {
    display: none;
    grid-area: aside4;
}

.content {
    min-height: 0;
    grid-area: content;
    background-color: #f0f2f5;
    border-radius: 1em;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr;
}
.content > * {
    max-height: 100vh;
}
.content > :first-child {
    height: 100%;
    border-radius: 1em;
    background-color: #e6e9ee;
    overflow: hidden;
    padding-left: 2em;
}

.content > :first-child .selectable-items {
    padding-right: 2em;
}

.selectable-items {
    display: flex;
    flex-flow: column nowrap;
    gap: .5em;
    overflow-y: auto;
    height: calc(100% - 5em);
}
div.bot-list-entry:not(.selected):hover, div.team-list-entry:not(.selected):hover {
    background-color: #f0f2f5;
}
.bot-list-entry, .team-list-entry {
    width: 100%;
    height: 5em;
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "headline info_top"
            "subline info_bottom";
    padding: .75em;
    background-color: #f7f8f9;
    border-radius: 1em;
    cursor: pointer;
}
.bot-list-entry.selected, .team-list-entry.selected {
    background-color: #121a2a;
}
.subline {
    grid-area: subline;
    align-self: center;
    font-size: .8em;
    color: #808080;
}
.selected .headline {
    color: #f7f8f9;
}
.headline {
    grid-area: headline;
    align-self: center;
    font-weight: bold;
}
.info_top {
    grid-area: info_top;
    align-self: center;
    justify-self: center;
    font-size: .75em;
    color: #808080;
}
.info_bottom {
    grid-area: info_bottom;
    align-self: center;
    height: .5em;
    width: 100%;
}
.status {
    border-radius: .25em;
}
.status.red {
    background-color: red;
}
.status.green {
    background-color: green;
}

#details {
    height: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 3.5em auto 3fr;
    grid-template-areas:
                "headline_info headline_actions"
                "info actions"
                "history actions";
    margin-left: 2em;
    margin-right: 2em;
    gap: 5px;
}

#details .bot-info {
    grid-area: headline_info;
}
#details .bot-action {
    grid-area: headline_actions;
}
#details .bot-info-box {
    grid-area: info;
}
#details .fight-history {
    grid-area: history;
}
#details .bot-action-box, #details .fight-action-box {
    grid-area: actions;
}
#details .info-box-wide {
    grid-area: info / info / info / actions;
}
#details .bot-ranking {
    grid-area: history / history / history / actions;
}

.bot-info-box, .fight-history, .info-box-wide, .bot-ranking {
    background-color: #ffffff;
    border-radius: 1em;
    padding: .5em;
    min-height: 0;
}

.bot-info-box, .info-box-wide {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
    grid-template-rows: 3em 3em auto;
    grid-template-areas:
                "headline headline headline"
                "teamInfo nationality association"
                "status status status";
}
#details article.bot-info-box > h3, .info-box-wide > h3 {
    grid-area: headline;
    margin: 0;
    padding: 0;
    align-self: center;
}
#details article.bot-info-box .team, .info-box-wide .team {
    grid-area: teamInfo;
}
span.small-headline {
    display: block;
    color: #808080;
    font-size: .8em;
    font-weight: normal;
}
#details article > div {
    font-weight: bold;
}
#details article.bot-info-box .nationality, .info-box-wide .nationality {
    grid-area: nationality;
}
#details article.bot-info-box .association, .info-box-wide .association {
    grid-area: association;
}
#details article.bot-info-box .status {
    grid-area: status;
    align-self: center;
    padding: 1.5em;
    background-color: #f0f2f5;
    border-radius: 1em;
}

.fight-entry {
    background-color: #f0f2f5;
    border-radius: 1em;
    padding: 1.5em;
    margin: 1em 0;
    font-size: .7em;
}
.fight-entry span {
    font-weight: bold;
    font-size: 1.3em;
}

.bot-action-box {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    background-color: #ffffff;
    border-radius: 1em;
    padding: .5em;
}

.fight-action-box {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    background-color: #ffffff;
    border-radius: 1em;
    padding: .5em;
    gap: .5em;
}

.pairing {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr 1fr;
    grid-template-areas: "pairing pairing"
            "botTitle teamTitle"
            "botname1 teamname1"
            "botname2 teamname2";
    background-color: #f0f2f5;
    border-radius: 1em;
    padding: .5em;
}
.pairing .title {
    grid-area: pairing;
    align-self: stretch;
    text-transform: uppercase;
    font-weight: bold;
}
.pairing .bot-title { grid-area: botTitle; }
.pairing .team-title { grid-area: teamTitle; }
.pairing .bot1-name { grid-area: botname1; }
.pairing .bot2-name { grid-area: botname2; }
.pairing .team1-name { grid-area: teamname1; }
.pairing .team2-name { grid-area: teamname2; }

button {
    margin: .25em 0;
    height: 3em;
    background-color: transparent;
    border-radius: 1em;
    border: 2px solid #1eaca4;
    color: #1eaca4;
    width: 100%;
    cursor: pointer;
}
button[disabled] {
    color: lightgray;
    background-color: #1eaca4;
    filter: saturate(20%);
    cursor: not-allowed;
}
button:not([disabled]):hover {
    background-color: #1eaca4;
    color: #ffffff;
}

a {
    color: inherit;
    text-decoration: none;
}

[fight-status="FIGHTING"] {
    animation: fighting 1200ms infinite alternate linear;
}

@keyframes fighting {
    from { background-color: #f0f2f5; }
    to { background-color: orangered; }
}

[fight-status="FINISHED"], [fight-status="NOT_COMPETED"] {
    filter: brightness(80%);
}

[fight-status="FINISHED"][match-winner="bot1"] .bot1-name,
[fight-status="FINISHED"][match-winner="bot1"] .team1-name,
[fight-status="NOT_COMPETED"][match-winner="bot1"] .bot1-name,
[fight-status="NOT_COMPETED"][match-winner="bot1"] .team1-name,
[fight-status="FINISHED"][match-winner="bot2"] .bot2-name,
[fight-status="FINISHED"][match-winner="bot2"] .team2-name,
[fight-status="NOT_COMPETED"][match-winner="bot2"] .bot2-name,
[fight-status="NOT_COMPETED"][match-winner="bot2"] .team2-name {
    color: #3ae83a;
}

[fight-status="FINISHED"][match-winner="bot1"] .bot2-name,
[fight-status="FINISHED"][match-winner="bot1"] .team2-name,
[fight-status="FINISHED"][match-winner="bot2"] .bot1-name,
[fight-status="FINISHED"][match-winner="bot2"] .team1-name {
    color: red;
}

[fight-status="FINISHED"][match-winner="draw"] .bot1-name,
[fight-status="FINISHED"][match-winner="draw"] .team1-name,
[fight-status="FINISHED"][match-winner="draw"] .bot2-name,
[fight-status="FINISHED"][match-winner="draw"] .team2-name {
    color: #E1862F;
}

.bot-ranking table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}
.bot-ranking thead tr:nth-child(1) th:nth-child(2) {
    border: 1px solid black;
}
.bot-ranking thead tr:nth-child(2) th:nth-child(1n+2) {
    border: 1px solid black;
}
.bot-ranking thead tr:nth-child(2), .bot-ranking thead tr:nth-child(3) {
    text-align: left;
}
.bot-ranking thead th:not(:nth-child(2)):not(:nth-child(3)) {
    width: 3em;
    text-align: center;
}
.bot-ranking tbody td:nth-child(1n+4) {
    text-align: center;
}
.bot-ranking tbody td {
    padding: .5em;
}
.bot-ranking tbody tr:nth-child(even) {
    background-color: #f0f2f5;
}
.bot-ranking tbody tr:hover {
    background-color: #e6e9ee;
}

#winner-fieldselection, #draw-radio-option {
    display: none;
}

#i_fight_status:has(option[value="FINISHED"]:checked) + #winner-fieldselection #draw-radio-option {
    display: initial;
}

#i_fight_status:has(option[value="FINISHED"]:checked) + #winner-fieldselection,
#i_fight_status:has(option[value="NOT_COMPETED"]:checked) + #winner-fieldselection {
    display: block;
}