@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200&display=swap");

:root {
    --gray: #858585;
    --light-gray: #b3b3b3;
    --orange: #ff8a00;
    --dark: #202124;
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),
        0 2px 4px -2px rgb(0 0 0 / 0.1);
}

* {
    font-family: "Inter", sans-serif;
    margin: 0;
    padding: 0;
}

.autor,
autor {
    position: sticky;
    top: 0;
    z-index: 10;

    display: grid;
    grid-template-areas: "student zadanie";

    background-color: #202124;
    color: gray;
    padding: 0.75rem 1rem;
    /* width: 100vw; */
    margin-bottom: 3rem;
}

.autor > .student,
autor > student {
    grid-area: student;
    display: flex;
    gap: 0.25rem;
}
.autor > .zadanie,
autor > zadanie {
    grid-area: zadanie;
    justify-self: end;
    display: flex;
    gap: 0.25rem;
    align-items: center;
}
.zadanie > .temat::after,
zadanie > temat::after {
    content: " /";
}

.student > .nazwisko::after,
student > nazwisko::after {
    content: ",";
}

body,
plytoteka {
    background-color: #f5f5f5;
    margin-bottom: 2rem;
}

body .klient,
plytoteka klient {
    margin-bottom: 0.75rem;
}

body > .klienci::before,
plytoteka > klienci::before {
    content: "Klienci";
}
body > .albumy::before,
plytoteka > albumy::before {
    content: "Albumy";
}
body > .gatunki::before,
plytoteka > gatunki::before {
    content: "Gatunki";
    grid-column-start: 1;
    grid-column-end: 4;
}

body > .stats::before,
body > .gatunki::before,
plytoteka > gatunki::before,
body > .klienci::before,
plytoteka > klienci::before,
body > .albumy::before,
plytoteka > albumy::before {
    text-align: center;
    border-radius: 4px;
    padding: 0.5rem;
    background-color: var(--dark);
    color: #fff;
    display: block;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-md);
}

.stats .gatunki .zliczenia,
body > .gatunki,
plytoteka > gatunki {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 3rem;
}

.gatunki .gatunek::before,
gatunki gatunek::before {
    content: attr(nazwa);
}

