/* =============================================================================
 * PhoenixB2B / SPJTRADE B2B — PANEL V3.8 (v2.9.8)
 * Warstwa FINAL FIX + POLISH. Ładuje się JAKO OSTATNIA (po panel-v3-7) i wygrywa
 * w kaskadzie. Zakres ściśle `.phoenix-b2b-panel`. Kolory wyłącznie z tokenów
 * (panel-v3-tokens.css) → light/dark działa automatycznie.
 *
 * NIE rusza logiki: zachowane hooki JS data-pb2b-cart-count / data-pb2b-cart-total
 * / is-empty / has-items / data-section. Nie dotyka safe-area / padding-top headera
 * (te zostają z panel-v3-3). Zmiany czysto wizualne i układowe.
 *
 * Spis:
 *   1) KARTA KONTA (hero) — pełna szerokość menu, premium, kompaktowa, bez clippingu.
 *   2) NAWIGACJA — równe odstępy, wyrównanie, większe pole widoczności (scroll).
 *   3) DÓŁ SIDEBARU — minimalistyczny (wersja usunięta w PHP).
 *   4) HEADER + KOSZYK MOBILE — naprawa ucinania kwoty (krytyczne), badge w rogu.
 *   5) HEADER — polish (spacing, hover/focus, kontrast, tło z tokenów).
 *   6) KRZYŻYK ZAMYKANIA — ukryty na desktopie (≥1200).
 *   7) DASHBOARD — równe wysokości, oddech, premium hero/CTA (delikatnie).
 *   8) LIGHT/DARK — audyt kontrastu (formularze, selecty, tytuły).
 *   9) PODKREŚLENIA / focus — czysto, estetycznie.
 * ========================================================================== */

/* =============================================================================
 * 1) KARTA KONTA (hero) — „Moje konto" jako dominująca sekcja na górze menu.
 *    Pełna szerokość wewnętrzna (po gutterze sidebaru), kompaktowa (oddaje
 *    miejsce nawigacji), kafelki bez ucinania, status w jednej linii.
 *    Zakres: drawer/mobile/tablet ≤1199 (na PC karta zostaje z v3-7).
 * ========================================================================== */
@media (max-width: 1199px) {
	/* Spójny gutter sidebaru = 12px (tylko poziomo; pion/safe-area bez zmian). */
	.phoenix-b2b-panel .pb2b-sidebar { padding-left: 12px !important; padding-right: 12px !important; }

	/* Karta na PEŁNĄ szerokość wewnętrzną menu (bez bocznych marginesów). */
	.phoenix-b2b-panel .pb2b-side-account-hero {
		margin: 2px 0 12px !important;
		padding: 13px 13px 12px !important;
		border-radius: var(--pb2b-radius);
	}
	/* Górny wiersz: avatar + dane, czytelnie i kompaktowo. */
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-top { gap: 12px; }
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-avatar {
		width: 46px; height: 46px; flex: 0 0 46px; font-size: 18px;
		box-shadow: 0 6px 14px color-mix(in srgb, var(--pb2b-primary) 34%, transparent);
	}
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-id { gap: 3px; }
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-name { font-size: 15px; }
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-company { font-size: 11.5px; }
	/* Status „Konto B2B aktywne" — ZAWSZE jedna linia (nie zawija w wąskim menu). */
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-status {
		max-width: 100%; padding: 3px 9px; font-size: 10.5px;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}

	/* 4 kafelki — równe, wycentrowane, etykieta może zawinąć (brak clippingu). */
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-actions {
		gap: 8px; margin-top: 12px; padding-top: 12px;
	}
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-link {
		flex-direction: column; align-items: center; justify-content: center;
		text-align: center; gap: 6px;
		padding: 10px 8px; min-height: 60px;
		font-size: 11.5px; line-height: 1.2;
		white-space: normal; word-break: normal; overflow-wrap: anywhere;
	}
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-link-ico { width: 18px; height: 18px; flex: 0 0 18px; }
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-link-ico svg { width: 18px; height: 18px; }
	/* Badge powiadomień w rogu kafelka — nie nachodzi na ikonę/etykietę. */
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-link-badge { top: 6px; right: 6px; }

	/* „Wyloguj się" — osobny, mniejszy przycisk na dole karty (nie dominuje). */
	.phoenix-b2b-panel .pb2b-side-account-hero .pb2b-side-account-logout {
		margin-top: 2px; padding: 9px 12px; min-height: 0; font-size: 12px;
	}
}

/* =============================================================================
 * 2) NAWIGACJA — większe pole widoczności, równe odstępy, wyrównanie do karty.
 *    Nav zajmuje resztę wysokości i sam się scrolluje (flex:1 + overflow).
 * ========================================================================== */
