/* ============================================================
   SOUNDROT - style.css

   OBSAH:
   1. Reset a základní nastavení
   2. Header (hlavička)
   3. Navigační tlačítka
   4. Layout stránek
   5. Stránka: Vyhledávání
   6. Stránka: Sbírka
   7. Stránka: Playlisty
   8. Komponenta: Song Card (karta skladby)
   9. Komponenta: Playlist Card (karta playlistu)
   10. Komponenta: Tlačítka (btn, btn-small)
   11. Komponenta: Select (výběr playlistu)
   12. Komponenta: Přehrávač (dole)
   13. Tlačítko zpět
   14. Prázdná zpráva
   15. Responzivní design (mobil)
   ============================================================ */


/* ========== 1. RESET A ZÁKLADNÍ NASTAVENÍ ========== */

/* Hvězdička = všechny elementy na stránce */
* {
    margin: 0;
    /* margin = vnější okraj, 0 = žádný vnější okraj */
    padding: 0;
    /* padding = vnitřní okraj, 0 = žádný vnitřní okraj */
    box-sizing: border-box;
    /* border-box = padding a border se počítají dovnitř prvku,
       takže když nastavíš šířku 100px, zůstane 100px i s paddingem */
}

body {
    font-family: 'Inter', -apple-system, sans-serif;
    /* font-family = typ písma:
       - 'Inter' = moderní písmo z Google Fonts
       - -apple-system = systémové písmo na Macu (záložní)
       - sans-serif = bezpatkové písmo (poslední záložní varianta) */
    background: #f8f7ff;
    /* background = barva pozadí celé stránky
       #f8f7ff = hodně světlá fialová */
    color: #1a1530;
    /* color = barva textu
       #1a1530 = tmavě fialová */
    min-height: 100vh;
    /* min-height = minimální výška
       100vh = 100% výšky obrazovky (vh = viewport height)
       zajistí, že stránka bude vždy minimálně přes celou obrazovku */
}


/* ========== 2. HEADER (HLAVIČKA) ========== */
header {
    background: white;
    /* background = bílé pozadí hlavičky */
    padding: 1.2rem 2rem;
    /* padding = vnitřní okraj:
       - 1.2rem = nahoře a dole
       - 2rem = vlevo a vpravo
       rem = relativní jednotka (1rem = výchozí velikost písma, cca 16px) */
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    /* box-shadow = stín kolem prvku:
       - 0 = posun vodorovně (x)
       - 1px = posun svisle (y), kladné = dolů
       - 3px = rozostření stínu
       - rgba(0,0,0,0.04) = černá barva s 4% průhledností */
    position: sticky;
    /* position: sticky = prvek se drží na místě při scrollování
       - chová se jako normální, dokud nenarazí na okraj
       - pak se "přilepí" a zůstane vidět */
    top: 0;
    /* top = vzdálenost od horního okraje
       0 = přilepí se úplně nahoru (funguje jen s position: sticky nebo fixed) */
    z-index: 100;
    /* z-index = vrstva (čím vyšší číslo, tím je prvek výš)
       100 = header je nad běžným obsahem */
}

header h1 {
    font-size: 1.5rem;
    /* font-size = velikost písma */
    font-weight: 700;
    /* font-weight = tloušťka písma:
       - 400 = normální (regular)
       - 700 = tučné (bold) */
    color: #7C3AED;
    /* color = fialová barva nadpisu SOUNDROT */
    letter-spacing: 12px;
    /* letter-spacing = mezery mezi písmeny
       12px = velké mezery = underground styl */
    text-align: center;
    /* text-align = zarovnání textu
       center = na střed */
    margin-bottom: 0.8rem;
    /* margin-bottom = vnější okraj dole
       vytvoří mezeru mezi nadpisem a navigačními tlačítky */
}


