/* =============================================================================
 * Phoenix B2B — ZWIJANY SIDEBAR (PC) 2.12.82
 * -----------------------------------------------------------------------------
 * Wspólny mechanizm zwijania bocznego menu dla PANELU KLIENTA i PANELU ADMINA
 * (oba używają tego samego shella `.phoenix-b2b-panel.pb2b-app-shell` z siatką
 * `var(--pb2b-sidebar-w) 1fr`). Logika + persistencja: pb2b-sidebar-collapse-2.12.82.js
 * + inline-boot w shellu (bez FOUC).
 *
 * WAŻNE: collapse działa WYŁĄCZNIE na desktopie (>=1200px) — czyli tam, gdzie
 * sidebar jest stałą kolumną siatki. Poniżej 1200px sidebar jest drawerem
 * (off-canvas, klasa `pb2b-sidebar-open`) i collapse NIE ma żadnego wpływu —
 * mobilne menu/drawer/bottom-nav zostają nietknięte.
 * CSS-only tutaj; scoped do `.phoenix-b2b-panel`.
 * ========================================================================== */

:root {
	--pb2b-sidebar-cw: 76px; /* szerokość zwiniętego sidebara */
}

/* Przycisk zwijania w topbarze. Domyślnie ukryty — pokazywany tylko na PC. */
.phoenix-b2b-panel .pb2b-collapse-toggle {
	display: none;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--pb2b-border);
	border-radius: 8px;
	color: var(--pb2b-text);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.phoenix-b2b-panel .pb2b-collapse-toggle:hover {
	background: var(--pb2b-bg-4, rgba(255, 255, 255, 0.06));
	border-color: var(--pb2b-border-strong, var(--pb2b-border));
}
.phoenix-b2b-panel .pb2b-collapse-toggle:focus-visible {
	outline: 2px solid var(--pb2b-primary-2, #A855F7);
	outline-offset: 2px;
}
.phoenix-b2b-panel .pb2b-collapse-toggle svg {
	width: 20px;
	height: 20px;
	display: block;
	transition: transform .2s ease;
}

/* =============================================================================
 * Desktop (>=1200px) — tu sidebar jest kolumną siatki, więc collapse ma sens.
 * ========================================================================== */
@media (min-width: 1200px) {
	/* Pokaż przełącznik na PC. */
	.phoenix-b2b-panel .pb2b-collapse-toggle { display: inline-flex; }

	/* Po zwinięciu: wąska kolumna sidebara → CONTENT dostaje więcej miejsca.
	   Siatka przelicza się automatycznie (kafle/tabele/katalog/kontenery). */
	.phoenix-b2b-panel.pb2b-sidebar-collapsed.pb2b-app {
		grid-template-columns: var(--pb2b-sidebar-cw, 76px) minmax(0, 1fr);
	}

	/* Ikona przełącznika obrócona, gdy zwinięte (wizualny stan). */
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-collapse-toggle svg { transform: rotate(180deg); }

	/* ---- Wąski sidebar: zostają same ikony, teksty ukryte. ---- */
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar {
		padding-left: 10px;
		padding-right: 10px;
		overflow: visible; /* tooltipy/title nie są przycinane */
	}

	/* Brand: tylko znaczek, bez nazwy. */
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-brand-title,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar-foot-brand,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar-foot-link-label,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar-logout-label,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-nav-group-title,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-nav-label,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-side-account-id,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-side-account-actions {
		display: none !important;
	}
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar-header,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-brand {
		justify-content: center;
	}

	/* Karta konta: tylko avatar, wyśrodkowany. */
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-side-account-hero {
		padding: 12px 6px !important;
		text-align: center;
	}
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-side-account-top {
		justify-content: center;
	}

	/* Pozycje nawigacji: ikona wyśrodkowana, bez tekstu. */
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-nav-item {
		justify-content: center;
		padding-left: 0;
		padding-right: 0;
		gap: 0;
	}
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-nav-icon { flex: 0 0 22px; }

	/* Liczniki przy ikonach → mała kropka w rogu (nie rozpychają wąskiego menu). */
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-nav-item { position: relative; }
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-nav-badge {
		position: absolute;
		top: 5px;
		right: 9px;
		min-width: 8px;
		height: 8px;
		padding: 0;
		font-size: 0;
		line-height: 0;
		border-radius: 999px;
		overflow: hidden;
	}

	/* Stopka i wylogowanie: wyśrodkowane ikony. */
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar-footer { text-align: center; }
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar-logout,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar-foot-link {
		justify-content: center;
	}
}

/* Redukcja ruchu — bez animacji ikony. */
@media (prefers-reduced-motion: reduce) {
	.phoenix-b2b-panel .pb2b-collapse-toggle svg { transition: none; }
}