/* Główne style strukturalne */
html { 
    height: 100%; 
    background-color: #020617; 
    overscroll-behavior: none; 
}

body { 
    font-family: 'Inter', sans-serif; 
    touch-action: manipulation;
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    width: 100%; 
    height: 100%; 
    overflow: hidden;
    background-color: #020617;
}

/* Niestandardowe, ciemne paski przewijania (scrollbar) */
::-webkit-scrollbar {
    width: 4px; 
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent; 
}

::-webkit-scrollbar-thumb {
    background: #1e1b4b; /* Bardzo ciemny granat/fiolet */
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: #0f0e2b; /* Prawie czarny */
}

* {
    scrollbar-width: thin;
    scrollbar-color: #1e1b4b transparent;
}

/* Ukrywanie paska przewijania */
.hide-scroll::-webkit-scrollbar { 
    display: none; 
}

.hide-scroll { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* Stylowanie suwaków (range inputs) - głównie dla odtwarzacza i tempa */
input[type=range] { 
    -webkit-appearance: none; 
    background: transparent; 
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; 
    height: 20px; 
    width: 20px; 
    border-radius: 50%;
    background: #a855f7; 
    cursor: pointer; 
    margin-top: -8px; 
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

input[type=range]::-webkit-slider-runnable-track { 
    width: 100%; 
    height: 4px; 
    cursor: pointer; 
    background: #334155; 
    border-radius: 2px; 
}

/* Animacja i styl ładowarki (loader) */
.loader { 
    border: 2px solid #334155; 
    border-top: 2px solid #a855f7; 
    border-radius: 50%; 
    width: 20px; 
    height: 20px; 
    animation: spin 1s linear infinite; 
}

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

/* Stany nawigacji dolnej */
.nav-tab.active { 
    color: #a855f7; 
}

.nav-tab.active svg { 
    stroke: #a855f7; 
    fill: rgba(168, 85, 247, 0.1); 
}

/* Animacje wejścia/wyjścia dla modali */
.modal-enter { 
    opacity: 0; 
    transform: scale(0.95); 
}

.modal-enter-active { 
    opacity: 1; 
    transform: scale(1); 
    transition: opacity 200ms, transform 200ms; 
}

.modal-exit { 
    opacity: 1; 
    transform: scale(1); 
}

.modal-exit-active { 
    opacity: 0; 
    transform: scale(0.95); 
    transition: opacity 200ms, transform 200ms; 
}

/* Niestandardowy wygląd pól wyboru (select) */
select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
    padding-right: 2.5rem;
    -webkit-appearance: none;
    appearance: none;
}

/* Obsługa bezpiecznych obszarów (safe areas) na urządzeniach mobilnych */
.pb-safe { 
    padding-bottom: env(safe-area-inset-bottom, 20px); 
}

/* Wyróżnienie aktywnej playlisty */
.playlist-active { 
    background-color: rgba(124, 58, 237, 0.2); 
    border-left-color: #8b5cf6; 
}

/* Pasek postępu przytrzymania usuwania (5-sekundowe potwierdzenie) */
@keyframes fillProgress {
    from { width: 0%; }
    to { width: 100%; }
}

.progress-bar-fill {
    width: 0%;
    transition: width 0s;
}

.is-deleting .progress-bar-fill {
    width: 100%;
    transition: width 5s linear; 
}

/* Ekran blokady orientacji (wymuszanie trybu pionowego) */
#orientation-lock { 
    display: none; 
}

@media (orientation: landscape) and (max-width: 1079px) {
    #orientation-lock { 
        display: flex !important; 
    }
}