@media (max-width: 1199px) {
	/* Nav wypełnia dostępną wysokość i przewija się wewnętrznie. */
	.phoenix-b2b-panel .pb2b-nav-grouped {
		flex: 1 1 auto; min-height: 0; overflow-y: auto;
		padding: 2px 0 10px !important;
	}
	/* Równe, czytelne separatory grup. */
	.phoenix-b2b-panel .pb2b-nav-group + .pb2b-nav-group { margin-top: 12px; padding-top: 12px; }
	.phoenix-b2b-panel .pb2b-nav-group-title {
		padding: 0 4px 6px 12px; margin: 0;
		font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
		color: var(--pb2b-text-dim);
	}
	/* Pozycje menu — nieco ciaśniej w pionie (widać więcej), wygodny target. */
	.phoenix-b2b-panel .pb2b-nav-item {
		padding: 9px 12px; margin: 1px 0; gap: 12px; border-radius: var(--pb2b-radius-sm);
	}
	.phoenix-b2b-panel .pb2b-nav-item .pb2b-nav-icon { width: 19px; height: 19px; flex: 0 0 19px; }
	.phoenix-b2b-panel .pb2b-nav-item .pb2b-nav-icon svg { width: 19px; height: 19px; }
	.phoenix-b2b-panel .pb2b-nav-item .pb2b-nav-label { font-size: 13.5px; }
}

/* =============================================================================
 * 3) DÓŁ SIDEBARU — minimalistyczny. Numer wersji usunięty w PHP; brand subtelny.
 * ========================================================================== */
.phoenix-b2b-panel .pb2b-sidebar-footer { padding: 6px 12px 14px; }
.phoenix-b2b-panel .pb2b-sidebar-foot-brand {
	margin-top: 0; padding-top: 10px;
	border-top: 1px solid var(--pb2b-border);
	justify-content: center; gap: 0;
}
.phoenix-b2b-panel .pb2b-sidebar-foot-brand-name {
	font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
	color: var(--pb2b-text-dim);
}

/* =============================================================================
 * 4) HEADER MOBILE — KOSZYK. NAPRAWA KRYTYCZNA: kwota nie może się ucinać.
 *    Przyczyna pierwotna: wcześniejsze warstwy blokowały `.pb2b-topbar-cart`
 *    na `width:40px` w media mobile, a kwota (meta) była renderowana inline →
 *    wychodziła poza pigułkę i poza ekran. Tu odblokowujemy szerokość pigułki
 *    (icon + kwota inline), ilość pokazujemy jako badge w rogu, a prawa strona
 *    headera nigdy się nie kompresuje (tytuł oddaje miejsce wielokropkiem).
 *    Wysoka specyficzność (3 klasy) + !important → wygrywa nad starymi regułami.
 * ========================================================================== */
@media (max-width: 1199px) {
	/* Lewa strona oddaje miejsce; prawa nigdy się nie kurczy. */
	.phoenix-b2b-panel .pb2b-app-header { align-items: center; }
	.phoenix-b2b-panel .pb2b-topbar-title { flex: 1 1 auto !important; min-width: 0 !important; }
	.phoenix-b2b-panel .pb2b-topbar-h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.phoenix-b2b-panel .pb2b-topbar-right { flex: 0 0 auto !important; flex-wrap: nowrap !important; align-items: center; }

	/* Pigułka koszyka — ODBLOKOWANA szerokość (auto), treść się mieści i widać kwotę. */
	.phoenix-b2b-panel .pb2b-topbar .pb2b-topbar-cart {
		position: relative !important;
		display: inline-flex !important; align-items: center !important;
		width: auto !important; max-width: none !important; min-width: 0 !important;
		height: auto !important; flex: 0 0 auto !important;
		padding: 7px 12px !important; gap: 8px !important;
		overflow: visible !important; justify-content: flex-start !important;
		border-radius: 999px !important;
	}
	.phoenix-b2b-panel .pb2b-topbar .pb2b-topbar-cart-ico {
		width: 19px !important; height: 19px !important; flex: 0 0 19px !important;
		color: var(--pb2b-primary-2);
	}
	/* Meta = kontener kwoty, w jednej linii, bez zawężania do zera. */
	.phoenix-b2b-panel .pb2b-topbar .pb2b-topbar-cart-meta {
		display: inline-flex !important; flex-direction: row !important; align-items: center !important;
		width: auto !important; max-width: none !important; min-width: 0 !important;
		overflow: visible !important; line-height: 1 !important;
	}
	/* Ilość pozycji = badge w rogu (NIE inline) — porządek i brak ucinania. */
	.phoenix-b2b-panel .pb2b-topbar .pb2b-topbar-cart-count { display: none !important; }
	.phoenix-b2b-panel .pb2b-topbar .pb2b-topbar-cart-count::after { content: none !important; }
	/* Kwota — widoczna zawsze, nigdy ucięta. */
	.phoenix-b2b-panel .pb2b-topbar .pb2b-topbar-cart-total {
		display: inline-block !important;
		width: auto !important; max-width: none !important; overflow: visible !important;
		white-space: nowrap !important;
		font-size: 12.5px !important; font-weight: 800 !important;
		color: var(--pb2b-text-strong) !important;
	}
	.phoenix-b2b-panel .pb2b-topbar .pb2b-topbar-cart-total::before { content: none !important; margin: 0 !important; }
	.phoenix-b2b-panel .pb2b-topbar .pb2b-topbar-cart-total * { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; }
	.phoenix-b2b-panel .pb2b-topbar .pb2b-topbar-cart-total:empty { display: none !important; }
	/* Badge ilości w rogu pigułki. */
	.phoenix-b2b-panel .pb2b-topbar .pb2b-topbar-cart-badge {
		position: absolute !important; top: -6px !important; right: -6px !important;
		left: auto !important; inset: auto -6px auto auto !important; margin: 0 !important;
		min-width: 17px !important; height: 17px !important; padding: 0 4px !important;
		display: inline-flex !important; align-items: center !important; justify-content: center !important;
		border-radius: 999px !important;
		background: var(--pb2b-primary) !important; color: var(--pb2b-primary-contrast) !important;
		border: 2px solid var(--pb2b-bg-1) !important; box-sizing: border-box !important;
		font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important;
	}
	/* Pusty koszyk — sama ikona (bez badge i kwoty), bez wymuszonej szerokości. */
	.phoenix-b2b-panel .pb2b-topbar .pb2b-topbar-cart.is-empty { padding: 8px !important; }
	.phoenix-b2b-panel .pb2b-topbar .pb2b-topbar-cart.is-empty .pb2b-topbar-cart-badge,
	.phoenix-b2b-panel .pb2b-topbar .pb2b-topbar-cart.is-empty .pb2b-topbar-cart-meta { display: none !important; }
}

