/*
 * iac-responsive.css — adaptacja panelu IAC do mniejszych monitorów i tabletów.
 *
 * Ładowany jako OSTATNI arkusz panelu (resources/views/partials/meta.blade.php),
 * po iac-modern.css.
 *
 * DLACZEGO TYLE !important:
 * panel-header.blade.php trzyma swoje style w bloku <style> wewnątrz <tr id="head">,
 * czyli w <body> — a więc PÓŹNIEJ w dokumencie niż ten <link> z <head>. Przy równej
 * specyficzności wygrywa reguła późniejsza, więc bez !important połowa nadpisań
 * po prostu by nie zadziałała. Do tego dochodzą style inline na elementach
 * (np. ul#topnav ma width: 1300px w atrybucie style).
 *
 * Zakres: 1600px → 768px. Monitory 1280/1366/1440/1600 oraz tablety
 * (landscape 1024–1366, portrait 768–834). Telefony (<600px) świadomie pominięte —
 * panel opiera się na tabelach o kilkunastu kolumnach.
 *
 * ZASADA NADRZĘDNA: powyżej 1600px nic się nie zmienia — wygląd zostaje 1:1
 * ze starym IAC.
 *
 * GEOMETRIA NAGŁÓWKA JEST NIETYKALNA
 * Zielony pas gradientu kończy się na 97px (złota kreska na 95px), niżej jest
 * szare tło. Zakładki zajmują 66–97px, podzakładki 98–125px (drugi rząd
 * .span2 od 133px) i są zielonymi kaflami leżącymi już na szarym.
 * Stąd dwie żelazne reguły:
 *   1. Rzędy zakładek i podzakładek NIGDY się nie zawijają — zawinięty wiersz
 *      wypadłby poniżej zielonego pasa, na szare tło, i zmienił kolorystykę.
 *      Zamiast zawijania: progresywne zmniejszanie, a w ostatniej instancji
 *      przewijanie w poziomie.
 *   2. Wysokości .iac-topbar (66px), kafla zakładki (26px) i .iac-navbar
 *      (88px / 105px dla dwóch rzędów) zostają bez zmian — od nich zależą
 *      sztywne offsety podmenu (top: 98px / 133px).
 */

/* ==========================================================================
   Pasek przewijania pasów zakładek — pojawia się dopiero przy przepełnieniu.
   Kciuk w ciemnej zieleni, bo tło pod nim (dół nagłówka) jest szare.
   ========================================================================== */
.iac-navbar,
ul#topnav > li > span.iac-menu-subtabs {
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 63, 54, 0.45) transparent;
}
.iac-navbar::-webkit-scrollbar,
ul#topnav > li > span.iac-menu-subtabs::-webkit-scrollbar {
	height: 6px;
}
.iac-navbar::-webkit-scrollbar-thumb,
ul#topnav > li > span.iac-menu-subtabs::-webkit-scrollbar-thumb {
	background: rgba(0, 63, 54, 0.45);
	border-radius: 3px;
}
.iac-navbar::-webkit-scrollbar-track,
ul#topnav > li > span.iac-menu-subtabs::-webkit-scrollbar-track {
	background: transparent;
}

/* ==========================================================================
   ≤1600px — podstawa: koniec z zawijaniem i z menu szerszym niż okno
   ========================================================================== */