.gatunki .gatunek,
gatunki gatunek {
    background-color: #fff;
    border-radius: 4px;
    padding: 1rem;
    content: attr(nazwa);
    box-shadow: var(--shadow-md);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

body > .albumy,
plytoteka > albumy {
    display: flex;
    flex-direction: column;
    margin-bottom: 4rem !important;
}

body > .albumy .album,
plytoteka > albumy album {
    display: grid;

    grid-template-columns: 1fr max-content;
    grid-template-areas:
        "nazwa 		cena"
        "wykonawcy 	ocena"
        "plyty		producent"
        "plyty		dystrybutor"
        "plyty		opakowanie"
        "plyty		data_premiery"
        "plyty		naklad"
        "plyty		sprzedaneEgzemplarze";

    padding: 1rem;
    box-shadow: var(--shadow-md);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    background-color: #fff;

    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

body > .albumy .album__info:hover,
plytoteka > gatunki gatunek:hover,
body > .klienci .klient:hover,
plytoteka > klienci klient:hover,
body > .albumy__info:hover,
plytoteka > albumy album:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.gatunki .gatunek,
gatunki gatunek {
    border: 2px solid #f5f5f5;
}

.gatunki .gatunek:active,
gatunki gatunek:active {
    border: 2px solid #2d7cee;
    outline: none;
}

.albumy .album::before,
albumy album::before {
    content: "ID: " attr(id);
    color: var(--gray);
}

.album > .nazwa,
.album > .cena,
album > nazwa,
album > cena {
    grid-area: nazwa;
    font-size: 1.75rem;
    font-weight: 900;
}

.album > .cena,
album > cena::after {
    content: attr(waluta);
    margin-left: 0.5rem;
}

/* .album .wykonawca, */
.zagraniczny,
album wykonawca[czyZagraniczny="tak"] {
    color: var(--orange);
    font-style: italic;
}

album > cena[waluta="PLN"]::after {
    content: "ZŁ";
}

album > cena[waluta="USD"],
album > cena[waluta="USD"]::after {
    content: "$";
    color: #289947;
}

album > cena[waluta="EUR"],
album > cena[waluta="EUR"]::after {
    content: "€";
    color: #2d7cee;
}

.album > .ocena,
album > ocena {
    font-weight: 700;
}

.album > .ocena::before,
album > ocena::before {
    content: "Ocena: ";
}

.album > .ocena::after,
album > ocena::after {
    content: "/5 ⭐";
}

.album > .ocena::before,
album > ocena::before,
.album > .ocena::after,
album > ocena::after {
    color: var(--gray);
    font-weight: 500;
}

.album > .wykonawcy,
album > wykonawcy {
    grid-area: wykonawcy;
    padding-bottom: 1.5rem;
}

.album > .wykonawcy::before,
album > wykonawcy::before {
    content: "Wykonawcy:";
    color: gray;
    font-size: 1rem;
    font-weight: 400;
}

.wykonawcy .wykonawca:not(:last-child)::after,
wykonawcy wykonawca:not(:last-child)::after {
    content: ",";
}

.album > .plyty,
album > plyty {
    grid-area: plyty;
    display: flex;
    flex-direction: column;
}

.album > .plyty::before,
album > plyty::before {
    content: "Tracklista";
    font-weight: 700;
    font-size: 1.5rem;
}

/* .album > .plyty .plyta::before, */
album > plyty plyta::before {
    content: "💿 CD " attr(cd);
    font-weight: 700;
    font-size: 1.25rem;
}

.plyta,
plyta {
    margin-bottom: 1rem;
}

.plyta .utwory,
plyta utwory {
    display: flex;
    flex-direction: column;
    margin-top: 0.25rem;
}

.utwor,
utwor {
    display: grid;
    grid-template-areas: "numer dlugosc nazwa";
    grid-template-columns: min-content min-content 1fr;
}

.utwor .numer,
utwor numer {
    grid-area: numer;
    font-family: "JetBrains Mono", "Consolas", monospace;
    color: var(--gray);
    margin-right: 0.5rem;
}

.utwor .numer::after,
utwor numer::after {
    content: ".";
}

.utwor .nazwa,
utwor nazwa {
    grid-area: nazwa;
    /* font-weight: 700; */
}

.utwor .dlugosc,
utwor dlugosc {
    grid-area: dlugosc;
    font-feature-settings: "tnum" on, "lnum" on;
}

.utwor .dlugosc::after,
utwor dlugosc::after {
    content: "-";
    margin: 0 0.25rem;
    color: var(--gray);
}

.album > .producent::before,
album > producent::before {
    content: "Producent:";
}

.album > .dystrybutor::before,
album > dystrybutor::before {
    content: "Dystrybutor:";
}

.album > .opakowanie::before,
album > opakowanie::before {
    content: "Opakowanie:";
}

.album > .data_premiery::before,
album > data_premiery::before {
    content: "Data premiery:";
}

.album > .ocena::before,
album > ocena::before {
    content: "Ocena:";
}

.album > .naklad::before,
album > naklad::before {
    content: "Naklad:";
}

.album > .sprzedaneEgzemplarze::before,
album > sprzedaneEgzemplarze::before {
    content: "Sprzedano:";
}

.album > .producent,
album > producent,
.album > .dystrybutor,
album > dystrybutor,
.album > .opakowanie,
album > opakowanie,
.album > .data_premiery,
album > data_premiery,
.album > .ocena,
album > ocena,
.album > .naklad,
album > naklad,
.album > .sprzedaneEgzemplarze,
album > sprzedaneEgzemplarze {
    font-weight: 500;
}

.album > .producent::before,
album > producent::before,
.album > .dystrybutor::before,
album > dystrybutor::before,
.album > .opakowanie::before,
album > opakowanie::before,
.album > .data_premiery::before,
album > data_premiery::before,
.album > .ocena::before,
album > ocena::before,
.album > .naklad::before,
album > naklad::before,
.album > .sprzedaneEgzemplarze::before,
album > sprzedaneEgzemplarze::before {
    color: var(--gray);
    margin-right: 0.5rem;
    font-weight: 300;
}

.klient,
klient {
    display: block;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
        "imie nazwisko"
        "login login"
        "wypozyczenia wypozyczenia";

    padding: 1rem;
    box-shadow: var(--shadow-md);
    border-radius: 8px;
    background-color: #fff;

    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.klient .pesel,
klient pesel {
    display: none;
}

.klient .godnosc,
klient imie,
klient nazwisko {
    display: inline-block;
    font-size: 1.75rem;
    font-weight: 900;
}
.klient .login,
klient login {
    display: block;
    color: var(--gray);
    margin-bottom: 1.5rem;
}

.klient .login::before,
klient login::before {
    content: "login: ";
    margin-left: auto;
}

.klient .wypozyczenia::before,
klient wypozyczenia::before {
    display: block;
}

.klient .wypozyczenia::before,
klient wypozyczenia::before {
    content: "Wypożyczenia";
    font-size: 1.5rem;
    font-weight: 700;
    position: relative;
    top: 0;
}

.wypozyczenie::before,
wypozyczenie::before {
    grid-area: title;

    line-height: 1rem;
    content: "Wypożyczenie";
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--gray);

    margin-bottom: 0.5rem;
}

.wypozyczenie,
wypozyczenie {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "title  data_rozpoczecia"
        ".      data_zakonczenia"
        "albumy albumy";

    border: 2px dashed var(--light-gray);
    padding: 1rem;
    margin-top: 0.5rem;
    border-radius: 8px;
    box-shadow: inset 0 0 0 0;
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wypozyczenie:hover,
wypozyczenie:hover {
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.25);
    border-color: #fff;
    background-color: rgba(0, 0, 0, 0.01);
}

.wypozyczenie .data_rozpoczecia,
wypozyczenie data_rozpoczecia {
    grid-area: data_rozpoczecia;
    font-weight: 600;
}
.wypozyczenie .data_zakonczenia,
wypozyczenie data_zakonczenia {
    grid-area: data_zakonczenia;
    font-weight: 600;
}

.wypozyczenie .data_rozpoczecia::before,
wypozyczenie data_rozpoczecia::before {
    content: "Data rozpoczęcia: ";
    color: var(--gray);
    font-weight: 400;
    grid-area: data_rozpoczecia;
}

.wypozyczenie .data_zakonczenia::before,
wypozyczenie data_zakonczenia::before {
    content: "Data zakończenia: ";
    color: var(--gray);
    font-weight: 400;
    grid-area: data_zakonczenia;
}

.wypozyczenie .albumy::before,
wypozyczenie albumy::before {
    content: "Wypożyczone albumy: ";
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.wypozyczenie .albumy,
wypozyczenie albumy {
    grid-area: albumy;
    display: flex;
    flex-direction: column;
    margin-left: 0;
}

wypozyczenie album {
    display: list-item;
    margin-left: 1.35rem;
}

.wypozyczenie .album::after,
wypozyczenie album::after {
    content: attr(numer);
}

.wypozyczenie .album {
    padding: 0.75rem;
    text-decoration: none;
    color: #000;
}

.wypozyczenie * {
    text-decoration: none;
}

.wypozyczenie .wykonawcy {
    padding-bottom: 0;
}

.wypozyczenie .album {
    display: list-item;
    margin-left: 1.75rem;
}

.wypozyczenie .album a {
    display: block;
    border: 2px dashed var(--gray);
}

.wypozyczenie .album > .nazwa {
    font-size: 1rem;
}