/* Panele strefy klienta: ogłoszeniodawca, przedstawiciel, raport kierownika.
   Kolory, czcionki i przyciski z serwis.css (zmienne --ink, --marka, klasa .przycisk) - tu tylko to, co specyficzne dla paneli. */

.panel { max-width: var(--szerokosc); margin: 0 auto; padding: 32px 24px 16px; }
.panel h1 { margin: 0 0 6px; }
.panel h2 { margin: 32px 0 12px; font-size: 22px; }
.panel h3 { margin: 0 0 10px; }
.panel .podtytul { margin: 0 0 18px; color: var(--szary); }
.panel .akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0; }

/* Przyciski w panelach: klasa .przycisk z serwis.css + dotychczasowe warianty. */
/* :where() - zerowa waga selektora, żeby warianty (.jasny, .niebezpieczny) zawsze wygrywały. */
.panel input[type="submit"], .panel button:where(:not(.link):not(.galeria__krok)) {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px;
	border: 1px solid transparent; border-radius: 10px; background: var(--marka); color: var(--na-marce);
	font-weight: 600; font-size: 15px; cursor: pointer;
}
.panel input[type="submit"]:hover, .panel button:where(:not(.link)):hover { background: var(--marka-ciemna); }
.panel .przycisk.jasny, .panel button.jasny { background: #FFFFFF; color: var(--ink); border-color: var(--linia); }
.panel .przycisk.jasny:hover, .panel button.jasny:hover { background: var(--tlo); color: var(--ink); }
.panel .przycisk.niebezpieczny, .panel button.niebezpieczny { background: var(--blad); color: #FFFFFF; }
.panel .przycisk.niebezpieczny:hover, .panel button.niebezpieczny:hover { background: #7E251C; }
.panel form.w-linii { display: inline; }

.panel table { width: 100%; border-collapse: collapse; background: #FFFFFF; }
.panel th, .panel td { padding: 10px 12px; border-bottom: 1px solid var(--linia); text-align: left; vertical-align: middle; }
.panel thead th { background: var(--tlo); color: var(--szary); font-size: 13px; font-weight: 600; }
.panel tbody th { width: 200px; background: var(--tlo); color: var(--szary); font-weight: 500; }
.panel .pusto { padding: 18px; border-radius: 12px; background: var(--tlo); color: var(--szary); text-align: left; }
.panel .znacznik { display: inline-block; padding: 2px 10px; border: 0; border-radius: 999px; background: var(--tlo); color: var(--ink); font-size: 13px; font-weight: 600; }
.panel .znacznik.ok { background: var(--ok-tlo); color: var(--ok); }
.panel .znacznik.uwaga { background: var(--uwaga-tlo); color: var(--uwaga); }
.panel .komunikat-ok { padding: 12px 16px; border-radius: 10px; background: var(--ok-tlo); color: var(--ok); }

/* Formularze paneli (realestate/panel/_pola.html) */
.panel fieldset { margin: 0 0 18px; padding: 18px 20px 8px; border: 1px solid var(--linia); border-radius: var(--promien-duzy); }
.panel legend { padding: 0 6px; font-family: var(--font-naglowki); font-weight: 700; }
.panel .pola { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 20px; }
.panel .pole { display: block; margin: 0 0 14px; }
.panel .pole.szerokie { grid-column: 1 / -1; }
.panel .pole label { display: block; margin: 0 0 5px; color: var(--szary); font-size: 13px; font-weight: 600; }
.panel .pole input:not([type="checkbox"]):not([type="submit"]), .panel .pole select, .panel .pole textarea {
	width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--linia); border-radius: 10px; background: #FFFFFF; font-size: 15px;
}
.panel .pole textarea { resize: vertical; }
.panel .pole .pomoc { color: var(--szary); font-size: 13px; }
.panel .pole .bledy, .panel .bledy { margin: 4px 0 0; padding: 0; list-style: none; color: var(--blad); font-size: 13px; }
.panel .pole.blad input, .panel .pole.blad select, .panel .pole.blad textarea { border-color: var(--blad); }
.panel .wybory { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px; margin: 0 0 12px; }
.panel .wybory label { display: flex; align-items: center; gap: 8px; }
.panel .wybory input { width: 18px; height: 18px; accent-color: var(--marka); }
.panel .filtr-okresu label { display: flex; gap: 6px; align-items: center; }
.panel .filtr-okresu input { min-height: 44px; padding: 8px 10px; border: 1px solid var(--linia); border-radius: 10px; }

/* Wybór typu ogłoszenia, galeria zdjęć ogłoszenia */
.panel .typy { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.panel .typ { padding: 16px 18px; border: 1px solid var(--linia); border-radius: 14px; }
.panel .typ a { display: block; margin: 6px 0; }
.panel .galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin: 0 0 18px; }
.panel .galeria figure { margin: 0; padding: 8px; border: 1px solid var(--linia); border-radius: 12px; }
.panel .galeria img { width: 100%; height: 130px; object-fit: cover; border-radius: 8px; }
.panel .galeria figcaption { margin: 8px 0; font-size: 14px; }

/* Zakładki i kafelki strefy przedstawiciela */
.panel .zakladki { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; padding-bottom: 10px; border-bottom: 1px solid var(--linia); }
.panel .zakladki a { padding: 8px 14px; border: 0; border-radius: 10px; color: var(--ink); font-weight: 600; text-decoration: none; }
.panel .zakladki a:hover { background: var(--tlo); }
.panel .zakladki a.aktywna { background: var(--ink); color: #FFFFFF; }
.panel .zakladki.male { margin: 8px 0 14px; padding: 0; border: 0; }
.panel .zakladki.male a { padding: 5px 12px; border-radius: 999px; background: var(--tlo); font-size: 14px; }
.panel .zakladki.male a.aktywna { background: var(--ink); }
.panel .kafelki { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0 0 10px; }
.panel .kafelek { display: block; padding: 14px 16px; border: 1px solid var(--linia); border-radius: 14px; color: var(--szary); text-decoration: none; }
.panel .kafelek strong { display: block; margin-bottom: 2px; color: var(--ink); font-family: var(--font-naglowki); font-size: 22px; }
.panel a.kafelek:hover { border-color: var(--ink); }

/* Zapytania kupujących (realestate/panel/_zapytania.html) */
.panel .karta-zapytania { padding: 18px 20px; border: 1px solid var(--linia); border-radius: 14px; margin: 0 0 14px; }
.panel .karta-zapytania p { margin: 0 0 8px; }

/* Raport kierownika: szeroka tabela przewijana w poziomie */
.panel .przewijana { overflow-x: auto; border: 1px solid var(--linia); border-radius: 12px; }
.panel table.raport th, .panel table.raport td { white-space: nowrap; }
.panel table.raport td.liczba, .panel table.raport th.liczba { text-align: right; }
.panel table.raport tfoot th { background: var(--tlo); color: var(--ink); font-weight: 700; }

@media (max-width: 700px) {
	.panel { padding: 20px 16px 8px; }
	.panel table:not(.raport), .panel table:not(.raport) thead, .panel table:not(.raport) tbody,
	.panel table:not(.raport) tr, .panel table:not(.raport) th, .panel table:not(.raport) td { display: block; }
	.panel table:not(.raport) thead { display: none; }
	.panel table:not(.raport) tr { padding: 10px 0; border-bottom: 1px solid var(--linia); }
	.panel table:not(.raport) td { padding: 3px 0; border: 0; }
	.panel tbody th { width: auto; padding: 6px 0 0; background: none; font-size: 13px; }
}