@media (max-width: 1600px) {
	/*
	 * GÓRNY PASEK NA FLEXIE — to naprawia główny objaw „wszystko na siebie nachodzi”.
	 * Logo IAC (~411px), narzędzia (~820px) i logo Grobonet (~210px) są układane
	 * floatami. Przy ~1440px i mniej suma przestaje się mieścić i float z narzędziami
	 * spada do DRUGIEGO wiersza — a .iac-topbar ma sztywne 66px, więc narzędzia
	 * wychodzą poza pasek prosto na rząd zakładek, a podmenu (sztywne top: 98px)
	 * ląduje na jednym i drugim. Flex z nowrap fizycznie nie pozwala na drugi wiersz.
	 * order jest konieczny, bo w DOM logo Grobonet stoi PRZED narzędziami,
	 * a wizualnie ma być na końcu (efekt dwóch float: right).
	 */
	/*
	 * #container to tabela layoutowa, a tabela rozpycha się do szerokości
	 * MINIMALNEJ swojej treści. .iac-navbar z flex-wrap: nowrap ma min-content
	 * równe sumie zakładek (~1105px), więc przy oknie 1024px cały nagłówek
	 * robił się szerszy niż ekran, a html { overflow-x: hidden } ucinało
	 * ostatnie zakładki i kafel Grobonetu — bez żadnej możliwości dojechania.
	 * width: 0 + min-width: 100% to standardowa sztuczka na kontener
	 * przewijania w komórce tabeli: do szerokości minimalnej wnosi 0, a
	 * renderuje się na pełną szerokość komórki. Dopiero wtedy overflow-x: auto
	 * na .iac-navbar w ogóle ma szansę zadziałać.
	 */
	.iac-topbar, .iac-navbar {
		width: 0 !important;
		min-width: 100% !important;
	}

	.iac-topbar {
		display: flex !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
	}
	/*
	 * Logo IAC jest jedynym elementem paska, który może ustąpić: kafel Grobonetu
	 * przy prawej krawędzi musi zostać klikalny, a przyciski narzędzi mają
	 * nieściśliwe etykiety. Dzięki flex-shrink + max-width logo skaluje się samo,
	 * zamiast wypychać sąsiadów za krawędź okna — nie trzeba dobierać marginesów
	 * „na styk” pod konkretną szerokość.
	 */
	.iac-topbar .iac-brand {
		order: 1;
		flex: 0 1 auto;
		min-width: 0;
		margin: 0 0 0 10px !important;
	}
	.iac-topbar .iac-brand img {
		max-width: 100%;
		height: auto;
	}
	.iac-topbar .iac-topbar__tools {
		order: 2;
		flex: 0 0 auto;
		float: none !important;
		margin: 0 0 0 auto !important;
	}
	/*
	 * Bez tego flex ściskał przyciski i etykiety łamały się na dwie linijki
	 * („Moje / konto” przy 1280px). Miejsce zwalniamy chowaniem etykiet
	 * w kolejnych breakpointach, nie zgniataniem przycisków.
	 */
	.iac-topbar .iac-topbar__tools > .button,
	.iac-topbar .iac-topbar__tools > .dropdown,
	.iac-topbar .iac-topbar__tools > .iac-font-controls {
		flex: 0 0 auto;
	}
	.iac-topbar .iac-topbar__tools .button .label {
		white-space: nowrap;
	}
	.iac-topbar .iac-brand--grobonet {
		order: 3;
		flex: 0 0 auto;
		float: none !important;
		margin: 0 14px 0 10px !important;
	}

	/*
	 * Pas zakładek na flexie: jeden wiersz, bez zawijania. Gdy zabraknie
	 * miejsca, pas przewija się w poziomie — zakładki nie spadają na szare tło.
	 * Wysokości (88px / 105px z panel-header) zostają nienaruszone.
	 */
	.iac-navbar {
		display: flex !important;
		align-items: flex-start !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		/* Szerokość paska nie zależy od szerokości zakładek, więc przeliczenie
		   tabeli wyników nie przesuwa menu w bok. */
		contain: inline-size;
	}
	ul#topnav, ul#topnav_2 {
		display: flex !important;
		flex: 0 0 auto !important;
		flex-wrap: nowrap !important;
		float: none !important;
		width: auto !important;
		max-width: none !important;
	}
	/* margin-left: auto dociska drugie menu do prawej, dopóki jest wolne
	   miejsce; przy przepełnieniu flex zeruje je i menu idzie zaraz za pierwszym */
	ul#topnav_2 {
		margin-left: auto !important;
	}
	ul#topnav > li, ul#topnav_2 > li {
		float: none !important;
		flex: 0 0 auto !important;
	}

	/*
	 * Plakietki z licznikami: dwie poprawki naraz.
	 * 1. top: -10px — pas zakładek jest teraz kontenerem przewijania
	 *    (overflow != visible ⇒ obcina), więc -4px zostawia je wystające nad
	 *    kafel, ale już w obrębie paska.
	 * 2. left: 60/75/145px — te wartości były dobrane pod pełną szerokość
	 *    kafla. Po zmniejszeniu zakładek plakietka wychodziła na SĄSIEDNIĄ
	 *    zakładkę (np. „4” z Rejestracji lądowała na Terminarzu). Kotwiczymy
	 *    do prawej krawędzi własnego kafla — działa przy każdej szerokości.
	 */
	ul#topnav .newmessages,
	ul#topnav .nowezyciorysy,
	ul#topnav .nowerejestracje,
	ul#topnav #platnosci_online_licznik {
		top: -4px !important;
		left: auto !important;
		right: 2px !important;
	}
	/* Kafle z licznikiem dostają zapas po prawej, żeby plakietka miała własne
	   miejsce i nie kładła się na tekście zakładki */
	ul#topnav > li > a#lista-wiadomosci,
	ul#topnav > li > a#zyciorysy-lista-link,
	ul#topnav > li > a#rejestracje-lista-link,
	ul#topnav > li > a#faktury {
		padding-right: 22px !important;
	}

	/*
	 * Podzakładki: zamiast sztywnych 1150px / min-width 1350px — szerokość okna
	 * (element jest position:absolute bez pozycjonowanego przodka, więc 100%
	 * liczy się od viewportu). Jeden wiersz z przewijaniem — zawinięty drugi
	 * wiersz wypadłby poza nagłówek.
	 * Klasę .iac-menu-subtabs dokłada JS wyłącznie spanom z linkami, więc
	 * plakietki (.nowewiadomoscliklienta itp.) zostają nietknięte.
	 */
	ul#topnav > li > span.iac-menu-subtabs {
		box-sizing: border-box !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		white-space: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
	}
	/* float: left zawijałby linki niezależnie od white-space */
	ul#topnav > li > span.iac-menu-subtabs > a {
		float: none !important;
		display: inline-block !important;
		vertical-align: top !important;
	}

	/* Pierwszy krok zmniejszania: same odstępy, rozmiar pisma bez zmian */
	ul#topnav > li, ul#topnav_2 > li {
		margin-left: 5px !important;
	}
	ul#topnav > li > a, ul#topnav_2 > li > a {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
	ul#topnav > li > span.iac-menu-subtabs > a {
		margin-right: 5px !important;
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	/* Tabele DataTables przewijamy w poziomie, zamiast rozpychać stronę.
	   min-width działa też przy inline width, które DataTables ustawia po inicjalizacji. */
	#main .dataTables_wrapper {
		/*
		 * width: 0 + min-width: 100% — ta sama sztuczka co przy .iac-navbar wyżej.
		 * #container jest tabelą layoutową, a komórka tabeli rośnie do szerokości
		 * MINIMALNEJ treści: bez tego min-width: 1100px z tabeli wyników rozpychało
		 * komórkę, więc przewijała się cała strona (razem z nagłówkiem), a nie sama
		 * lista. Z width: 0 kontener wnosi 0 do szerokości minimalnej i renderuje
		 * się na pełną szerokość komórki.
		 */
		width: 0;
		min-width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		/*
		 * TO MUSI TU ZOSTAĆ RAZEM Z overflow-x.
		 * demo_table.css trzyma na .dataTables_wrapper height: 42px — tyle, ile ma
		 * pasek narzędzi nad tabelą — i liczy na to, że lista wyleje się poza pudełko
		 * (overflow: visible nie obcina). Samo overflow-x: auto zmienia jednak
		 * obliczone overflow-y z visible na auto (CSS Overflow 3), więc pudełko
		 * zaczyna obcinać w OBU osiach i z całej listy zostaje 42px zielonego paska:
		 * poniżej 1600px wyszukiwarka wyglądała na pustą (użytkownik: „jak ktoś
		 * zmniejszy kartę, to nie widać wyników”).
		 */
		height: auto !important;
		/*
		 * Wysokość idzie do treści, ale gradient (iac-modern.css) ma dalej udawać
		 * pasek narzędzi, a nie tło pod całą listą i pagerem.
		 */
		background-repeat: no-repeat;
		background-size: 100% 42px;
	}
	#main .dataTables_wrapper > table.display {
		min-width: 900px;
	}
	#main .dataTables_wrapper > table#tabela {
		min-width: 1100px;
	}

	/*
	 * ZAWÓR BEZPIECZEŃSTWA: strona przewija się w poziomie, zamiast ucinać.
	 * home.blade.php ustawia na html overflow-x: hidden — to chroni przed dryfem
	 * layoutu, ale wszystko szersze od okna przestaje istnieć: kalkulator miejsc
	 * (1300px), formularz nowego pochowanego (1200px), wystawianie faktury (950px)
	 * i kilkanaście formularzy legacy ze sztywnymi px. Kontenera przewijania nie
	 * da się dać na te bloki: mają w środku rozwijane listy (multipleSelect,
	 * kalendarze), które scroll container obcina. Zostaje poziomy scroll strony —
	 * pojawia się tylko wtedy, gdy naprawdę jest co pokazać.
	 * !important, bo blok <style> z home.blade.php stoi w dokumencie PO tym
	 * arkuszu, a selektory są równie ogólne.
	 */
	html {
		overflow-x: auto !important;
	}

	/*
	 * Okna jQuery UI (kontrahenci 970px, lista usług 985px, dysponenci 970px)
	 * są pozycjonowane absolutnie i centrowane w momencie otwarcia. Szersze od
	 * okna dostawały ujemne left, czyli lewa krawędź wypadała poza dokument —
	 * tam nie dojedzie żaden scroll. max-width działa przed pomiarem szerokości
	 * przez widget, więc wyśrodkowanie wychodzi już z przyciętej szerokości,
	 * a sztywna treść przewija się w .ui-dialog-content (jQuery UI: overflow: auto).
	 */
	.ui-dialog {
		max-width: calc(100vw - 16px) !important;
	}
	.ui-dialog > .ui-dialog-content {
		max-width: 100% !important;
	}
}