/* ========== 3. NAVIGAČNÍ TLAČÍTKA ========== */
nav {
    display: flex;
    /* display: flex = flexbox = prvky uvnitř se řadí vedle sebe (vodorovně) */
    gap: 0.5rem;
    /* gap = mezera mezi prvky ve flexboxu
       0.5rem = cca 8px mezera mezi tlačítky */
    justify-content: center;
    /* justify-content = zarovnání prvků na hlavní ose (vodorovně)
       center = vycentruje tlačítka doprostřed */
}

.nav-btn {
    background: #f3f0ff;
    /* background = světle fialové pozadí tlačítka */
    border: none;
    /* border = žádný okraj */
    padding: 0.6rem 1.5rem;
    /* padding: 0.6rem nahoře/dole, 1.5rem vlevo/vpravo */
    border-radius: 50px;
    /* border-radius = zaoblení rohů
       50px = velké zaoblení = "pilulka" tvar */
    cursor: pointer;
    /* cursor = tvar kurzoru myši
       pointer = ručička (jako u odkazu) */
    font-size: 0.9rem;
    /* font-size = velikost písma tlačítka */
    font-weight: 500;
    /* font-weight = středně tučné písmo */
    color: #6b5e9e;
    /* color = šedofialová barva textu tlačítka */
    transition: all 0.2s;
    /* transition = plynulá animace změny:
       - all = všechny měnící se vlastnosti
       - 0.2s = animace trvá 0.2 sekundy */
}

.nav-btn:hover {
    /* :hover = když na tlačítko najedu myší */
    background: #e8e0ff;
    /* background = trochu tmavší fialová při hoveru */
}

.nav-btn.active {
    /* .active = aktivní/vybrané tlačítko */
    background: #7C3AED;
    /* background = fialové pozadí */
    color: white;
    /* color = bílý text */
}


/* ========== 4. LAYOUT STRÁNEK ========== */
main {
    max-width: 800px;
    /* max-width = maximální šířka
       800px = na velké obrazovce se neroztáhne přes celou šířku */
    margin: 2rem auto;
    /* margin = vnější okraj:
       - 2rem = nahoře a dole
       - auto = automaticky vlevo a vpravo = vycentruje prvek */
    padding: 0 1rem;
    /* padding = 0 nahoře/dole, 1rem vlevo/vpravo (okraj pro mobil) */
}

.page {
    display: none;
    /* display: none = schová prvek (jako by neexistoval) */
}

.page.active {
    display: block;
    /* display: block = zobrazí prvek (zabere celou šířku) */
}


/* ========== 5. STRÁNKA: VYHLEDÁVÁNÍ ========== */
.search-box {
    display: flex;
    /* display: flex = input a tlačítko vedle sebe */
    gap: 0.5rem;
    /* gap = mezera mezi inputem a tlačítkem */
    margin-bottom: 1.5rem;
    /* margin-bottom = mezera pod vyhledávacím polem */
}

.search-box input {
    flex: 1;
    /* flex: 1 = zabere všechen volný prostor
       tlačítko má pevnou šířku, input roztáhne na zbytek */
    padding: 0.8rem 1.2rem;
    /* padding = vnitřní okraj inputu */
    border: 2px solid #e8e0f8;
    /* border = 2px široký, plný, světle fialový okraj */
    border-radius: 14px;
    /* border-radius = zaoblené rohy inputu */
    font-size: 1rem;
    /* font-size = velikost textu v inputu */
    font-family: inherit;
    /* font-family: inherit = zdědí písmo od rodiče (Inter) */
    transition: border 0.2s;
    /* transition = plynulá změna barvy okraje za 0.2s */
}

.search-box input:focus {
    /* :focus = když je input aktivní (kurzor v něm) */
    outline: none;
    /* outline: none = zruší defaultní modrý rámeček prohlížeče */
    border-color: #7C3AED;
    /* border-color = změní barvu okraje na fialovou */
}


/* ========== 6. STRÁNKA: SBÍRKA ========== */
.section-header {
    display: flex;
    /* display: flex = prvky vedle sebe */
    justify-content: space-between;
    /* justify-content: space-between = první prvek vlevo, poslední vpravo,
       mezera mezi nimi */
    align-items: center;
    /* align-items: center = vycentruje prvky svisle na střed */
    margin-bottom: 1rem;
    /* margin-bottom = mezera pod hlavičkou */
}

