/*-- ================================================ --->
<---                 WINDOW FORMATTING                --->
<--- ================================================ --*/
/*#region WINDOWS */
#options-window {
    margin: 0.5% 1%;
    min-width: 98%;
    min-height: 75px;
}

#music-window {
    margin: 0.5% 1%;
    min-width: 98%;
    height: 75vh;
}

#music-scroll-and-content {
    width: 100%;
    height: calc(100% - 2rem);
}
#music-scroll-container {
    overflow-x: scroll;
    overflow-y: scroll;
    width: 100%;
}
#music-scroll-container::-webkit-scrollbar {
    display: none;
}

#sheet-overlay .horizontal-group {
    gap: 1%;
    margin: 0.5% 1%;
}
/*#endregion WINDOWS */


/*-- ================================================ --->
<---                     OPTIONS                      --->
<--- ================================================ --*/
/*#region OPTIONS */
#options-container {
    width: 100%;
    height: 40px;

    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

/* List selector */
#list-selector {
    display: flex;
    justify-content: flex-start;
}
.list-button {
    height: 22px;
    text-align: center;
}

/* Year selector */
#year-selector {
    display: flex;
    justify-content: flex-start;
}
.year-button {
    height: 22px;
    text-align: center;
}
#year-display-decrease {
    margin: auto 0;
    margin-right: 5px;
}
#year-display-increase {
    margin: auto 0;
    margin-left: 5px;
}

/* Search */
#searchbox {
    border-top: 3px solid #404040;
    border-left: 3px solid #404040;
    border-right: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
}
.highlight {
    background-color: lime;
}
#search-grid {
    margin-bottom: 50px;
}

/* Spotify playlist */
#short-playlist {
    display: none;
}

/* General buttons */
#options-container button {
    background-color: silver;
    border: outset;

    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
}
#options-container button:disabled
{
    text-decoration: line-through
}
#options-container button:active,
#options-container button:disabled,
#options-container .active {
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}
/*#endregion OPTIONS */


/*-- ================================================ --->
<---                    ALBUM GRID                    --->
<--- ================================================ --*/
/*#region ALBUM_GRID */
.album-grid {
    margin: 15px 0;
    padding: 0 15px;

    width: 100%;

    align-items: center;
    justify-content: center;

    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
}
#favorites-grid {
    gap: 5px;
}
.album-block {
    vertical-align: top;
    width: calc(20% - 30px);
    min-width: 190px;

    padding: 10px 5px;
    box-sizing: border-box;
    border: outset;
}
.small-album-block {
    vertical-align: top;
    width: calc(10% - 30px);
    min-width: 165px;

    text-align: center;
    font-size: 10pt;

    padding: 10px 5px;
    box-sizing: border-box;
    border: outset;
}

.album-img {
    display: flex;
    margin: auto;
}
.album-name, .album-artist, .album-genre, .album-year {
    text-align: center;
}

.gold, .gold .album-img {
    background: #ffbf00;
    border-color: #ffca2b;
}
.silver, .silver .album-img {
    background: silver;
    border-color: rgb(202, 202, 202);
}
.bronze, .bronze .album-img {
    background: #cd7f32;
    border-color: #d18f4d;
}
/*#endregion ALBUM_GRID */


/*-- ================================================ --->
<---                    SONG TABLE                    --->
<--- ================================================ --*/
/*#region SONG_TABLE */
.song-table {
    padding: 0 15px;
    margin: 15px auto;
    width: 60%;

    border-collapse: collapse;
    border: outset;
}
.song-table th, .song-table td {
    /* border: 1px solid black; */
    /* padding: 8px; */
    padding: 3px 3px;
    border-bottom: 1px solid silver;
    text-align: left;
}

.song-table th {
    border: outset;
    background-color: silver;
    border-top: none;
}
.song-table th .song-name {
    border-left: none;
}
.song-table th .song-genre {
    border-left: none;
}

.song-table td {
    background-color: #fcfcfc;
}
/*#endregion SONG_TABLE */


/*-- ================================================ --->
<---                  PLAYLIST WINDOW                 --->
<--- ================================================ --*/
/*#region PLAYLISTS */
#playlists-window {
    min-width: 47%;
    height: fit-content;
}
#playlists-blocks {
    margin: 15px auto;
    width: 100%;
    max-width: calc(150px*5 + 10px*4);
    min-width: 150px;

    align-items: center;
    justify-content: center;

    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
}
.playlist-block {
    vertical-align: top;
    width: 150px;
    height: 100px;
    width: 115px;

    text-align: center;

    padding: 10px;
    box-sizing: border-box;
    border: outset;
    margin-bottom: 10px;
}
.playlist {
    margin-top: 5px;
}
/*#endregion PLAYLISTS */


/*-- ================================================ --->
<---                  CONTENT WINDOWS                 --->
<--- ================================================ --*/
/*#region CONTENT_WINDOWS */
#guide-window {
    min-width: 47%;
    height: fit-content;
}

#favorites-window {
    margin: 0.5% 1%;
    min-width: 98%;
    height: fit-content;
}
/*#endregion CONTENT_WINDOWS */


/*-- ================================================ --->
<---           MEDIA QUERIES / RESPONSIVENES          --->
<--- ================================================ --*/
/*#region MEDIA */
/* Responsiveness */
@media (max-width: 1150px) {
    #long-playlist {
        display: none;
    }
    #short-playlist {
        display: inline-block;
    }
}
@media (max-width: 980px) {
    #short-playlist {
        display: none;
    }
}
@media (max-width: 850px) {
    #options-container {
        align-items: center;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
    }
    .break {
        width: 100%
    }
    #year-selector {
        margin: 4px 0;
        margin-right: 3%;
    }
    #list-selector {
        margin: 4px 0;
        margin-left: 3%;
    }
    #playlist-display {
        margin-right: 3%;
    }
    #music-search {
        margin-left: 3%;
    }
    #short-playlist {
        display: inline-block;
    }
    #options-window {
        height: 95px;
    }

    #year-display-decrease,
    #year-display-increase {
        margin: auto 0;
    }
    .album-grid {
        padding: 0 5px;
        gap: 5px;
    }
}


@media (max-width: 650px) {
    #sheet-overlay .horizontal-group {
        display: block;
    }
}
@media (max-width: 550px) {
    .song-album {
        display: none;
    }

    .album-block {
        vertical-align: top;
        width: calc(10% - 30px);
        min-width: 165px;

        text-align: center;
        font-size: 10pt;

        padding: 10px 5px;
        box-sizing: border-box;
        border: outset;
    }
    .album-img {
        width: 100px;
        height: 100px;
    }
}
@media (max-width: 545px) {
    #options-window,
    #music-window,
    #playlists-window,
    #guide-window,
    #favorites-window {
        margin-left: -2%;
    }
    #sheet-overlay .horizontal-group {
        gap: 0%;
        margin: 0.5% 0;
    }
}
@media (max-width: 500px) {
    #options-window {
        height: 110px;
    }
}
@media (max-width: 450px) {
    #options-window {
        height: 138px;
    }
}
@media (max-width: 400px) {
    .song-genre {
        display: none;
    }
}
/*#endregion MEDIA */