/* ==========================================================================
   ≤1500px — pierwszy moment, w którym logo + narzędzia + logo Grobonet
   przestają się mieścić w jednym wierszu (411 + 820 + 210 ≈ 1440px).
   Flex już nie dopuści do zawinięcia, ale trzeba jeszcze zwolnić miejsce,
   żeby nic nie było przycięte.
   ========================================================================== */
@media (max-width: 1500px) {
	/* Kafel Grobonetu zwężamy (nie chowamy — patrz komentarz w bloku ≤1200px) */
	.iac-topbar .iac-brand--grobonet {
		padding: 4px 10px !important;
	}
	.iac-topbar .iac-brand--grobonet img.grobo {
		height: 34px !important;
		max-width: 150px !important;
		object-fit: contain;
	}
	/* „Witaj, <imię>” → sama ikona; nazwa użytkownika jest w „Moje konto” */
	.iac-topbar .iac-user-button .label {
		display: none !important;
	}
}

/* ==========================================================================
   ≤1400px — monitory 1366 (najczęstszy laptop) i tablet w poziomie
   ========================================================================== */
@media (max-width: 1400px) {
	.iac-topbar .iac-topbar__tools {
		gap: 3px !important;
		flex-wrap: nowrap !important;
	}
	.iac-topbar .iac-topbar__tools > .button,
	.iac-topbar .iac-topbar__tools > .dropdown > .button {
		padding: 6px 7px !important;
	}
	.iac-topbar .iac-brand {
		margin-left: 6px !important;
		padding: 4px 12px !important;
	}
	.iac-topbar .iac-brand--grobonet {
		margin: 0 6px !important;
	}

	/* Zmniejszanie zakładek: wysokość kafla (26px) zostaje, schodzi tylko
	   pismo i padding poziomy — geometria pionowa nagłówka bez zmian */
	ul#topnav > li, ul#topnav_2 > li {
		margin-left: 4px !important;
	}
	ul#topnav > li > a, ul#topnav_2 > li > a {
		padding-left: 6px !important;
		padding-right: 6px !important;
		font-size: 10px !important;
	}
	ul#topnav > li > span.iac-menu-subtabs > a {
		margin-right: 4px !important;
		padding-left: 7px !important;
		padding-right: 7px !important;
		font-size: 10px !important;
	}

	/* Filtry wyszukiwarki: 3 kolumny × 400px → 2 kolumny po połowie */
	#main .formularz_edycji > .iac-search-col {
		width: 50% !important;
		box-sizing: border-box !important;
	}
}