/* Bardzo wąskie ekrany (<360px): jeśli zabraknie miejsca, koszyk = ikona + badge,
 * kwota chowana (priorytet: brak poziomego scrolla). Testowane 375+ pokazuje kwotę. */
@media (max-width: 359px) {
	.phoenix-b2b-panel .pb2b-topbar .pb2b-topbar-cart { padding: 8px !important; gap: 0 !important; }
	.phoenix-b2b-panel .pb2b-topbar .pb2b-topbar-cart-meta { display: none !important; }
}

/* =============================================================================
 * 5) HEADER — polish: tło z tokenów (oba tryby), spacing, hover/focus, kontrast.
 * ========================================================================== */
.phoenix-b2b-panel .pb2b-app-header,
.phoenix-b2b-panel .pb2b-topbar {
	background: color-mix(in srgb, var(--pb2b-bg-1) 88%, transparent);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--pb2b-border);
}
.phoenix-b2b-panel .pb2b-topbar-h1 { color: var(--pb2b-text-strong); }
.phoenix-b2b-panel .pb2b-topbar-sub { color: var(--pb2b-text-muted); }

/* Dzwonek powiadomień — spójny z resztą, czytelny hover/focus w obu trybach. */
.phoenix-b2b-panel .pb2b-topbar-bell {
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px;
	background: var(--pb2b-bg-3); border: 1px solid var(--pb2b-border);
	color: var(--pb2b-text);
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.phoenix-b2b-panel .pb2b-topbar-bell:hover { background: var(--pb2b-bg-4); border-color: var(--pb2b-border-strong); color: var(--pb2b-text-strong); }
.phoenix-b2b-panel .pb2b-topbar-bell:focus-visible { outline: none; box-shadow: var(--pb2b-shadow-focus); }
.phoenix-b2b-panel .pb2b-topbar-bell-dot { border-color: var(--pb2b-bg-1); }

.phoenix-b2b-panel .pb2b-burger {
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 10px;
	background: var(--pb2b-bg-3); border: 1px solid var(--pb2b-border); color: var(--pb2b-text);
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.phoenix-b2b-panel .pb2b-burger:hover { background: var(--pb2b-bg-4); border-color: var(--pb2b-border-strong); color: var(--pb2b-text-strong); }
.phoenix-b2b-panel .pb2b-burger:focus-visible { outline: none; box-shadow: var(--pb2b-shadow-focus); }

/* Koszyk — tło/kontur z tokenów (czytelny w light i dark). */
.phoenix-b2b-panel .pb2b-topbar-cart { background: var(--pb2b-bg-3); border: 1px solid var(--pb2b-border); color: var(--pb2b-text); }
.phoenix-b2b-panel .pb2b-topbar-cart.has-items { border-color: color-mix(in srgb, var(--pb2b-primary) 45%, var(--pb2b-border)); }

/* Kompaktowy przełącznik light/dark na bardzo wąskich ekranach (więcej powietrza). */
@media (max-width: 430px) {
	.phoenix-b2b-panel .pb2b-theme-toggle-track { width: 46px; height: 24px; }
	.phoenix-b2b-panel[data-pb2b-theme="light"] .pb2b-theme-toggle-knob { transform: translate(22px, -50%); }
}

/* =============================================================================
 * 6) KRZYŻYK ZAMYKANIA — na desktopie (≥1200) sidebar jest stały → ukryj X.
 *    (Naprawa regresji: v3-7 ustawiał display:inline-flex bezwarunkowo.)
 * ========================================================================== */
@media (min-width: 1200px) {
	.phoenix-b2b-panel .pb2b-sidebar-close { display: none !important; }
}

/* =============================================================================
 * 7) DASHBOARD — delikatny polish: równe wysokości, oddech, premium hero/CTA.
 *    (Desktop był już dobry — tu spójność i mobile.)
 * ========================================================================== */
/* Karty statystyk — równa wysokość w rzędzie, czytelne liczby. */
.phoenix-b2b-panel .pb2b-content .pb2b-stat { height: 100%; }
.phoenix-b2b-panel .pb2b-content .pb2b-stat-value { color: var(--pb2b-text-strong); }
.phoenix-b2b-panel .pb2b-content .pb2b-stat-label { color: var(--pb2b-text-muted); }

/* Hero — więcej oddechu i elegancki status. */
.phoenix-b2b-panel .pb2b-content .pb2b-hero-greeting { color: var(--pb2b-text-strong); }
.phoenix-b2b-panel .pb2b-content .pb2b-hero-company { color: var(--pb2b-text-muted); }

/* Szybkie akcje — równe kafelki, wygodny target i hover. */
.phoenix-b2b-panel .pb2b-content .pb2b-quick-tile {
	height: 100%;
	transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.phoenix-b2b-panel .pb2b-content .pb2b-quick-tile:hover { transform: translateY(-1px); }
.phoenix-b2b-panel .pb2b-content .pb2b-quick-tile-label { color: var(--pb2b-text); }

@media (max-width: 767px) {
	/* Czytelność i oddech sekcji na mobile. */
	.phoenix-b2b-panel .pb2b-content { gap: 14px; }
	.phoenix-b2b-panel .pb2b-content .pb2b-hero { padding: 16px; }
}

/* =============================================================================
 * 8) LIGHT/DARK — audyt kontrastu (globalnie, z tokenów). Formularze/selecty/
 *    dropdowny mają poprawne tło i tekst w obu trybach; aktywne elementy widać.
 * ========================================================================== */
.phoenix-b2b-panel .pb2b-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.phoenix-b2b-panel .pb2b-content select,
.phoenix-b2b-panel .pb2b-content textarea {
	background-color: var(--pb2b-bg-2);
	color: var(--pb2b-text-strong);
	border-color: var(--pb2b-border);
}
.phoenix-b2b-panel .pb2b-content input::placeholder,
.phoenix-b2b-panel .pb2b-content textarea::placeholder { color: var(--pb2b-text-dim); opacity: 1; }
.phoenix-b2b-panel .pb2b-content input:focus,
.phoenix-b2b-panel .pb2b-content select:focus,
.phoenix-b2b-panel .pb2b-content textarea:focus {
	outline: none;
	border-color: color-mix(in srgb, var(--pb2b-primary) 55%, var(--pb2b-border));
	box-shadow: var(--pb2b-shadow-focus);
}
/* Selecty natywne — strzałka i tło czytelne w dark. */
.phoenix-b2b-panel .pb2b-content select { color-scheme: light dark; }

/* Tytuły sekcji / nagłówki kart — pełny kontrast w obu trybach. */
.phoenix-b2b-panel .pb2b-content .pb2b-card-title,
.phoenix-b2b-panel .pb2b-content .pb2b-overline { color: var(--pb2b-text-strong); }
.phoenix-b2b-panel .pb2b-content .pb2b-muted { color: var(--pb2b-text-muted); }

/* =============================================================================
 * 9) PODKREŚLENIA / focus — czysto i estetycznie (bez „gołych" underline).
 * ========================================================================== */
.phoenix-b2b-panel a,
.phoenix-b2b-panel a:hover,
.phoenix-b2b-panel a:focus,
.phoenix-b2b-panel .pb2b-nav-item,
.phoenix-b2b-panel .pb2b-side-account-link,
.phoenix-b2b-panel .pb2b-app-footer-link { text-decoration: none; }
/* Dostępny, spójny focus dla linków tekstowych w treści. */
.phoenix-b2b-panel .pb2b-content a:focus-visible {
	outline: none; border-radius: 4px; box-shadow: var(--pb2b-shadow-focus);
}