/**
 * Style dla grafiku zajęć
 */

.jksystem-grafik-container {
    margin: 20px 0;
    overflow-x: auto;
    position: relative;
}

/* Desktop - pełna szerokość, 6 kolumn */
@media (min-width: 769px) {
    .jksystem-grafik-container {
        overflow-x: auto; /* Scroll tylko gdy tabela jest szersza */
        overflow-y: auto; /* Dla sticky */
        max-height: 80vh; /* Dla sticky header */
    }
    
    .grafik-table {
        width: 100%;
        min-width: 800px; /* Minimalna szerokość dla desktop */
    }
    
    /* Sticky nagłówki na desktop */
    .grafik-table thead th {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 100;
        background: #078521; /* Zielony kolor akcent - musi mieć background dla sticky */
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
        border-bottom: 1px solid transparent;
        border-top: none; /* Bez górnego obrysu */
    }
}

.grafik-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px 4px; /* Poziomo 10px, pionowo 4px – mniejsze przerwy między wierszami */
    margin: 0;
    background: #fff;
    table-layout: fixed;
}

.grafik-table thead {
    background: #078521; /* Zielony kolor akcent */
    color: white;
}

.grafik-table th {
    padding: 15px;
    text-align: center;
    font-weight: bold;
    text-transform: capitalize;
    border: 1px solid transparent;
    width: calc(100% / 6); /* Równa szerokość dla 6 kolumn */
}

.grafik-table tbody tr {
    border-bottom: 1px solid transparent;
}

/* Białe pole 30-40px między blokiem przedpołudniowym a popołudniowym */
.grafik-table tbody tr.grafik-spacer-row td {
    height: 35px;
    min-height: 35px;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    vertical-align: top;
}

/* Blok popołudniowy: taka sama szerokość jak tabela - używamy display: table */
.grafik-afternoon-grid {
    display: table;
    width: 100%;
    min-width: 800px;
    margin-top: 50px;
    border-collapse: separate;
    border-spacing: 10px 4px;
    table-layout: fixed;
}

.grafik-afternoon-column {
    display: table-cell;
    width: calc(100% / 6);
    vertical-align: top;
}

/* Każde wydarzenie w bloku popołudniowym ma taką samą wysokość jak rano (114px) */
.grafik-afternoon-column .grafik-cell {
    display: block;
    height: 114px;
    min-height: 114px;
    max-height: 114px;
    overflow: hidden;
    margin-bottom: 4px;
}

.grafik-afternoon-column .grafik-cell:last-child {
    margin-bottom: 0;
}

.grafik-afternoon-column .grafik-cell .grafik-cell-content {
    overflow: hidden;
    text-overflow: ellipsis;
}

.grafik-table tbody tr:last-child {
    border-bottom: 1px solid transparent;
}

.grafik-table td {
    padding: 0 !important;
    border: 1px solid transparent;
    vertical-align: top;
    width: calc(100% / 6) !important; /* Równa szerokość dla 6 kolumn */
    height: 114px;
    box-sizing: border-box;
}

.grafik-table td:empty {
    background: transparent;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
}

/* Wiersze popołudniowe – niższe, żeby ograniczyć puste miejsca */
.grafik-table tbody tr.grafik-afternoon-row td {
    height: 70px;
}

.grafik-table tbody tr.grafik-afternoon-row td .grafik-cell {
    min-height: 68px;
}