/* ==========================================================================
   ≤1200px — małe monitory, tablety w poziomie
   ========================================================================== */
@media (max-width: 1200px) {
	/*
	 * Kafel Grobonetu zwężamy, zamiast go chować. Wcześniej znikał tu zupełnie
	 * „bo wejście zostaje w menu" — ale w menu jest wyłącznie moduł
	 * „Grobonet Admin" (za uprawnieniem i preferencją), a nie publiczna
	 * wyszukiwarka. Przy html { overflow-x: hidden } nie dało się do niej
	 * dojść żadną drogą w oknie węższym niż 1200px.
	 * max-width przycina kafel do ~120px niezależnie od proporcji pliku,
	 * object-fit skaluje grafikę bez zniekształceń.
	 */
	.iac-topbar .iac-brand--grobonet {
		margin: 0 8px 0 10px !important;
		padding: 4px 8px !important;
	}
	.iac-topbar .iac-brand--grobonet img.grobo {
		height: 30px !important;
		max-width: 124px !important;
	}
	.iac-topbar .iac-brand img {
		height: 38px !important;
		width: auto !important;
	}

	ul#topnav > li, ul#topnav_2 > li {
		margin-left: 3px !important;
	}
	ul#topnav > li > a, ul#topnav_2 > li > a {
		padding-left: 5px !important;
		padding-right: 5px !important;
		font-size: 9.5px !important;
	}
	ul#topnav > li > span.iac-menu-subtabs > a {
		margin-right: 3px !important;
		padding-left: 6px !important;
		padding-right: 6px !important;
		font-size: 9.5px !important;
	}

	/* Podgląd zdjęcia z listy nie może wychodzić poza ekran */
	#iac-search-photo-preview {
		width: 360px !important;
		height: 270px !important;
	}
}

