/* =============================================================================
 * Phoenix B2B — ZWIJANY SIDEBAR (PC) 2.12.92 — polish wyglądu.
 * -----------------------------------------------------------------------------
 * Warstwa CSS-only ładowana PO pb2b-sidebar-2.12.82.css (wygrywa kaskadę) dla
 * OBU paneli (klient + admin: ten sam shell `.phoenix-b2b-panel.pb2b-app-shell`).
 * Poprawia zwinięty tryb: czyste ikony (bez pionowego tekstu), ładny tooltip
 * na hover (na bazie [data-pb2b-tip] ustawianego przez JS), avatar-kółko,
 * małe badge, wyśrodkowane wylogowanie, płynne przejście szerokości. Content
 * rozszerza się automatycznie (siatka shella) — zero nachodzenia i scrolla.
 *
 * Zakres: WYŁĄCZNIE >=1200px (na mobile sidebar jest drawerem — nietknięty).
 * ========================================================================== */

/* Płynne przejście szerokości kolumny sidebara (siatka shella). */
@media (min-width: 1200px) {
	.phoenix-b2b-panel.pb2b-app {
		transition: grid-template-columns .22s cubic-bezier(.4, 0, .2, 1);
	}
	.phoenix-b2b-panel .pb2b-sidebar {
		transition: padding .2s ease;
	}

	/* Przełącznik zwijania — ładniejszy, spójny z tokenami. */
	.phoenix-b2b-panel .pb2b-collapse-toggle {
		width: 40px;
		height: 40px;
		border-radius: 10px;
	}
	.phoenix-b2b-panel .pb2b-collapse-toggle:hover {
		background: var(--pb2b-primary-soft, rgba(124, 58, 237, .12));
		border-color: var(--pb2b-primary, #7c3aed);
		color: var(--pb2b-primary, #7c3aed);
	}

	/* --- Wąska kolumna: 78px, delikatnie szersza dla oddechu ikon. --- */
	.phoenix-b2b-panel.pb2b-sidebar-collapsed.pb2b-app {
		grid-template-columns: 78px minmax(0, 1fr);
	}
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar {
		padding-left: 12px !important;
		padding-right: 12px !important;
		overflow: visible !important;
	}

	/* Twarde ukrycie WSZELKICH tekstów w zwiniętym menu (żaden nie łamie się
	   pionowo). Zostają wyłącznie ikony/awatary/badge. */
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-brand-title,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-nav-label,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-nav-group-title,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-side-account-id,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-side-account-company,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-side-account-actions,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-side-account-status,
	.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 {
		display: none !important;
	}

	/* Grupy nawigacji: bez tytułów, ale zachowaj lekki odstęp między grupami
	   (kreska zamiast pustej przestrzeni „na oko”). */
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-nav-group + .pb2b-nav-group {
		margin-top: 8px;
		padding-top: 8px;
		border-top: 1px solid var(--pb2b-border, rgba(255, 255, 255, .08));
	}

	/* Brand: tylko znaczek, wyśrodkowany. */
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar-header,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-brand {
		justify-content: center !important;
	}
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-brand-mark {
		margin: 0 auto !important;
	}

	/* Karta konta → tylko avatar-kółko, wyśrodkowany. */
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-side-account,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-side-account-hero {
		padding: 12px 6px !important;
		text-align: center !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
	}
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-side-account-top {
		justify-content: center !important;
		gap: 0 !important;
	}
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-side-account-avatar {
		width: 44px !important;
		height: 44px !important;
		border-radius: 50% !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		font-size: 16px !important;
		margin: 0 auto !important;
	}

	/* Pozycje nawigacji: ikona wyśrodkowana w kwadratowym „hit-boxie”. */
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-nav-item {
		position: relative;
		justify-content: center !important;
		gap: 0 !important;
		padding: 11px 0 !important;
		margin-inline: auto;
		width: 48px;
		border-radius: 12px;
	}
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-nav-icon {
		flex: 0 0 22px !important;
		width: 22px;
		height: 22px;
	}
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-nav-item .pb2b-nav-indicator {
		display: none !important;
	}
	/* Aktywna pozycja w trybie zwiniętym — pełne tło pigułki (czytelniejsze niż
	   pasek boczny, który znika przy wąskim menu). */
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-nav-item.is-active {
		background: var(--pb2b-primary-soft, rgba(124, 58, 237, .16)) !important;
	}

	/* Badge → mała kropka w rogu ikony (nie rozpycha wąskiego menu). */
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-nav-badge {
		position: absolute !important;
		top: 6px;
		right: 8px;
		min-width: 9px;
		width: 9px;
		height: 9px;
		padding: 0 !important;
		font-size: 0 !important;
		line-height: 0 !important;
		border-radius: 999px !important;
		overflow: hidden;
		border: 2px solid var(--pb2b-bg-1, #0f131a);
	}

	/* Stopka: wyśrodkowane ikony (WordPress link + wyloguj). */
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar-footer {
		text-align: center !important;
	}
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar-logout,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar-foot-link {
		justify-content: center !important;
		width: 48px;
		margin: 6px auto 0 !important;
		padding: 10px 0 !important;
		border-radius: 12px;
	}

	/* -----------------------------------------------------------------------
	 * Ładny tooltip na hover (zwinięte menu). Bazuje na [data-pb2b-tip], które
	 * ustawia kontroler JS. Pokazywany na prawo od ikony, ponad treścią.
	 * --------------------------------------------------------------------- */
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-nav-item[data-pb2b-tip],
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar-logout[data-pb2b-tip],
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar-foot-link[data-pb2b-tip] {
		overflow: visible;
	}
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-nav-item[data-pb2b-tip]::after,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar-logout[data-pb2b-tip]::after,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar-foot-link[data-pb2b-tip]::after {
		content: attr(data-pb2b-tip);
		position: absolute;
		left: calc(100% + 14px);
		top: 50%;
		transform: translateY(-50%) translateX(-4px);
		white-space: nowrap;
		background: var(--pb2b-bg-3, #1b212b);
		color: var(--pb2b-text-strong, #fff);
		border: 1px solid var(--pb2b-border-strong, rgba(255, 255, 255, .16));
		padding: 6px 10px;
		border-radius: 8px;
		font-size: 12.5px;
		font-weight: 600;
		line-height: 1;
		box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .55);
		opacity: 0;
		pointer-events: none;
		z-index: 90;
		transition: opacity .14s ease, transform .14s ease;
	}
	/* Strzałka tooltipa. */
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-nav-item[data-pb2b-tip]::before,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar-logout[data-pb2b-tip]::before,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar-foot-link[data-pb2b-tip]::before {
		content: "";
		position: absolute;
		left: calc(100% + 8px);
		top: 50%;
		transform: translateY(-50%);
		border: 6px solid transparent;
		border-right-color: var(--pb2b-bg-3, #1b212b);
		opacity: 0;
		pointer-events: none;
		z-index: 91;
		transition: opacity .14s ease;
	}
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-nav-item[data-pb2b-tip]:hover::after,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-nav-item[data-pb2b-tip]:focus-visible::after,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar-logout[data-pb2b-tip]:hover::after,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar-foot-link[data-pb2b-tip]:hover::after {
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-nav-item[data-pb2b-tip]:hover::before,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar-logout[data-pb2b-tip]:hover::before,
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-sidebar-foot-link[data-pb2b-tip]:hover::before {
		opacity: 1;
	}

	/* Chowamy natywny title (JS zostawia go dla a11y, ale wizualnie mamy własny).
	   Nie da się nadpisać natywnego dymka CSS-em, więc kontroler 2.12.92 NIE
	   ustawia już atrybutu title (tylko data-pb2b-tip) — patrz JS. */
}

/* Redukcja ruchu. */
@media (prefers-reduced-motion: reduce) {
	.phoenix-b2b-panel.pb2b-app { transition: none; }
	.phoenix-b2b-panel .pb2b-sidebar { transition: none; }
	.phoenix-b2b-panel.pb2b-sidebar-collapsed .pb2b-nav-item[data-pb2b-tip]::after { transition: none; }
}