.section-header h2 {
    font-size: 1.3rem;
    /* font-size = velikost nadpisu */
    font-weight: 700;
    /* font-weight = tučné */
}

.section-header span {
    color: #8b80a8;
    /* color = šedofialová (méně výrazná než nadpis) */
    font-size: 0.9rem;
    /* font-size = menší písmo pro počet skladeb */
}


/* ========== 7. STRÁNKA: PLAYLISTY ========== */
.playlist-create {
    display: flex;
    /* display: flex = input a tlačítko vedle sebe */
    gap: 0.5rem;
    /* gap = mezera mezi inputem a tlačítkem */
    margin-bottom: 1.5rem;
    /* margin-bottom = mezera pod formulářem */
}

.playlist-create input {
    flex: 1;
    /* flex: 1 = roztáhne se na zbytek místa */
    padding: 0.8rem 1.2rem;
    border: 2px solid #e8e0f8;
    border-radius: 14px;
    font-size: 1rem;
    font-family: inherit;
}

.playlist-create input:focus {
    outline: none;
    /* outline: none = zruší modrý rámeček */
    border-color: #7C3AED;
    /* border-color = fialový okraj při psaní */
}


/* ========== 8. KOMPONENTA: SONG CARD (KARTA SKLADBY) ========== */
.song-card {
    display: flex;
    /* display: flex = obrázek, info a tlačítka vedle sebe */
    align-items: center;
    /* align-items: center = svisle vycentrovat na střed */
    gap: 1rem;
    /* gap = mezera mezi obrázkem, textem a tlačítky */
    background: white;
    /* background = bílé pozadí karty */
    border-radius: 18px;
    /* border-radius = hodně zaoblené rohy = "bublina" efekt */
    padding: 0.8rem 1rem;
    /* padding = vnitřní okraj karty */
    margin-bottom: 0.6rem;
    /* margin-bottom = mezera mezi kartami */
    box-shadow: 0 2px 8px rgba(124,58,237,0.04);
    /* box-shadow = jemný fialový stín pod kartou */
    transition: all 0.2s;
    /* transition = plynulá animace hover efektu */
}

.song-card:hover {
    /* :hover = když najedu myší na kartu */
    box-shadow: 0 4px 16px rgba(124,58,237,0.08);
    /* box-shadow = větší stín při hoveru */
    transform: translateY(-1px);
    /* transform: translateY(-1px) = posune prvek o 1px nahoru
       záporné Y = nahoru, kladné Y = dolů */
}

.song-card img {
    width: 52px;
    /* width = šířka obrázku */
    height: 52px;
    /* height = výška obrázku */
    border-radius: 12px;
    /* border-radius = zaoblené rohy obrázku alba */
    object-fit: cover;
    /* object-fit: cover = obrázek se ořízne tak, aby vyplnil čtverec
       bez deformace (zachová poměr stran) */
}

.song-info {
    flex: 1;
    /* flex: 1 = zabere všechen zbývající prostor mezi obrázkem a tlačítky */
    min-width: 0;
    /* min-width: 0 = důležité! umožní zkrácení textu pomocí text-overflow */
}

.song-info .track-name {
    font-weight: 600;
    /* font-weight = polotučné písmo */
    font-size: 0.95rem;
    white-space: nowrap;
    /* white-space: nowrap = text zůstane na jednom řádku, nezalamuje se */
    overflow: hidden;
    /* overflow: hidden = schová text, který se nevejde */
    text-overflow: ellipsis;
    /* text-overflow: ellipsis = dlouhý text zakončí třemi tečkami "..." */
}

.song-info .artist-name {
    color: #8b80a8;
    /* color = šedofialová barva pro jméno interpreta */
    font-size: 0.85rem;
    margin-top: 2px;
    /* margin-top = malá mezera nad jménem interpreta */
}