/* ==========================================================================
   ≤1024px — tablet w poziomie / bardzo małe monitory
   ========================================================================== */
@media (max-width: 1024px) {
	.iac-topbar .iac-brand {
		margin: 0 0 0 6px !important;
		padding: 3px 9px !important;
	}
	.iac-topbar .iac-brand img {
		height: 32px !important;
	}
	.iac-topbar .iac-brand--grobonet {
		margin: 0 6px 0 8px !important;
		padding: 3px 6px !important;
	}
	.iac-topbar .iac-brand--grobonet img.grobo {
		height: 26px !important;
		max-width: 104px !important;
	}
	/* margin-left musi zostać auto — to ono dociska narzędzia do prawej w flexie */
	.iac-topbar .iac-topbar__tools {
		gap: 3px !important;
		margin: 0 8px 0 auto !important;
	}
	/*
	 * Etykiety ustępują miejsca TYLKO tam, gdzie przycisk ma ikonę i title —
	 * inaczej zostaje pusty prostokąt. „Moje konto” nie ma ikony (patrz
	 * panel-header.blade.php), więc zachowuje tekst.
	 */
	.iac-topbar .iac-topbar__tools > #o-programie .label,
	.iac-topbar .iac-topbar__tools > .iac-logout-button .label {
		display: none !important;
	}
	/* Sama ikonka „Witaj, …” jest tu redundantna — nic nie robi (cursor: default),
	   a kto jest zalogowany widać po wejściu w „Moje konto”. */
	.iac-topbar .iac-topbar__tools > .iac-user-button {
		display: none !important;
	}
	.iac-topbar .iac-font-control {
		width: 25px !important;
	}

	ul#topnav > li, ul#topnav_2 > li {
		margin-left: 2px !important;
	}
	ul#topnav > li > a, ul#topnav_2 > li > a {
		padding-left: 4px !important;
		padding-right: 4px !important;
		font-size: 9px !important;
		letter-spacing: -0.2px !important;
	}
	ul#topnav > li > span.iac-menu-subtabs > a {
		margin-right: 2px !important;
		padding-left: 5px !important;
		padding-right: 5px !important;
		font-size: 9px !important;
		letter-spacing: -0.2px !important;
	}

	/*
	 * Kolumny formularzy legacy (sztywne 395–470px układane floatem) idą jedna
	 * pod drugą. Karta grobu ma własne media query w tab-grave.blade.php, więc
	 * jej kolumny wyłączamy z tej reguły, żeby siatki się nie biły.
	 */
	#main .formularz_edycji > .iac-search-col,
	#main .formularz_edycji > div[style*="float: left"]:not(.grob-col-form):not(.grob-col-mid) {
		width: 100% !important;
		float: none !important;
		box-sizing: border-box !important;
	}
	#main .formularz_edycji .iac-search-actions {
		margin-left: 10px !important;
	}

	/* Etykieta 150px + pole nie mieszczą się już obok siebie */
	#main .formularz_edycji label.lab {
		width: 130px !important;
	}

	#main .dataTables_wrapper > table.display {
		min-width: 860px;
	}
	#iac-search-photo-preview {
		width: 300px !important;
		height: 225px !important;
	}
}

/* ==========================================================================
   ≤820px — tablet w pionie (iPad 768/834). Dolna granica wsparcia.
   ========================================================================== */
@media (max-width: 820px) {
	/* Wysokość .iac-topbar (66px) zostaje — od niej zależą offsety podmenu. */
	.iac-topbar .iac-brand img {
		height: 26px !important;
	}
	.iac-topbar .iac-brand--grobonet img.grobo {
		height: 22px !important;
		max-width: 86px !important;
	}
	/* Rozmiar interfejsu ustawia się rzadko — na tej szerokości ustępuje */
	.iac-topbar .iac-font-controls {
		display: none !important;
	}
	.iac-topbar .iac-topbar__tools .dropdown > .button .label {
		max-width: 90px !important;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	/* Dropdowny przy prawej krawędzi nie mogą wyjeżdżać poza ekran */
	.iac-topbar .iac-topbar__tools .dropdown-slider {
		right: 0;
		max-width: calc(100vw - 20px);
	}

	#main .formularz_edycji label.lab {
		width: 120px !important;
	}
	#main .dataTables_wrapper > table.display {
		min-width: 780px;
	}
}