/* --- GLOBAL RESET & BASE --- */
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;
}

/* --- SCROLLBARS --- */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1e1b4b; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #0f0e2b; }
* { scrollbar-width: thin; scrollbar-color: #1e1b4b transparent; }
.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* --- RANGE SLIDERS --- */
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; 
}

/* --- COMPONENTS --- */
.loader { 
    border: 2px solid #334155; border-top: 2px solid #a855f7; 
    border-radius: 50%; width: 20px; height: 20px; 
    animation: spin 1s linear infinite; 
}
.nav-tab.active { color: #a855f7; }
.nav-tab.active svg { stroke: #a855f7; fill: rgba(168, 85, 247, 0.1); }
.playlist-active { background-color: rgba(124, 58, 237, 0.2); border-left-color: #8b5cf6; }

/* --- SELECT CUSTOM --- */
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;
}

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

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

/* --- UTILS --- */
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 20px); }

/* --- ORIENTATION LOCK --- */
#orientation-lock { display: none; }

/* POPRAWKA DLA KLAWIATURY:
   Dodano 'min-aspect-ratio: 13/9' (ok. 1.44).
   Gdy w pionie wysunie się klawiatura, proporcje (width/height) rzadko przekraczają 1.2-1.3.
   Prawdziwy landscape w telefonach ma proporcje > 1.5 (16:9, 18:9 itp.).
   Dzięki temu blokada nie włączy się podczas pisania w pionie.
*/
@media (orientation: landscape) and (max-height: 500px) and (min-aspect-ratio: 13/9) {
    #orientation-lock { display: flex !important; }
}

/* --- LOGIKA Z-INDEX DLA WYSZUKIWANIA --- */
#view-library:has(#search-input:focus) {
    z-index: 50 !important;
}
#view-library.search-active {
    z-index: 50 !important;
}

/* --- MAŁE EKRANY POZIOME (Układ "pod spodem" blokady) --- */
@media (orientation: landscape) and (max-height: 500px) {
    .pb-safe.landscape\:hidden { display: block !important; }
    
    #view-playlists, #view-library, #view-player {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        transform: translateX(0);
        transition: transform 0.3s ease-in-out;
    }
    
    #main-content-area.landscape\:flex {
        display: block !important;
    }

    #view-playlists.landscape\:w-72, 
    #view-player.landscape\:w-96 {
        width: 100% !important;
        flex: none !important;
        border: none !important;
    }
}

/* --- TABLETY W PIONIE ORAZ URZĄDZENIA 768px - 1080px (Split View) --- */
/* Zmodyfikowano warunek:
   1. (min-width: 720px) and (orientation: portrait) - klasyczny tablet pionowo
   2. (min-width: 768px) and (max-width: 1080px) - mniejsze laptopy / duże tablety poziomo
*/
@media 
    (min-width: 720px) and (orientation: portrait),
    (min-width: 768px) and (max-width: 1080px) 
{
    /* Ukryj dolną nawigację */
    .pb-safe.landscape\:hidden { display: none !important; }

    /* Pokaż przycisk menu w nagłówku */
    #btn-tablet-menu { display: block !important; }

    /* Główny kontener - Flex POZIOMY (Obok siebie) */
    #main-content-area {
        display: flex !important;
        flex-direction: row !important;
        position: relative; /* Ważne dla overlay */
    }

    /* 1. UTWORY (BIBLIOTEKA) - Lewa strona, zajmuje resztę miejsca */
    #view-library {
        position: static !important;
        width: auto !important;
        height: 100% !important;
        flex: 1 !important; /* Rozciągnij */
        transform: none !important;
        border-right: 1px solid #1e293b;
        z-index: 10 !important;
    }

    /* 2. PLAYER - Prawa strona, stała szerokość */
    #view-player {
        position: static !important;
        width: 380px !important; /* Stała szerokość kolumny */
        height: 100% !important;
        flex: none !important;
        transform: none !important;
        border-left: 1px solid #1e293b;
        background-color: #0f172a !important; /* Wyróżnienie tła */
        z-index: 20 !important;
        padding-bottom: 0;
    }

    /* Układ wewnątrz playera - Pionowy (jak na telefonie), bo panel jest wąski */
    #view-player > div {
        flex-direction: column !important;
        gap: 16px !important;
        padding: 20px !important;
        justify-content: center !important;
    }
    
    /* Okładka */
    #view-player .max-w-sm:first-child {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1/1;
        flex: none !important;
        max-height: 350px;
        margin: 0 auto;
    }

    /* Kontrolki */
    #view-player .max-w-sm:last-child {
        width: 100% !important;
        flex: none !important;
    }

    /* 3. PLAYLISTY - Wysuwany panel z lewej (Overlay) */
    #view-playlists {
        position: absolute !important;
        top: 0; left: 0; bottom: 0;
        width: 320px !important;
        z-index: 100 !important; /* Na wierzchu */
        background-color: #020617 !important;
        border-right: 1px solid #1e293b;
        box-shadow: 10px 0 30px rgba(0,0,0,0.5);
        /* Domyślnie ukryty przez klasę -translate-x-full sterowaną przez JS/CSS */
        /* Tutaj upewniamy się, że transform działa */
        transition: transform 0.3s ease-in-out !important;
        display: flex !important; /* Wymuś flex, bo JS może chcieć ukrywać */
    }
}