.song-actions {
    display: flex;
    /* display: flex = tlačítka vedle sebe */
    gap: 0.4rem;
    /* gap = mezera mezi tlačítky */
    flex-shrink: 0;
    /* flex-shrink: 0 = tlačítka se nikdy nezmenší
       i když není dost místa, zůstanou v plné velikosti */
}


/* ========== 9. KOMPONENTA: PLAYLIST CARD (KARTA PLAYLISTU) ========== */
.playlist-card {
    display: flex;
    /* display: flex = prvky vedle sebe */
    justify-content: space-between;
    /* justify-content: space-between = název vlevo, počet a tlačítko vpravo */
    align-items: center;
    /* align-items: center = svisle na střed */
    background: white;
    border-radius: 18px;
    padding: 1rem 1.2rem;
    margin-bottom: 0.6rem;
    box-shadow: 0 2px 8px rgba(124,58,237,0.04);
    cursor: pointer;
    /* cursor: pointer = ručička = indikuje, že se dá kliknout */
    transition: all 0.2s;
}

.playlist-card:hover {
    box-shadow: 0 4px 16px rgba(124,58,237,0.08);
    /* box-shadow = větší stín */
    transform: translateY(-1px);
    /* transform: translateY = nadskočí o 1px nahoru */
}

.playlist-card .playlist-name {
    font-weight: 600;
    /* font-weight = polotučné */
    font-size: 1rem;
}

.playlist-card .playlist-count {
    color: #8b80a8;
    /* color = šedofialová */
    font-size: 0.85rem;
}


/* ========== 10. KOMPONENTA: TLAČÍTKA ========== */
.btn {
    background: #7C3AED;
    /* background = fialové pozadí (hlavní akční tlačítka) */
    color: white;
    /* color = bílý text */
    border: none;
    /* border = žádný okraj */
    padding: 0.8rem 1.5rem;
    /* padding = vnitřní okraj */
    border-radius: 14px;
    /* border-radius = zaoblené rohy */
    cursor: pointer;
    /* cursor = ručička */
    font-size: 0.9rem;
    font-weight: 600;
    /* font-weight = polotučné až tučné */
    transition: all 0.2s;
    /* transition = plynulá změna */
}

.btn:hover {
    background: #6a2de0;
    /* background = tmavší fialová při hoveru */
    transform: translateY(-1px);
    /* transform = nadskočí o 1px nahoru */
}

