/* Mobile overrides loaded AFTER /css/style.php.
   Keep desktop unchanged (legacy layout). */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Fix topbar layout: menu left, logo right (prevents "right panel" drop) */
.topbar-inner {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	flex-wrap: nowrap;
}

/* Override legacy absolute positioning inside topbar (DESKTOP ONLY).
   On mobile we turn it into a fixed dropdown, so do not force static there. */
@media (min-width: 769px) {
	.topbar-inner .podmenu.topbar-menu {
		position: static !important;
		margin: 0 !important;
		width: auto !important;
		min-width: 0;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		z-index: 1000;
	}
}

.topbar-inner .podmenu.topbar-menu .itemtop {
	/* keep legacy floats working, but prevent wrapping issues */
	white-space: nowrap;
}

.topbar-inner .podmenu.topbar-menu::-webkit-scrollbar {
	height: 6px;
}

.topbar-inner .podmenu.topbar-menu::-webkit-scrollbar-thumb {
	background: rgba(0,0,0,0.25);
}

.topbar-logo {
	display: inline-flex;
	align-items: center;
	height: 44px;
	flex: 0 0 auto;
	z-index: 1001;
}

/* Prevent right sidebar dropping below content on desktop:
   legacy widths are a tight fit; small rounding/borders can cause wrap. */
@media (min-width: 769px) {
	/* Keep left sidebar spacing as-is; tighten only the gap between center and right sidebar */
	#prawa {
		margin-left: 3px !important; /* space from center column */
		margin-right: 12px !important; /* keep edge spacing */
	}
}

