* {
    box-sizing: border-box;
}

:root {
    --brandprimary: rgb(187, 82, 239);
    --brandprimarylight: rgb(214, 160, 240);
    --brandprimarydark: rgb(83, 38, 106);
    --brandsecondary: rgb(234, 92, 147);
    --notification: green;
    --warning: yellow;
    --alert: red;
    --black: rgb(61, 61, 59);
    --white: rgb(246, 245, 207);
    --lightgrey: lightgrey;
    --grey: grey;
    --transparentgrey: #99999933;
}

main {
    min-height: 70vh;
}

body {
    color: var(--black);
}

/* LISTS */

#analysis-calendar ul.wrapped-rows>li {
    width: 200px;
    min-height: 200px;
    border: 1px solid black;
    padding: 0.2em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#analysis-calendar ul.wrapped-rows .title {
    width: 100%;
    font-style: italic;
}

.tag-songs:hover {
    cursor: pointer;
}

#analysis-calendar ul.wrapped-rows .event-wrap {
    margin-left: 1.3em;
}

#analysis-calendar ul.wrapped-rows h3 {
    width: 100%;
    text-align: center;
}

ul.inline li {
    display: inline;
    margin-left: 0.5em;
}

ul.inline li:after {
    content: ", ";
}

ul.inline li:last-of-type:after {
    content: ";";
}


.flexrow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 1em;
}

.card {
    border: 1px solid var(--grey);
    border-radius: 10px;
    padding: 1em;
}


ul.cards,
ul {
    list-style: none;
    padding-left: 0;
}


ul.cards li {
    background-color: var(--brandsecondary);
    border-radius: 5px;
    padding: 0 1em 0.5em 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 350px;
}

ul.cards li p {
    margin: 0.3em 1em 1em;
}

ul.cards li h3 {
    margin-bottom: 0;
}

ul.cards li img {
    width: 150px;
    max-width: 150px;
    height: auto;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

body>header {
    display: flex;
    flex-direction: column;
    background: var(--brandprimarylight);
    color: var(--black);
    padding: 1em 0.5em 0;
}

body>footer {
    padding: 1em;
    background: var(--brandprimarylight);
    color: var(--black);
    text-align: center;
    margin-top: 1em;
}

.topbar {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

body>header a {
    color: grey;
}

body>header nav ul {
    list-style: none;
    display: flex;
    gap: 0.5em;
    justify-content: center;
}

body>header nav li {
    padding: 0.4em;
    border: 1px solid grey;
}

/*
 * EVENTS
*/

form#songs tr:has(input:checked) {
    background: var(--grey);
}

ul.eventlist li {
    display: flex;
    justify-content: flex-start;
}

ul.eventlist .personelle .label {
    font-variant: small-caps;
    color: var(--grey);
}

ul.eventlist .card {
    padding: 0.2em 0.5em 0.5em;
    margin: 0.5em;
}

.eventlist li .date {
    width: fit-content;
    font-size: larger;
}

ul.eventlist .card h2 {
    margin: 0;
    padding: 0;
    color: var(--brandprimarydark);
    display: flex;
    justify-content: space-between;
}

ul.eventlist .card h2 a {
    text-decoration: none;
}

ul.eventlist .card p.personelle {
    margin: 0;
}

.eventsongs li {
    display: flex;
    gap: 0.4em;
}

.eventsongs li span {
    color: var(--grey);
}

.eventsongs li span.songnum {
    display: inline-block;
    text-align: right;
    width: 3em;
}

form#newsong {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

ul.tags {
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
    min-width: 120px;
}

ul.tags li {
    border: 1px dotted var(--brandprimarylight);
    background-color: var(--transparentgrey);
    padding: 0.2em;
    position: relative;
}

ul.tags li .delete {
    position: absolute;
    top: 0;
    right: 0;
    font-size: small;
    line-height: 0.5;
    cursor: pointer;
}

.delete {
    color: var(--grey);
}

/*
Index
*/
.index.flexrow div {
    flex: 1;
}

.index.flexrow img {
    width: 400px;
    max-width: 90vw;
    height: auto;
    border-radius: 10px;
}

/*
HEADINGS
*/
main>h1,
main>h2,
main>h3,
main>h4 {
    width: 100%;
    text-align: center;
}


/*
BUTTONS
*/
button {
    padding: 0.5em;
    border: none;
    border-radius: 2px;
    background-color: var(--brandprimarylight);
}

/*
Dashboard
*/
ul.subscription_list,
ul.class_list {
    list-style: none;
    padding-left: 0;
}

ul.subscription_list li,
ul.class_list li {
    display: flex;
    flex-direction: row;
    padding: 1em;
    border: 1px solid var(--lightgrey);
    border-radius: 5px;
}

ul.subscription_list li p span {
    color: var(--grey)
}

.subscriptionitem {
    background: var(--transparentgrey);
    color: var(--grey);
    padding: 1em;
}

.subscriptionitem.active {
    background: none;
    color: var(--black);
}

/*
ADMIN
*/
ul#library_content {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
    align-items: flex-start;
    gap: 0.5em;
}

ul#library_content li .libraryitem,
li .libraryitem {
    padding: 0 1em;
    border: 1px solid var(--grey);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 450px;
}

ul#library_content li .libraryitem figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--lightgrey);
    border-radius: 5px;
}

ul#library_content li .libraryitem figure figcaption {
    background-color: var(--lightgrey);
    width: 100%;
    padding: 0.5em 2em;
}

/* TABLES */

table td {
    padding: 0.5em;
    border: 1px dotted lightgrey;
}

/*
    FLEX BOXES/GRIDS
*/
.wrapped-rows {
    display: flex;
    flex-wrap: wrap;
}

/*
 *
 FORMS
*/

input[type=number] {
    width: 4.5em;
}

tr.reverse_labels td label {
    display: inline-flex;
    flex-direction: column-reverse;
    align-items: end;
}

form#event fieldset {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1em;
}

form#event fieldset label,
form#editsongform fieldset label {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    margin: 0.5em 0;
    width: fit-content;
}

form#event fieldset>div {
    gap: 1em;
}

form#libraryadmin fieldset {
    width: fit-content;
}

form#libraryadmin label {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 0.5em;
    color: var(--brandprimary);
}

/*
EVENTS
*/
ul.songlist {
    list-style: none;
    padding-left: 0;
}

ul.songlist li {
    display: flex;
    gap: 1em;
    margin: 0.5em 0;
}

/*
 NOTIFICATIONS
*/

div.notifications {
    border: 1px solid var(--notification);
    border-radius: 5px;
    padding: 1em;
}

div.notifications.hidden {
    border: none;
}

/*
DIALOG
*/

dialog#simpleconfirmdlg {
    min-width: 400px;
}

dialog#simpleconfirmdlg header {
    display: flex;
    justify-content: space-between;
}

dialog#simpleconfirmdlg footer,
.dlg_header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

#dlg_header {
    border-bottom: 1px solid var(--grey);
}

#dlg_footer {
    border-top: 1px solid var(--grey);
}

dialog#main h2 {
    display: flex;
    flex-direction: column;
}

dialog#main h2 span {
    color: var(--grey);
    font-size: smaller;
}

img {
    max-width: 100%;
    height: auto;
}

@media screen and (min-width: 1024px) {
    p {
        font-size: 1.2em;
    }

    .flexrow.split>div {
        max-width: 50%;
    }

}