.btn-small {
    padding: 0.4rem 0.9rem;
    /* padding = menší vnitřní okraj */
    font-size: 0.8rem;
    /* font-size = menší písmo */
    border-radius: 8px;
    /* border-radius = méně zaoblené než velké tlačítko */
    background: #f3eeff;
    /* background = světle fialové */
    color: #7C3AED;
    /* color = fialový text */
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-small:hover {
    background: #e4d8ff;
    /* background = trochu tmavší při hoveru */
}

.btn-small.danger {
    /* .danger = modifikátor pro nebezpečné akce (mazání) */
    background: #fff0f0;
    /* background = světle červené pozadí */
    color: #e74c3c;
    /* color = červený text */
}

.btn-small.danger:hover {
    background: #ffe0e0;
    /* background = trochu tmavší červená při hoveru */
}


/* ========== 11. KOMPONENTA: SELECT (VÝBĚR PLAYLISTU) ========== */
.playlist-select {
    background: #f3eeff;
    /* background = světle fialové pozadí */
    border: 2px solid #e8e0f8;
    /* border = 2px světle fialový okraj */
    color: #1a1530;
    /* color = tmavě fialový text */
    padding: 0.4rem 0.7rem;
    /* padding = vnitřní okraj */
    border-radius: 10px;
    /* border-radius = zaoblené rohy */
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    /* font-family = stejné písmo jako zbytek stránky */
    cursor: pointer;
    /* cursor = ručička */
    transition: all 0.2s;
    /* transition = plynulá změna */
}

.playlist-select:focus {
    /* :focus = když je select aktivní */
    outline: none;
    /* outline: none = zruší defaultní rámeček */
    border-color: #7C3AED;
    /* border-color = fialový okraj */
}


/* ========== 12. KOMPONENTA: PŘEHRÁVAČ ========== */
.player {
    position: fixed;
    /* position: fixed = fixní pozice vůči obrazovce
       - prvek je "přilepený" a nehýbe se ani při scrollování */
    bottom: 0;
    /* bottom: 0 = přilepený k dolnímu okraji */
    left: 0;
    /* left: 0 = přilepený k levému okraji */
    right: 0;
    /* right: 0 = přilepený k pravému okraji
       (tím se roztáhne přes celou šířku) */
    background: white;
    /* background = bílé pozadí */
    padding: 0.7rem 1.5rem;
    /* padding = vnitřní okraj */
    box-shadow: 0 -2px 12px rgba(124,58,237,0.06);
    /* box-shadow = stín směrem nahoru:
       - 0 = posun X
       - -2px = posun Y (záporný = nahoru)
       - 12px = rozostření */
    display: flex;
    /* display: flex = obrázek, info a audio vedle sebe */
    align-items: center;
    /* align-items: center = svisle na střed */
    gap: 1rem;
    /* gap = mezera */
    z-index: 200;
    /* z-index = vrstva 200 = nad headerem (100) */
}

.player.hidden {
    /* .hidden = když je přehrávač schovaný */
    display: none;
    /* display: none = úplně schovat */
}

.player-info {
    display: flex;
    /* display: flex = obrázek a texty vedle sebe */
    align-items: center;
    /* align-items: center = svisle na střed */
    gap: 0.8rem;
    /* gap = mezera */
    flex: 1;
    /* flex: 1 = zabere volný prostor */
    min-width: 0;
    /* min-width: 0 = umožní zkrácení textu */
}

.player-info img {
    width: 42px;
    /* width = šířka obrázku */
    height: 42px;
    /* height = výška obrázku */
    border-radius: 10px;
    /* border-radius = zaoblené rohy */
    object-fit: cover;
    /* object-fit: cover = obrázek vyplní čtverec */
}

.player-info span:first-child {
    /* :first-child = první span (název skladby) */
    font-weight: 600;
    /* font-weight = polotučné */
    font-size: 0.85rem;
    display: block;
    /* display: block = zabere celý řádek (další span bude pod ním) */
}

.player-info span:last-child {
    /* :last-child = poslední span (interpret) */
    color: #8b80a8;
    /* color = šedofialová */
    font-size: 0.75rem;
}

.player audio {
    height: 36px;
    /* height = výška audio přehrávače */
}


/* ========== 13. TLAČÍTKO ZPĚT (DETAIL PLAYLISTU) ========== */
.back-btn {
    background: none;
    /* background: none = průhledné pozadí */
    border: none;
    /* border: none = žádný okraj */
    font-size: 1.2rem;
    cursor: pointer;
    /* cursor: pointer = ručička */
    color: #7C3AED;
    /* color = fialový text */
    font-weight: 600;
    /* font-weight = polotučné */
    margin-bottom: 1rem;
    /* margin-bottom = mezera pod tlačítkem */
    padding: 0.3rem 0;
    /* padding = 0.3rem nahoře/dole, 0 vlevo/vpravo */
}


/* ========== 14. PRÁZDNÁ ZPRÁVA ========== */
.empty-msg {
    text-align: center;
    /* text-align: center = text vycentrovaný */
    color: #b8b0cc;
    /* color = hodně světlá fialová */
    padding: 3rem;
    /* padding = velký vnitřní okraj */
    font-size: 0.95rem;
}


/* ========== 15. RESPONZIVNÍ DESIGN (MOBIL) ========== */
/* @media = media query = "když platí podmínka, použij tyhle styly"
   (max-width: 600px) = "když je šířka obrazovky maximálně 600px"
   = pro mobily a malé tablety */
@media (max-width: 600px) {

    .song-card {
        flex-wrap: wrap;
        /* flex-wrap: wrap = když se prvky nevejdou vedle sebe,
           spadnou na další řádek */
    }

    .song-actions {
        width: 100%;
        /* width: 100% = tlačítka přes celou šířku */
        justify-content: flex-end;
        /* justify-content: flex-end = zarovnat tlačítka doprava */
    }

    .player {
        flex-direction: column;
        /* flex-direction: column = prvky pod sebou místo vedle sebe */
        gap: 0.5rem;
        /* gap = menší mezera */
    }

    .player audio {
        width: 100%;
        /* width: 100% = audio přehrávač na celou šířku */
    }

    .search-box {
        flex-direction: column;
        /* flex-direction: column = input a tlačítko pod sebou */
    }

    .playlist-create {
        flex-direction: column;
        /* flex-direction: column = input a tlačítko pod sebou */
    }
}

/*
========================================
TAHÁK - CSS vlastnosti použité v projektu
========================================

=== LAYOUT ===
display: flex .............. prvky uvnitř se řadí vedle sebe (flexbox)
display: none .............. prvek je schovaný, jako by neexistoval
display: block ............. prvek je vidět, zabere celou šířku
flex: 1 .................... roztáhne prvek na všechen volný prostor
flex-shrink: 0 ............. prvek se nikdy nezmenší (ani při nedostatku místa)
flex-wrap: wrap ............ když se prvky nevejdou, spadnou na další řádek
flex-direction: column ..... prvky se řadí pod sebe (svisle)
gap ........................ mezera mezi prvky ve flexboxu

=== ZAROVNÁNÍ ===
justify-content: center .... vycentrovat prvky vodorovně na střed
justify-content: space-between .. první prvek vlevo, poslední vpravo
justify-content: flex-end .. zarovnat prvky doprava
align-items: center ........ vycentrovat prvky svisle na střed

=== POZICE ===
position: sticky ........... prvek se drží na místě při scrollování
position: fixed ............ prvek je přilepený k obrazovce (nehýbe se)
top: 0 ..................... přilepit k hornímu okraji
bottom: 0 .................. přilepit k dolnímu okraji
left: 0 .................... přilepit k levému okraji
right: 0 ................... přilepit k pravému okraji
z-index .................... vrstva (vyšší číslo = prvek je výš/nahoře)

=== ROZMĚRY A OKRAJE ===
width ...................... šířka prvku
height ..................... výška prvku
max-width .................. maximální šířka
min-height ................. minimální výška
padding .................... vnitřní okraj (uvnitř prvku)
margin ..................... vnější okraj (mezi prvky)
margin-bottom .............. vnější okraj dole

=== VZHLED ===
background ................. barva pozadí
color ...................... barva textu
border ..................... okraj (šířka styl barva)
border-radius .............. zaoblení rohů
box-shadow ................. stín (x y rozostření barva)
font-family ................ typ písma
font-size .................. velikost písma
font-weight ................ tloušťka písma (400=normální, 700=tučné)
letter-spacing ............. mezery mezi písmeny
text-align ................. zarovnání textu

=== OBRAZKY ===
object-fit: cover .......... obrázek vyplní rámeček a ořízne se
width/height ............... rozměry obrázku

=== INTERAKCE ===
cursor: pointer ............ kurzor myši = ručička
transition ................. plynulá animace změny (co jak-dlouho)
transform: translateY() .... posunutí prvku (nahoru/dolů)
outline: none .............. zruší defaultní rámeček prohlížeče

=== STAVY ===
:hover ..................... když je myš nad prvkem
:focus ..................... když je prvek aktivní (kurzor v inputu)
:first-child ............... první potomek
:last-child ................ poslední potomek

=== RESPONZIVITA ===
@media (max-width: 600px) .. styly které platí jen na mobilu/tabletu
vh ......................... viewport height = % výšky obrazovky
rem ........................ relativní jednotka (1rem = cca 16px)
*/