/* Diese Datei wird in jeder Seite eingebunden und enthält alle CSS-Styles, die auf allen Seiten gleich sind.
Gruppe: 🦩 Funky Flamingos, Team 10
Autor: Sören Fischer */

:root {
    --background: #080715;
    --background-card: #101629;
    --primary: #213060;
    --success: #215827;
    --warning: #b95151;
    --text-primary: #bec3d6;
    --text-secondary: #767986;
    /* --text-secondary: #6e6e6e; */
    --text-warning: #d6bebe;
    --text-success: #bed6c3;
    --max-width: 500px
}

::-webkit-scrollbar {
    height: 5px;
    width: 5px
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    border-radius: 5px
}

html {
    background-color: var(--background);
    color: var(--text-primary);
    display: flex;
    flex-direction: row;
    font-family: Ubuntu, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    justify-content: center;
    line-height: 14px;
    overscroll-behavior-y: contain;
    padding: 0;
}

body {
    align-items: center;
    margin: 0;
    max-width: var(--max-width);
    min-height: 100svh;
    position: relative;
    overscroll-behavior-y: contain;
    width: 95%;
}

main {
    margin-top: 70px;
    margin-bottom: 70px
}

p {
    margin: 0;
    opacity: 70%
}

a {
    color: var(--text-primary);
    text-decoration: none
}

label {
    text-align: start;
    font-size: var(--font-size-medium);
    margin-left: 3px;
}

input,
button {
    width: 100%;
    border-radius: 10px;
    padding: 15px 20px 15px 20px;
    outline: none;
    box-sizing: border-box;
    border: none;
    caret-color: var(--text-primary);
    color: var(--text-primary);
    border: 1px solid transparent;
    background-color: var(--background-card);
}

button {
    background-color: var(--primary);
}

input:focus {
    border: 1px solid var(--primary);
}

input::placeholder {
    color: var(--text-secondary);
}

input:disabled,
button:disabled {
    opacity: 50%;
    cursor: not-allowed;
}

summary {
    padding: 20px 0;
    cursor: pointer;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px;
}

.error-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 5px;
    border-radius: 10px;
    border: 1px solid var(--warning);
    padding: 10px;
}

.error {
    color: var(--text-warning);
}

.valid,
.valid:focus {
    border: solid 1px var(--success);
}


.invalid,
.invalid:focus {
    border: solid 1px var(--warning);
}

.checks-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-radius: 0 0 10px 10px;
    border: 1px solid var(--primary);
    padding: 10px;
    border-top: none
}

.check-wrapper {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.check-icon {
    width: 16px;
}

.icon-valid {
    fill: var(--success);
}

.icon-invalid {
    fill: var(--warning);
}

.hidden {
    display: none !important;
}

.add-user-wrapper {
    display: flex;
    gap: 20px;
    width: 100%;
    border-radius: 10px;
    padding: 15px 20px 15px 20px;
    outline: none;
    box-sizing: border-box;
    border: none;
    caret-color: var(--text-primary);
    color: var(--text-primary);
    border: 1px solid transparent;
    background-color: var(--background-card);
    flex-wrap: wrap;
}

.add-user-input {
    /* remove all styles */
    border: none;
    width: 50%;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}

.add-user-input:focus {
    /* remove all styles */
    border: none;
}

.add-user-users-wrapper {
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
}

.add-user-user {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    padding: 5px;
    border-radius: 5px;
    background-color: var(--background);
}

.add-user-user-remove {
    fill: var(--text-secondary);
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.add-user-user-username {
    color: var(--text-secondary);
}

#user-search-suggestions {
    position: absolute;
    width: 100%;
    background-color: var(--background-card);
    border-radius: 10px;
    z-index: 100;
    max-height: 180px;
    overflow-y: scroll;
    padding: 10px;
    box-sizing: border-box;
    flex-direction: column;
    gap: 20px;
    margin-top: 5px;
    pointer-events: all;
}

.user-search-user {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 5px;
    cursor: pointer;
}

.user-search-user-username {
    color: var(--text-secondary);
}

.film-list-item {
    display: flex;
    flex-direction: row;
    gap: 10px;
    border-radius: 10px;
    cursor: pointer;
}

.add-button {
    width: 70px;
    font-size: 2em;
    background-color: var(--background-card);
}