/* Ukryj puste komórki w bloku popołudniowym */
.grafik-table tbody tr.grafik-afternoon-row td.grafik-cell-empty {
    visibility: hidden;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.grafik-cell {
    padding: 10px;
    height: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: opacity 0.2s;
    cursor: pointer;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid transparent; /* Obrys wokół wydarzenia */
}

.grafik-cell:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.grafik-cell-content {
    width: 100%;
    box-sizing: border-box;
}

.grafik-time {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 5px;
}

.grafik-name {
    font-size: 13px;
    margin-bottom: 3px;
    line-height: 1.3;
}

.grafik-instructor {
    font-size: 11px;
    opacity: 0.9;
    font-style: italic;
}

/* Kolory komórek */
.grafik-cell[data-kolor="#3498db"] {
    background-color: #3498db !important; /* niebieski - kursy */
    color: white;
}

.grafik-cell[data-kolor="#e74c3c"] {
    background-color: #e74c3c !important; /* czerwony - średnio zaawansowana */
    color: white;
}

.grafik-cell[data-kolor="#2c3e50"] {
    background-color: #2c3e50 !important; /* czarny - normalne */
    color: white;
}

.grafik-cell[data-kolor="#27ae60"] {
    background-color: #27ae60 !important; /* zielony */
    color: white;
}

.grafik-cell[data-kolor="#f39c12"] {
    background-color: #f39c12 !important; /* pomarańczowy */
    color: white;
}

/* Responsywność */
@media (max-width: 768px) {
    /* KLUCZOWE: Container musi mieć max-height i overflow-y aby sticky działało */
    .jksystem-grafik-container {
        overflow-x: auto;
        overflow-y: auto; /* MUSI być auto, nie visible! */
        max-height: 80vh; /* Wysokość kontenera - kluczowe dla sticky */
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        position: relative;
        margin: 20px 0;
        padding: 0;
    }
    
    /* Tabela - szerokość 200vw dla 6 kolumn */
    .grafik-table {
        font-size: 12px;
        width: calc(100vw * 2);
        min-width: calc(100vw * 2);
        table-layout: fixed;
        border-collapse: collapse;
    }
    
    /* Sticky nagłówki - teraz będzie działać! */
    .grafik-table thead th {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 100;
        width: calc(100vw / 3) !important;
        min-width: calc(100vw / 3) !important;
        max-width: calc(100vw / 3) !important;
        padding: 10px 6px;
        background: #078521 !important; /* Zielony kolor akcent - taki sam jak desktop */
        box-sizing: border-box;
        scroll-snap-align: start;
    }
    
    /* Kolumny w tbody */
    .grafik-table td {
        width: calc(100vw / 3) !important;
        min-width: calc(100vw / 3) !important;
        max-width: calc(100vw / 3) !important;
        padding: 10px 6px;
        scroll-snap-align: start;
        box-sizing: border-box;
        height: 114px;
        min-height: 114px;
    }
    
    /* Każda kolumna = ~33vw (1/3 ekranu) */
    .grafik-table th,
    .grafik-table td {
        width: calc(100vw / 3) !important;
        min-width: calc(100vw / 3) !important;
        max-width: calc(100vw / 3) !important;
        padding: 10px 6px;
        scroll-snap-align: start; /* Snap każdej kolumny */
        box-sizing: border-box;
    }
    
    /* Fonty dla komórek - trochę większe dla lepszej czytelności */
    .grafik-time {
        font-size: 12px;
        margin-bottom: 4px;
        font-weight: 700;
    }
    
    .grafik-name {
        font-size: 11px;
        line-height: 1.3;
        margin-bottom: 3px;
    }
    
    .grafik-instructor {
        font-size: 10px;
        opacity: 0.9;
    }
    
    /* Wysokość komórek */
    .grafik-table td {
        height: 114px;
        min-height: 114px;
    }
    
    /* Spacer poranne/popołudniowe – 35px białego pola na mobile */
    .grafik-table tbody tr.grafik-spacer-row td {
        height: 35px;
        min-height: 35px;
    }
    
    /* Blok popołudniowy – ta sama szerokość i kolumny co tabela (border-collapse, bez gap) */
    .grafik-afternoon-grid {
        min-width: calc(100vw * 2);
        width: calc(100vw * 2);
        grid-template-columns: repeat(6, calc(100vw / 3));
        gap: 4px 0;
    }
    
    .grafik-afternoon-column {
        min-width: calc(100vw / 3);
        width: 100%;
        scroll-snap-align: start;
    }
    
    /* Padding dla komórek z treścią */
    .grafik-cell {
        padding: 8px 6px;
    }
    
    /* Hover na mobile - lekko przytłumiony efekt */
    .grafik-cell:hover {
        transform: none; /* Wyłączamy scale na mobile */
        opacity: 0.95;
    }
    
    /* Upewnij się że kolory wydarzeń są takie same jak na desktop */
    .grafik-cell[data-kolor] {
        /* Kolory są ustawiane przez inline style i selektory data-kolor - zachowaj je */
    }
    
    /* Kolory komórek - takie same na mobile jak desktop */
    .grafik-cell[data-kolor="#3498db"] {
        background-color: #3498db !important;
        color: white !important;
    }
    
    .grafik-cell[data-kolor="#e74c3c"] {
        background-color: #e74c3c !important;
        color: white !important;
    }
    
    .grafik-cell[data-kolor="#2c3e50"] {
        background-color: #2c3e50 !important;
        color: white !important;
    }
    
    .grafik-cell[data-kolor="#27ae60"] {
        background-color: #27ae60 !important;
        color: white !important;
    }
    
    .grafik-cell[data-kolor="#f39c12"] {
        background-color: #f39c12 !important;
        color: white !important;
    }
}

/* Informacja o terminie zajęć */
.single-course-schedule {
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 16px !important;
    color: rgba(34, 34, 34, 1) !important;
    font-weight: 300 !important;
}

.single-course-schedule p {
    margin: 0;
    font-size: 16px !important;
    line-height: 1.9em;
    color: rgba(34, 34, 34, 1) !important;
    font-weight: 300 !important;
}

.single-course-schedule strong {
    color: var(--color-primary, #078521);
    font-weight: 600;
}

.single-course-schedule a {
    color: #078521 !important;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.single-course-schedule a:hover {
    color: #000 !important;
    text-decoration: none;
}

/* Komunikat o braku zajęć w grafiku */
.single-course-schedule-no-classes p {
    color: #696969;
    font-style: italic;
}

/* Lista terminów zajęć na stronie pojedynczych zajęć */
.single-course-terminy-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.single-course-terminy-list li {
    margin-bottom: 8px !important;
    font-size: 16px !important;
    line-height: 1.9em !important;
    color: rgba(34, 34, 34, 1) !important;
    font-weight: 300 !important;
}

.single-course-terminy-list li:last-child {
    margin-bottom: 0;
}

.single-course-terminy-list strong {
    color: var(--color-primary, #078521) !important;
    font-weight: 600 !important;
}

.single-course-terminy-list .btn-reserve-course {
    display: inline-block;
    margin-top: 8px;
    color: #fff !important;
}

.single-course-terminy-list .btn-reserve-course:hover {
    background: #000 !important;
    color: #fff !important;
}

/* Przyciski CTA na stronach single */
.single-course-cta {
    margin-top: 0;
    text-align: left;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}

.btn-buy-entry,
.btn-reserve-course,
.btn-available-courses {
    display: inline-block !important;
    padding: 7px 30px !important;
    background: var(--color-primary, #078521) !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 30px !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
}

.btn-buy-entry:hover,
.btn-reserve-course:hover {
    background: #000 !important;
    color: #fff !important;
}

.btn-available-courses {
    background: var(--color-primary, #078521);
}

.btn-available-courses:hover {
    background: #000;
    color: #fff !important;
}

/* Przycisk "Grafik zajęć" - styl jak w modalu */
.btn-grafik-link {
    display: inline-block !important;
    padding: 7px 30px !important;
    background: transparent !important;
    color: #078521 !important;
    border: 1px solid #078521 !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    line-height: 30px !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    cursor: pointer;
}

.btn-grafik-link:hover {
    background: #078521 !important;
    color: #fff !important;
    border-color: #078521 !important;
}

/* Przycisk w modalu grafiku */
#modal-buy-entry.btn-reserve {
    background: var(--color-primary, #078521);
    color: #fff !important;
}

#modal-buy-entry.btn-reserve:hover {
    background: #000;
    color: #fff !important;
}

/* Responsywność */
@media (max-width: 768px) {
    .single-course-cta {
        text-align: center;
        flex-direction: column;
    }
    
    .btn-buy-entry,
    .btn-reserve-course,
    .btn-available-courses,
    .btn-grafik-link {
        display: block;
        width: 100%;
        max-width: 300px;
        margin: 0 auto 10px auto;
    }
    
    .btn-grafik-link {
        margin-bottom: 0;
    }
}