@media (max-width: 768px) {
	/* Top bar container must not keep desktop fixed width */
	.topblok2-2 {
		width: 100% !important;
		max-width: none !important;
	}

	.topbar-inner {
		width: 100% !important;
		padding-right: 44px; /* space for absolute Menu button */
	}

	#mobile-menu-toggle {
		display: inline-block !important;
		position: fixed;
		right: 8px;
		top: 5px;
		margin-left: 0 !important;
		z-index: 9999999;
		background: rgba(0,0,0,0.25) !important;
		border: 1px solid rgba(255,255,255,0.18) !important;
		color: #fff !important;
		opacity: 1 !important;
	}

	/* Mobile: top navigation becomes dropdown list */
	.topbar-inner {
		justify-content: flex-start;
		position: relative;
	}

	.topbar-menu {
		display: none;
		position: fixed !important;
		left: 8px !important;
		right: 8px !important;
		/* anchor just below the top bar (incl. safe-area) */
		top: calc(46px + env(safe-area-inset-top, 0px) + 6px) !important;
		width: auto !important;
		margin: 0 !important;
		padding: 8px !important;
		border-radius: 12px !important;
		background: rgba(25, 25, 25, 0.96) !important;
		border: 1px solid rgba(255,255,255,0.10) !important;
		box-shadow: 0px 10px 30px rgba(0,0,0,0.35) !important;
		overflow: auto !important;
		white-space: normal !important;
		z-index: 9999998;
		/* show all links: use full viewport height and scroll inside */
		max-height: calc(100vh - (46px + env(safe-area-inset-top, 0px) + 6px) - 12px);
	}

	.topbar-menu.is-open {
		display: block;
	}

	.topbar-menu .itemtop {
		float: none !important;
		width: 100% !important;
		height: auto !important;
		padding: 10px 12px !important;
		margin: 0 !important;
		border: 0 !important;
		border-radius: 10px !important;
		text-align: left !important;
		background: rgba(255,255,255,0.06) !important;
	}

	.topbar-menu .itemtop + .itemtop {
		margin-top: 6px !important;
	}

	.topbar-menu .itemtop a {
		display: block;
	}

	/* Prevent horizontal cut-off from fixed desktop widths */
	#container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 auto !important;
		border-left: none;
		border-right: none;
		padding-left: 0 !important;
		padding-right: 0 !important;
		overflow-x: hidden;
	}

	#dolnypasek2 {
		width: 100% !important;
		max-width: none !important;
	}

	/* Basic one-column layout without touching desktop rules */
	#lewa,
	#primary,
	#prawa {
		float: none !important;
		width: 100% !important;
		margin: 8px 0 !important;
		clear: both !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Default on mobile: hide big left navigation, show via toggle */
	/* (removed) old mobile-nav-open behavior */

	#nawigacjaprawa {
		float: none !important;
		width: 100% !important;
	}

	#nawigacja,
	#srodek {
		width: 100% !important;
	}

	#srodek1,
	#srodek2,
	#srodek3,
	#srodek4 {
		width: 100% !important;
	}

	/* Some pages inline-position #srodek; neutralize for mobile */
	#srodek {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Chat input sizing */
	#czato {
		height: 45vh !important;
		min-height: 260px;
		max-height: 520px;
	}

	#czato + form {
		display: flex;
		gap: 8px;
		padding: 0 8px 8px 8px;
		align-items: stretch;
	}

	#inputczat {
		width: 100% !important;
		margin-left: 0 !important;
		flex: 1 1 auto;
		height: 40px !important;
		color: #fff !important;
		background: rgba(0,0,0,0.25) !important;
		border-color: rgba(255,255,255,0.22) !important;
	}

	#submitczat {
		position: static !important;
		margin: 0 !important;
		width: auto !important;
		height: auto !important;
		padding: 8px 12px !important;
		flex: 0 0 auto;
		min-width: 84px;
		color: #fff !important;
	}

	/* Footer on mobile: show only presenter + listeners */
	#dolnypasek2 .napasku {
		display: none !important;
	}
	#dolnypasek2 .foot-presenter,
	#dolnypasek2 .foot-listeners {
		display: inline-block !important;
		float: none !important;
		width: auto !important;
		max-width: 75%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-left: 10px !important;
		line-height: 31px;
	}
	#dolnypasek2 .foot-listeners {
		max-width: 45%;
		text-align: right;
		padding-right: 10px !important;
		min-width: 120px;
	}
	#dolnypasek2 ul.marquee,
	#dolnypasek2 ul.marquee li {
		height: 31px !important;
	}

	/* If marquee is used, keep content in view */
	#dolnypasek2 ul.marquee li {
		top: 0 !important;
	}

	/* Index/chat header controls: prevent huge margin-left overflow on mobile */
	.odswiezaj,
	.pencil {
		margin-left: 0 !important;
		right: 8px !important;
		left: auto !important;
	}

	.pencil {
		right: 32px !important;
	}

	#upmini,
	#odswiezajinfo,
	#edycjainfo {
		margin-left: 0 !important;
		right: 56px !important;
		left: auto !important;
	}

	/* If still cramped, hide helper labels */
	#odswiezajinfo,
	#edycjainfo,
	#upmini {
		display: none !important;
	}

	/* Reduce overly tall center areas on mobile (e.g. chat) */
	#czat {
		max-height: 45vh;
	}

	/* Login / reset password boxes */
	.logowanie1 {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		margin: 16px auto !important;
		width: calc(100% - 24px) !important;
		max-width: 420px;
		height: auto !important;
	}

	/* Optional logo above login box (from settings) */
	.logowanie1 > div[style*="position: absolute"][style*="width: 400px"] {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 0 12px 0 !important;
	}

	.logowanie1 img {
		max-width: 100%;
		height: auto;
	}

	.logowanie1 table {
		width: 100% !important;
		margin-left: 0 !important;
	}

	.logowanie1 table[style] {
		width: 100% !important;
	}

	input.inputlogowanie {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	/* Keep layout close to original on mobile (no blocky table hacks) */
	.logowanie1 td {
		padding-top: 2px;
		padding-bottom: 2px;
	}

	.logowanie1 input[type="checkbox"] {
		transform: scale(1.2);
	}
}