/* UKRYCIE TYTUŁU KANAŁU */

#ChanTitle {
    display: none;
}




.ClassPrzewodnikContainer{
    width: 100%; height: 100%; 
    display: flex; flex-direction: column; 
    background: transparent; 
    padding: 0 0; 
    padding-top: 0px; 
    padding-left: 0px; 
    margin-top: -15px;
}

/* GŁÓWNY KAFELEK PROGRAMU */
.GlassProgramTile {
    flex-shrink: 0;
    width: 320px;
    height: 250px;
    margin-right: 20px;
    border-radius: 12px;
    background: rgba(18, 20, 24, 0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
}

.GlassProgramTile:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

/* Zabezpieczenie pierwszego kafelka przed ucięciem przy hoverze */
.GlassProgramTile:first-child {
    margin-left: 10px; /* 10px daje bezpieczny zapas na skalowanie i cień */
}

/* AKTYWNY KAFELEK (NADPISUJE HOVER) */
.GlassActiveProgramTile {
    border: 2px solid #3087ff !important;
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 25px rgba(48, 135, 255, 0.3) !important;
}

/* KONTENER OBRAZU 16:9 */
.TileImgBox {
    width: 100%;
    height: 160px; /* Ok. 16:9 dla szerokości 320px */
    position: relative;
    overflow: hidden;
    background: #000;
}

.TileImgBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.GlassProgramTile:hover .TileImgBox img {
    transform: scale(1.05);
}

/* MROCZNY GRADIENT NA OBRAZKU */
.TileGradient {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 70%;
    background: linear-gradient(to bottom, transparent 0%, rgba(18,20,24,0.9) 100%);
}



/* SEKCJA INFORMACYJNA (Na dole) */
.TileInfoBox {
    padding: 12px 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.TileTimeRow {
    font-size: 13px;
    margin-bottom: 6px;
    color: #abc;
}
.DateLight { font-weight: 300; opacity: 0.7; }
.TimeBold { font-weight: 600; color: #def; }

.TileTitle {
    font-size: 17px;
    font-weight: 700;
    color: #abc;
    margin: 0 0 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.TileSub {
    font-size: 13px;
    font-weight: 400;
    color: #3087ff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* NOWE SZKLANE BUTTONY (zamiast CategoryButtonAll) */
.GlassActionBtn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.GlassActionBtn:hover {
    background: rgba(48,135,255,0.2);
    border-color: #3087ff;
}
.GlassActionBtn.MainAction {
    background: #3087ff;
    border-color: #3087ff;
}
.GlassActionBtn.MainAction:hover {
    background: #1e6fe6;
}






/* KONTENER W PRAWYM GÓRNYM ROGU (Trzyma i odznakę, i przycisk menu) */
.TileTopRightControls {
    position: absolute;
    top: 10px; right: 10px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    z-index: 15;
}

/* Zaktualizowana Odznaka (Usunięto absolute, bo teraz zarządza tym Flexbox w kontenerze wyżej) */
.TileStatusBadge {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid;
    letter-spacing: 0.5px;
    height: 26px; /* Wyrównanie z przyciskiem menu */
    box-sizing: border-box;
}

/* Kółeczko Menu (3 kropki) */
.TileMenuBtn {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
}
.TileMenuBtn:hover {
    background: rgba(48,135,255,0.5);
    border-color: #3087ff;
}

/* ROZWIJANE SUBMENU */
  /* ROZWIJANE SUBMENU */
.TileSubMenu {
    position: absolute;
    top: 32px; right: 0;
    background: rgba(18,20,24,0.95);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 6px;
    
    /* Zmiana szerokości - dopasowuje się do zawartości */
    width: max-content; 
    min-width: 190px;
    
    display: flex; flex-direction: column; gap: 4px;
    opacity: 0; 
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    z-index: 20;
}
.TileSubMenu.ShowMenu {
    opacity: 1; 
    pointer-events: auto;
    transform: translateY(0);
}

/* Elementy wewnątrz SubMenu */
    /* Elementy wewnątrz SubMenu */
.SubMenuItem {
    padding: 8px 12px;
    border-radius: 6px;
    color: #cde; 
    font-size: 13px;
    font-weight: 500;
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; 
    transition: background 0.2s, color 0.2s;
    
    /* Kategoryczny zakaz łamania tekstu wewnątrz elementu! */
    white-space: nowrap; 
}
.SubMenuItem i {
    font-size: 14px;
    color: #3087ff; /* Akcent kolorystyczny na ikonkach */
}
.SubMenuItem:hover { 
    background: rgba(48,135,255,0.3); 
    color: #fff; 
}











/* --- MINIMODAL WEHIKUŁU CZASU (Wersja Kompaktowa + RWD) --- */
 /* --- MINIMODAL WEHIKUŁU CZASU (DESKTOP & TABLET) --- */
.GlassTimeModal {
    /* Uwalniamy modal całkowicie ze struktury strony na KAŻDYM ekranie */
    position: absolute;
    
    /* Pozycjonujemy go centralnie w pionie, ale lekko uniesionego (top: 45%), 
       żeby nie przykrył dolnej połowy ekranu i kafelków programów */
    top: 240px;; 
    left: 50%;
    
    /* Stan ukryty: przesunięcie i mniejsza skala */
    transform: translate(-50%, -40%) scale(0.95);
    
    /* Pozwalamy mu dobrać szerokość do zawartości */
    width: max-content; 
    
    background: rgba(18, 20, 24, 0.95);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.8);
    
    /* Z-index wyższy niż reszta GUI */
    z-index: 99999; 
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
}

.GlassTimeModal.ModalOpen {
    /* Po otwarciu wraca na idealne miejsce */
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

/* NAGŁÓWEK */
.TimeModalHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: rgba(0,0,0,0.4);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

#ModalHeaderTitle {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.TimeModalHeader .GlassActionBtn {
    padding: 6px 12px;
    font-size: 13px;
}

/* CIAŁO MODALA */
.TimeModalBody {
    display: flex;
    padding: 15px;
    gap: 15px;
}

/* SIATKI */
.TimeModalMainGrid {
    display: flex;
    flex-direction: column;
}

.TimeModalSideGrid {
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255,255,255,0.1);
    padding-left: 15px;
}

.TimeModalSectionTitle {
    text-align: center;
    color: #abc;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.TimeGrid {
    display: grid;
    gap: 5px; /* Kompaktowe odstępy */
}

/* Podział kolumn */
.DaysGrid { grid-template-columns: repeat(4, 1fr); }
.HoursGrid { grid-template-columns: repeat(6, 1fr); }

/* Poszerzone minuty na desktopie - wymuszamy minimalną szerokość przycisku */
.MinutesGrid { 
    grid-template-columns: repeat(2, minmax(60px, 1fr)); 
}

/* KAFELKI WYBORU (Spłaszczone dla Desktopu!) */
.TimeBox {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #cde;
    text-align: center;
}

/* Zredukowane paddingi o połowę w stosunku do pierwotnej wersji */
.TimeBox.TypeDay { padding: 6px 8px; } 
.TimeBox.TypeTime { padding: 6px 0; font-size: 15px; font-weight: 600; } 

.TimeBox:hover {
    background: rgba(48,135,255,0.2);
    border-color: rgba(48,135,255,0.5);
    color: #fff;
}

.TimeBox.TimeSelected {
    background: #3087ff;
    border-color: #3087ff;
    color: #fff;
    box-shadow: 0 4px 15px rgba(48,135,255,0.4);
    transform: scale(1.05);
}

.TimeBox .DayName { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.TimeBox .DayDate { font-size: 11px; opacity: 0.7; }



/* --- GŁÓWNY PRZYCISK WYWOŁUJĄCY MODAL WEHIKUŁU CZASU --- */
.TimeTravelTriggerBtn {
    width: 320px;
    justify-content: center;
    font-size: 18px;
    letter-spacing: 1px;
    padding: 12px 20px;
    transition: all 0.3s ease;
}








/* --- UWOLNIENIE MODALA NA EKRANACH PONIŻEJ 1250px --- */
@media (max-width: 1250px) {
    .ClassPrzewodnikContainer{   
        margin-top: 40px;
    }
    .GlassTimeModal {
        /* Uwalniamy z kontenera - teraz pozycjonuje się względem ekranu */
        position: fixed !important; 
        
        /* Centrujemy na ekranie */
        top: 50% !important;
        left: 50% !important;
        
        /* Stan ukryty: lekko podniesiony i pomniejszony */
        transform: translate(-50%, -45%) scale(0.95) !important; 
        
        /* Bezpieczne wymiary na mobile */
        width: 95vw !important; 
        max-width: 450px !important; /* Żeby na tabletach nie był nienaturalnie długi */
        max-height: 85vh !important; /* Zabezpieczenie przed ucięciem w pionie */
        overflow-y: auto !important; /* Scroll wewnątrz modala, jeśli telefon jest w poziomie */
        
        /* Ultrawysoki z-index, żeby przykrył playera i resztę UI */
        z-index: 99999 !important; 
    }

    .GlassTimeModal.ModalOpen {
        /* Otwarty modal opada idealnie na sam środek ekranu */
        transform: translate(-50%, -50%) scale(1) !important;
    }
}




/* --- MAGIA RWD DLA EKRANÓW PONIŻEJ 800px --- */
@media (max-width: 800px) {
    .TimeModalBody {
        flex-direction: column; /* Zawija minuty pod spód! */
        padding: 12px;
        gap: 10px;
    }

    .TimeModalSideGrid {
        border-left: none; /* Usuwa lewą kreskę */
        padding-left: 0;
        border-top: 1px solid rgba(255,255,255,0.1); /* Przenosi kreskę na górę jako separator */
        padding-top: 10px;
    }

    /* Skoro minuty są teraz na dole i mają dużo szerokości, układamy je w 6 kolumn (2 rzędy zamiast 6) */
    .MinutesGrid { 
        grid-template-columns: repeat(6, 1fr); 
    }

    
    /* 1. Maksymalne spłaszczenie kafelków */
    .TimeBox.TypeDay { 
        padding: 4px 2px !important; /* Minimalny padding góra/dół */
    }
    .TimeBox.TypeTime { 
        padding: 4px 0 !important; 
        font-size: 14px !important; /* Oczko mniejszy font dla cyfr */
    }
    .TimeBox .DayName { 
        font-size: 12px !important; 
        margin-bottom: 0px !important; /* Usuwamy odstęp pod nazwą dnia */
    }
    .TimeBox .DayDate { 
        font-size: 10px !important; 
    }

    /* 2. Ciaśniejsza siatka (mniej pustego miejsca między kafelkami) */
    .TimeGrid {
        gap: 4px !important;
    }

    /* 3. Poprawa nagłówka - ratujemy miejsce i zapobiegamy brzydkiemu łamaniu */
    .TimeModalHeader {
        padding: 8px 10px !important;
    }
    
    #ModalHeaderTitle {
        font-size: 13px !important; /* Mniejszy font daty */
        text-align: center;
        line-height: 1.2;
        padding: 0 5px;
        /* Jeśli data nadal się łamie, możemy wymusić jedną linię i lekkie ściśnienie: */
        white-space: nowrap; 
        letter-spacing: -0.5px;
    }
    
    .TimeModalHeader .GlassActionBtn {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    
    .TimeTravelTriggerBtn {
        width: 100%;
        max-width: 260px; /* Bezpieczna szerokość dla telefonów */
        font-size: 14px; /* Mniejszy font, żeby wszystko weszło */
        padding: 10px 15px;
        white-space: nowrap; /* Kategoryczny zakaz łamania tekstu do nowej linii! */
        letter-spacing: 0;
    }
}