body { 
    font-family: Arial, sans-serif; 
    background: #f4f7f6; 
    margin: 15px; 
    color: #333; 
}
.header {
    text-align: center;
	padding-bottom: 25px;
}

/* Pasek nawigacji (strzałki + nazwa miesiąca) */
.navigation { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 20px; 
    gap: 15px; 
}

.nav-btn { 
    background: #007bf5; 
    color: white; 
    text-decoration: none; 
    padding: 8px 16px; 
    border-radius: 5px; 
    font-weight: bold; 
    font-size: 16px; 
    transition: background 0.2s; 
}

.nav-btn:hover { 
    background: #0056b3; 
}

.nav-spacer { 
    min-width: 45px; 
    height: 35px; 
} 

.current-month-title { 
    font-size: 22px; 
    font-weight: bold; 
    min-width: 160px; 
    text-align: center; 
}

.current-month-title a { 
    color: #333; 
    text-decoration: none; 
    transition: color 0.2s; 
}

/* Efekt najechania na nazwę miesiąca */
.current-month-title a:hover {
    color: #007bf5; 
    text-decoration: none; 
}

/* Centrowanie kontenera z tabelami i obsługa poziomego scrolla */
.tables-container { 
    display: flex; 
    flex-wrap: nowrap; 
    overflow-x: auto; 
    gap: 15px; 
    align-items: flex-start; 
    padding-bottom: 15px;
    justify-content: center; 
}

/* Zapewnienie poprawnych punktów granicznych przy przewijaniu */
.tables-container::before,
.tables-container::after {
    content: '';
    display: block;
    flex: 0 0 1px;
}

/* Pojedyncza kolumna / karta roku */
.year-table-wrapper { 
    background: white; 
    border-radius: 6px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
    padding: 10px; 
    flex: 0 0 auto; 
    width: 260px; 
}

.year-title { 
    text-align: center; 
    font-size: 18px; 
    margin-top: 0; 
    margin-bottom: 10px; 
    color: #007bf5; 
    border-bottom: 2px solid #f4f7f6; 
    padding-bottom: 5px; 
}

/* Struktura tabeli */
table { 
    width: 100%; 
    border-collapse: collapse; 
    font-size: 12px; 
    text-align: center; 
    table-layout: fixed; 
}

/* Szerokości kolumn w tabeli (Razem 100%) */
th:nth-child(1), td:nth-child(1) { width: 12%; } 
th:nth-child(2), td:nth-child(2) { width: 31%; } 
th:nth-child(3), td:nth-child(3) { width: 31%; } 
th:nth-child(4), td:nth-child(4) { width: 26%; } 

th, td { 
    padding: 4px 2px; 
    border-bottom: 1px solid #eee; 
    overflow: hidden; 
    white-space: nowrap;
    height: 28px; 
    vertical-align: middle; 
}

th { 
    background-color: #f8f9fa; 
    color: #666; 
    font-weight: 600; 
    font-size: 10px; 
    height: 20px; 
}

/* Wyświetlanie godzin pod temperaturą */
small { 
    color: #777; 
    font-size: 10px; 
    display: block; 
    margin-top: -1px; 
}

/* --- REWOLUCJA W KOLOROWANIU (WYMUSZENIE WYSOKIEGO PRIORYTETU) --- */

/* Weekend - Sobota (Kolorujemy tylko pierwszą komórkę <td> w wierszu .weekend-sat) */
table tr.weekend-sat td:first-child { 
    background-color: #e3f2fd !important; 
    color: #0056b3 !important; 
}

/* Weekend - Niedziela (Kolorujemy tylko pierwszą komórkę <td> w wierszu .weekend-sun) */
table tr.weekend-sun td:first-child { 
    background-color: #ffebee !important; 
    color: #c82333 !important; 
}

/* Absolutne rekordy dobowe (minima i maksima jako tła komórek) */
table tr td.absolute-min { 
    background-color: #e3f2fd !important; 
    color: #0d47a1 !important; 
    font-weight: bold !important; 
}

table tr td.absolute-max { 
    background-color: #ffebee !important; 
    color: #b71c1c !important; 
    font-weight: bold !important; 
}

/* Kolory dla spanów wewnątrz kolumny Różnica (tekst czerwony/niebieski) */
table tr td span.text-up { 
    color: #c82333 !important; 
    font-weight: 500;
}

table tr td span.text-down { 
    color: #0056b3 !important; 
    font-weight: 500;
}