/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
  with slight edits made by Me!
*/
*, *::before, *::after {
    box-sizing: border-box;
}
:root {
  font-family: system-ui, Helvetica, Arial, sans-serif;
}
*:not(dialog) {
    margin: 0;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-block-size: 100svh;
}
img {
    max-width: 100%;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    vertical-align: middle;
    shape-margin: 1rem;

}
input, button, textarea, select {
    font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
p {
    text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}
ul, li {
    padding: 0;
    margin: 0;
}
li {
    list-style: none;
}
:root {
    --cool-grey: rgb(219, 228, 240);
    --alt-grey: rgb(245, 246, 255);
    --border-grey: rgb(157, 166, 175);
    --dark-grey: rgb(193, 202, 212);
    --white: rgb(255, 255, 255);
    --green-border: green;
    --green: rgb(166, 255, 166);
    --light-green: rgb(230, 255, 216);
    --red-border: rgb(209, 23, 23);
    --red: rgb(255, 155, 155);
    --light-red: rgb(255, 216, 216);
    --highlight: rgb(179, 212, 255);
    --dark-highlight: rgb(39, 139, 197);
    --secondary: rgb(255, 163, 209);
    --dark-secondary: rgb(158, 51, 126);
}
.wrapper {
    margin-inline: auto;
    display: grid;
    min-block-size: 100svh;
    max-width: 1700px;
    grid-template-columns: repeat(3, 1fr) minmax(280px, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "header header header header"
        "main main main sidebar"
        "main main main sidebar"
        "main main main sidebar"
        "footer footer footer footer";
    gap: 1rem 0rem;
}
.wrapper.edit, .wrapper.new, .wrapper.new-console, .wrapper.new-studio {
    grid-template-areas: 
        "header header header header"
        "main main main main"
        "main main main main"
        "main main main main"
        "footer footer footer footer";
}
.wrapper.delete {
    grid-template-areas: 
        "header header header header"
        "main main main sidebar"
        "main main main sidebar"
        "main main main sidebar"
        "footer footer footer footer";
}
.error {
    background: var(--red);
    border: solid 2px var(--red-border);
    padding: 0.25rem;
    border-radius: 8px;
    font-weight: 600;
}
header {
    grid-area: header;
    padding: 1rem;
    align-self: center;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}
main {
    position: relative;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
    grid-area: main;
    background-color: var(--cool-grey);
    border-bottom: solid 2px var(--border-grey);
}
main.edit, main.new, main.new-console, main.new-studio {
    border-radius: 14px;
    background: var(--cool-grey);
    justify-items: center;
    align-content: center;
}
main.delete {
    padding: 0.5rem;
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.item-area {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
section {
    min-width: 500px;
    padding: 1rem;
    border: solid 2px var(--border-grey);
    background: var(--white);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    > h3 {
        background: var(--secondary);
        padding: 0.25rem;
        text-align: center;
        border-radius: 8px;
        border-bottom: solid 2px var(--dark-secondary);
    }
    > ul {
        display: flex;
        flex-direction: column;
    }
    > ul > li {
        display: flex;
        padding: 0.1rem;
        justify-content: space-between;
    }
    > ul > li > form {
        display: inline;
    }
}
li.dark {
    background: var(--cool-grey);
}
li.light {
    background: var(--alt-grey);
}

.warning {
    padding: 1rem;
    border: solid 2px var(--red-border);
    border-radius: 14px;
    background: var(--red);
}
.return {
    padding: 1rem;
    border-bottom: solid 2px var(--border-grey);
    border-radius: 14px;
    background: var(--white);
    > .button {
        padding: 0.5rem;
    }

}
h2 {
    font-size: 20px;
}
.inventory-header {
    display: grid;
    place-items: center;
    border-top-left-radius: 14px;
    background: var(--highlight);
}
.item-header {
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: 20px;
    background: var(--cool-grey);
    border-top: 2px solid var(--border-grey);
    padding: 0.5rem;
    > :nth-child(1) {
        grid-column: 1 / span 3;
    }
    > :nth-child(2) {
        grid-column: 5 / 7;
    }
    > :nth-child(3) {
        grid-column: 7 / 8;
    }
    > :nth-child(4) {
        grid-column: 8 / 10;
    }
}
.games-list {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    justify-self: stretch;
    overflow-y: auto;
    max-height: 71.5vh;
}
.gameContainer {
    padding: 1rem 3rem;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    /* max-width: 75vw; */
    gap: 0.5rem;
    align-items: stretch;
    background-color: var(--white);
    border: 2px solid var(--border-grey);
    border-radius: 14px;
}
.game-info {
    place-self: start;
    grid-column: 1 / 4;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.game-desc {
    color: rgb(109, 109, 109);
}
.available, .not-available, .game-id, .game-price, .edit-button {
    place-self: center;
}
.available {
    background: var(--green);
    border: var(--green-border) solid 2px;
    > p {
        background: var(--light-green);
    }
}
.not-available {
    background: var(--red);
    border: var(--red-border) solid 2px;
    > p {
        background: var(--light-red);
    }
}
.available, .not-available {
    grid-column: 5 / 7;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 14px;
    min-height: 5rem;
    width: 6rem;
    gap: 1rem;
    text-align: center;
    flex-shrink: 0;
    > h4 {
        margin-top: 1rem;
    }
    > p {
        font-size: 14px;
    }
}
.game-id {
    grid-column: 7 / 9;
}
.game-price {
    grid-column: 9 / 10;
}
.edit-button {
    grid-column: 11;
}
.sidebar {
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
    grid-area: sidebar;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--cool-grey);
    border-left: 2px solid var(--border-grey);
    border-bottom: solid 2px var(--border-grey);
}
.filter-area > form, .add-area > ul, .filter-area > a {
    padding: 0.5rem;
    border-radius: 14px;
    border: solid var(--border-grey) 2px;
    background: var(--alt-grey);
}
.filter-area > form, .add-area > ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.filter-area > a, .add-area > a {
    text-align: center;
}
.filter-area, .add-area {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.filter-area > h2, .add-area > h2 {
    background-color: var(--highlight);
    padding: 0.25rem;
    border-radius: 8px;
    border-bottom: 2px var(--dark-highlight) solid;
    text-align: center;
}
.form-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.form-row > label {
    font-weight: 600;
    padding: 0.25rem;
    border-radius: 8px;
    background: var(--secondary);
    border-bottom: solid 2px var(--dark-secondary);
    text-align: center;
}
.submit-area {
    padding: 0rem 0.5rem;
    display: flex;
    justify-content: space-between;

    & > button {
        height: 2rem;
    }
}
.edit-form, .new-form, .new-console-form, .new-studio-form {
    padding: 1rem;
    border-radius: 14px;
    border: solid var(--border-grey) 2px;
    background: var(--alt-grey);
    display: grid;
    gap: 1rem;
    > button {
        background: var(--highlight);
        border-radius: 8px;
        font-weight: 600;
        height: 2.25rem;
        text-decoration: none;
        color: black;
        border: none;
        border-bottom: 2px solid var(--dark-highlight);
    }
}
.edit.form-row, .new.form-row, .new-studio.form-row, .new-console.form-row {
        display: grid;
        grid-template-columns: repeat(2, 250px);
        gap: 1rem;
}
.console-area {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    > select {
        height: 1.80rem;
    }
}
a.button {
    background: var(--highlight);
    border-radius: 8px;
    font-weight: 600;
    height: 2.25rem;
    text-decoration: none;
    color: black;
    text-align: center;
    align-content: center;
    border: none;
    border-bottom: 2px solid var(--dark-highlight);
}
footer {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    padding: 1rem;
    place-items: center;
    grid-area: footer;
    display: flex;
    flex-direction: column;
    > ul {
        display: flex;
        gap: 1rem;
    }
}

footer, header {
    background-color: var(--dark-grey);
}

fieldset {
    display: grid;
    gap: 1rem;
    border: 2px solid var(--border-grey);
    border-radius: 14px;
}

@media (max-width: 850px) {
    .wrapper {
        display: flex;
        max-width: 100vw;
        min-height: 100vh;
        flex-direction: column;
        align-items: stretch;
        justify-content: stretch;
        justify-items: stretch;
        
    }
    .wrapper.edit, .wrapper.new, .wrapper.new-console, .wrapper.new-studio {
        display: grid;
        max-width: 100vw;
        flex-direction: column;
    }
    section {
        min-width: 70vw;
    }
    header {
        min-width: 100vw;
    }
    main {
        padding: 1rem;
        border-top-right-radius: 14px;
        border-bottom-right-radius: 14px;
    }
    .inventory-header {
        border-top-right-radius: 14px;
    }
    .sidebar {
        border-bottom-left-radius: 14px;
        border-top-left-radius: 14px;
    }
    .edit.form-row, .new.form-row, .new-studio.form-row, .new-console.form-row {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
}

@media (max-width: 500px) {
    .gameContainer {
        display: grid;
        align-content: space-around;
        
        > * {
            grid-row: 2;
        }
    }
    .game-info {
        flex-direction: row;
        grid-column: 1/ -1;
        grid-row: 1;
    }
    
}