body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

main {
    flex-grow: 1; /* zajęcie całej dostępnej przestrzeni */
    padding: 20px 40px;
    background-color: #fff;
}

.main-banner {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center; /* wyśrodkuj tekst i elementy inline */
    overflow: hidden; 
}

.banner-img {
    width: 100%; /* obraz zajmuje całą szerokość */
    max-width: 100%;
    height: auto; 
    display: block; /* ustaw obraz jako blok */
    margin-left: auto;
    margin-right: auto;
}

h1, h2 {
    color: #004d99;
    border-bottom: 2px solid #ccc;
    padding-bottom: 5px;
}

/* Utility classes used by page content */
.text-accent {
    color: #004d99; /* match main heading color for good contrast */
}

.text-center {
    text-align: center;
}

/* Prevent the global header styles (banner) from affecting page-local header elements */
header.page-intro {
    flex-grow: 1; /* zajęcie całej dostępnej przestrzeni */
    background: transparent;
    color: inherit;
    padding: 0;
}

/* Page-level helpers */
.lead {
    flex-grow: 1; /* zajęcie całej dostępnej przestrzeni */
    font-size: 1.15rem;
    color: #2c3e50;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Margin utility */
.mt-30 { margin-top: 30px; }

/* Small margins */
.mt-10 { margin-top: 10px; }
.mb-10 { margin-bottom: 10px; }

/* Status helpers used by JS-generated content */
.status-yes { color: blue; font-weight: bold; }
.status-no { color: rgb(187, 175, 4); font-weight: bold; }

/* Map helper sizes */
.map-500 { height: 500px; width: 100%; }

.notice {
    background: #fff3f2;
    border: 1px solid #f1c0bb;
    padding: 12px;
    border-radius: 6px;
    margin: 12px 0;
}

.image-right {
    float: right;
    margin-left: 1rem;
    margin-bottom: 1rem;
    max-width: 320px;
}

/* Utilities for interactive elements */
.fw-bold { font-weight: 700; }
.hidden { display: none !important; }

/* Details spacing helper */
.details--spff { margin-top: 20px; }

/* Modal for KML preview */
.modal-overlay {
    display: none;
    position: fixed;
    left: 0; right: 0; top: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.modal-content {
    background: #fff;
    max-width: 900px;
    width: 90%;
    height: 80%;
    position: relative;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border-radius: 6px;
}

.modal-close { position: absolute; right: 10px; top: 10px; z-index: 10100; }
.modal-title { margin-top: 0; }
.modal-body { width: 100%; height: calc(100% - 40px); }

/* Tooltip used for SPFF hover */
.tooltip {
    display: none;
    position: fixed;
    pointer-events: none;
    z-index: 11000;
    max-width: 320px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.15);
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    font-size: 13px;
    line-height: 1.2;
}

.tooltip-desc { margin-top: 6px; color: #333; }

/* Button variants */
.btn-danger { background: #dc3545; }
.btn-primary { background: #007cba; }
.btn { padding: 10px 20px; font-size: 16px; color: white; border: none; cursor: pointer; }

/* Small helpers for project pages */
.notice-title { color: #e03e2d; text-decoration: underline; }
.buycoffee-img { max-width:100%; height:auto; }

header {
    background-color: #004d99; /* kolor dla nagłówka */
    color: white;
    padding: 10px 0;
}

footer {
    text-align: center;
    padding: 10px;
    background-color: #333;
    color: white;
}

.page-wrapper {
    display: flex;
    min-height: 100vh;
}

.content-wrapper {
    flex-grow: 1; /* zajęcie całej dostępnej szerokości */
    display: flex; /* 'Flexbox', aby kontrolować układ w pionie */
    flex-direction: column; /* ułóż elementy pionowo */
    min-height: 100vh; /* wysokość, by main zajęło resztę miejsca */
}

nav ul {
    width: 250px; /* Szerokość menu bocznego */
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.nav-title {
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    margin-bottom: 5px;
    border-bottom: 1px solid #4a627a;
}

.side-nav {
    width: 250px; /* Szerokość menu bocznego */
    background-color: #2c3e50; /* tło dla menu */
    color: white;
    padding-top: 10px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.side-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-nav ul li,
.side-nav ul li a,
.side-nav .nav-title {
    margin: 0; 
}

.side-nav ul li a,
.side-nav .nav-title {
    display: block;
    padding: 6px 15px; 
    color: white;
    text-decoration: none;
    transition: background-color 0.3s;
}

.side-nav ul li.has-submenu {
    position: relative; /* kontekst pozycjonowania dla podmenu */
}

/* Domyślne ukrycie podmenu i ustawienie pozycji bezwzględnej */
.side-nav ul .submenu {
    display: none; /* Metoda ukrycia */
    position: absolute; /* KLUCZOWE: Wyrywa element z układu */
    
    top: 0; /* Ustawia podmenu na tej samej wysokości co element rodzica */
    left: 100px; /* Ustawia podmenu zaraz za prawą krawędzią rodzica */
    
    min-width: 400px; /* Zapewnia wystarczającą szerokość podmenu */
    z-index: 1000; /* Zapewnia, że podmenu jest nad innymi elementami */
    background-color: #033970; /* Zapewnia spójne tło */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); /* Lekki cień, by odróżnić od tła */
}

.side-nav ul li a:hover {
    background-color: #34495e; /* ciemniejszy po najechaniu */
}

/* ROZWIJANE PODMENU */
.submenu {
    list-style: none;
    padding: 0;
    /* UKRYCIE PODMENU */
    max-height: 0; 
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    background-color: #3f5d79; /* kolor dla podmenu */
}

.submenu li a {
    padding: 5px 30px !important; 
    font-size: 0.9em;
}


/* WIDOCZNOŚĆ PODMENU PO NAJECHANIU NA RODZICA */
.has-submenu:hover > .submenu {
    max-height: 500px;
}

.side-nav ul li.has-submenu:hover > .submenu {
    display: block; /* Odkrywa podmenu w pozycji absolute */
}

#map {
    height: 1000px;
    width: 100%;
    margin-top: 20px;
}




/* - Stylowanie Formularza Kontaktowego */

.contact-form {
    max-width: 600px;
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.contact-form label {
    display: block;
    margin-bottom: 5px;
    margin-top: 15px;
    font-weight: bold;
}

/* POLA JEDNOWIERSZOWE (mniejsza wysokość) */
.content-wrapper .contact-form input[type="text"],
.content-wrapper .contact-form input[type="email"] {
    width: 100%;
    padding: 6px 10px; 
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box !important; 
}

/* POLE WIELOWIERSZOWE (większa wysokość) */
.content-wrapper .contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box !important; 
    
    resize: vertical;
    min-height: 150px;
}

.contact-form textarea {
    resize: vertical; /* pozwala użytkownikowi zmieniać wysokość */
    min-height: 150px; /* ustawienie minimalnej wysokości */
}

.contact-form button[type="submit"] {
    background-color: #004d99;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    margin-top: 20px;
    transition: background-color 0.3s;
}

.contact-form button[type="submit"]:hover {
    background-color: #003366;
}

/* Stylowanie komunikatów statusu */
.success {
    padding: 10px;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    border-radius: 4px;
}

.error {
    padding: 10px;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    border-radius: 4px;
}



/* style z plików oryginalnych */

.wpisz-znak-container { 		/* używamy flexbox dla umieszczenia elementów w jednym rzędzie */
	display: flex;
	flex-wrap: wrap; 	/* zezwala na przechodzenie do nowej linii, gdy nie ma miejsca */
	gap: 20px; /* odstęp między głównymi elementami (pole wyszukiwania i filtry) */
	background: #f5f5f5; 
	padding: 20px; 
	border-radius: 8px; 
	margin-bottom: 20px; 
}
		
.search-controls {		/* kontener dla pola wyszukiwania i przycisku */
	display: flex;
	flex-direction: column; 
	min-width: 300px; 	/*  szerokość dla pola wyszukiwania */
}
		
input[type="text"], select { 
	padding: 10px; 
	font-size: 16px; 
	margin-right: 10px;
}
		
input[type="text"] {
	width: 150px;
}
		
.filter-group {			/* utrzymujemy ukrywanie, ale zmieniamy styl, by działał z flexbox */
	display: none; 
	flex-direction: column; /* ustawienie elementów w kolumnie wewnątrz filtra */
	margin-top: 0; 		/* usuwamy górny margines, aby być na wysokości pola wyszukiwania */
	padding-top: 0; 
	border-top: none; 
	padding-left: 15px; /* dodajemy lekki margines z lewej strony filtra */
	border-left: 1px solid #ddd; /* dodajemy pionową linię oddzielającą */
}

button { 
	padding: 10px 20px; 
	font-size: 16px; 
	background: #007cba; 
	color: white; 
	border: none; 
	cursor: pointer; 
}

button:hover {
	background-color: #0056b3; 
}
               
#resultsTable { width: 100%; border-collapse: collapse; margin-top: 20px; }
#resultsTable th, #resultsTable td { border: 1px solid #ddd; padding: 8px; }
#resultsTable th { background-color: #f2f2f2; text-align: left; cursor: pointer; }
       
#map-hidden-container { width: 100%; margin-top: 20px; }
#map-container { position: relative; width: 100%; height: 600px; border: 1px solid #ccc; }
#map-loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 15px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	font-size: 1.2em;
	color: #333;
	z-index: 100;
}
        
.result-message { 
	padding: 10px; 
	margin-top: 10px; 
	background-color: #e9ecef; 
	border-radius: 4px; 
	text-align: center; 
	font-weight: bold;
}
        
.selected-row { 
	background-color: #f0f8ff !important; 
	font-weight: bold; 
}


    /* Style dla mapy */
#mapContainer {
	border: 1px solid #ddd;
	border-radius: 5px;
	position: relative; 
}
		
#mapLoader {
	display: none; 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	background: rgba(255, 255, 255, 0.9); 
	z-index: 10; 
	line-height: 500px; 
	font-size: 1.5em; 
	color: #555;
	text-align: center;
}
		
.map-buttons-group {
	display: flex;
	gap: 10px;
	margin-bottom: 15px;
}
		
#toggleAllPgaButton {
	display: none; 
}



.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.95em;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

.data-table th, 
.data-table td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
}

.data-table th {
    background-color: #004d99; /* kolor nagłówka tabeli */
    color: white;
    font-weight: bold;
}

.data-table tr:nth-child(even) {
    background-color: #f9f9f9; /* paski co drugi wiersz */
}

.data-table tr:hover {
    background-color: #f1f1f1; /* podświetlenie wiersza po najechaniu */
}


table.tabela-spff {width: 100%; border-collapse: collapse; font-family: sans-serif; font-size: 16px;}
table.tabela-spff th, table.tabela-spff td {border: 1px solid #ddd; padding: 8px; vertical-align: top;}
table.tabela-spff tr:nth-child(even) {background-color: #f9f9f9;}
table.tabela-spff tr:hover {background-color: #f1f1f1;}
table.tabela-spff a {color: #0645ad; text-decoration: none;}
table.tabela-spff a:hover {text-decoration: underline;}
table.tabela-spff span {font-weight: bold;}

table.tabela-spff th:nth-child(1),
table.tabela-spff td:nth-child(1) {width: 100px; /* szerokość dla 1 kolumny */}
table.tabela-spff th:nth-child(2),
table.tabela-spff td:nth-child(2) {width: 100px; /* szerokość dla 2 kolumny */}
table.tabela-spff th:nth-child(3),
table.tabela-spff td:nth-child(3) {width: 500px; /* szerokość dla 3 kolumny */}
table.tabela-spff th:nth-child(4),
table.tabela-spff td:nth-child(4) {width: 500px; /* szerokość dla 3 kolumny */}

table {border-collapse: collapse; width: 100%;}
table th {background-color: #004d99; /* kolor nagłówka tabeli */ color: white; border: 1px solid #aaa; padding: 5px; text-align: center;}
table td {border: 1px solid #aaa; text-align: center; height: 20px; /* Przykładowa wysokość komórki */ padding: 1px 8px; /* 4px góra/dół, 8px lewo/prawo */}
table td.pierwsza-kolumna {background-color: #ccff66; }
table td.wyrozniona {background-color: #66ff66; font-weight: bold;}

/* Ustawienia szerokości kolumn */
table th:nth-child(1),
table td:nth-child(1) {width: 150px; /* szerokość dla 1 kolumny */}
table th:nth-child(2),
table td:nth-child(2) {width: 100px; /* szerokość dla 2 kolumny */}
table th:nth-child(3),
table td:nth-child(3) {width: 100px; /* szerokość dla 3 kolumny */}
table th:nth-child(4),
table td:nth-child(4) {width: 100px; /* szerokość dla 4 kolumny */}
table th:nth-child(5),
table td:nth-child(5) {width: 100px; /* szerokość dla 5 kolumny */}
table th:nth-child(6),
table td:nth-child(6) {width: 100px; /* szerokość dla 6 kolumny */}
table th:nth-child(7),
table td:nth-child(7) {width: 100px; /* szerokość dla 7 kolumny */}
table th:nth-child(8),
table td:nth-child(8) {width: 100px; /* szerokość dla 8 kolumny */}
table th:nth-child(9),
table td:nth-child(9) {width: 100px; /* szerokość dla 9 kolumny */}
table th:nth-child(10),
table td:nth-child(10) {width: 100px; /* szerokość dla 10 kolumny */}
a[data-tooltip] {position: relative; cursor: pointer;}
a[data-tooltip]::after {content: attr(data-tooltip); position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); background-color: rgba(50, 50, 250, 0.9); color: #fff; padding: 6px 10px; border-radius: 6px; white-space: pre-line; font-size: 20px; line-height: 1.4; z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.2s; max-width: 500px; text-align: center;}
a[data-tooltip]:hover::after {opacity: 1;}