/* v2.9.4 PANEL V3.4 SECTIONS UX FINAL */ /** * PhoenixB2B / SPJTRADE B2B — PANEL KLIENTA V3.4 — SECTIONS UX FINAL. * * Finalna warstwa UX zakładek panelu klienta. Ładowana JAKO OSTATNIA, PO * panel-v3.css, panel-v3-1.css i panel-v3-3.css → przy równej specyficzności * wygrywa w kaskadzie (bez wojny !important). Zakres ŚCIŚLE `.phoenix-b2b-panel`. * Wszystkie kolory/tła/obramowania pochodzą z tokenów (panel-v3-tokens.css), * więc light i dark działają „za darmo". * * Co dodaje/naprawia (zgodnie z briefem 2.9.4 — SECTIONS UX FINAL): * CZĘŚĆ 1 Menu boczne POGRUPOWANE — logiczne grupy z nagłówkami (PC i mobile), * mniej ścisku, czytelna hierarchia. Aktywna pozycja czytelna w obu * motywach (naprawa „białego tekstu na jasnym" w trybie light). * CZĘŚĆ 2 Nagłówek sekcji = tytuł + krótki opis (.pb2b-app-section-heading / * .pb2b-app-section-sub) + akcja po prawej. Wariant „tight" dla * sekcji z osadzonym sklepem/katalogiem. * CZĘŚĆ 3 Intro sekcji (Cennik CSV / Import CSV) — tytuł + opis nad treścią * shortcode'u, bez podwójnej karty. * CZĘŚĆ 4 Dashboard — spójne odstępy, równe kafelki Szybkich akcji, sekcje * produktów bez wielkiej pustki. * CZĘŚĆ 5 Spójność: light/dark + zero poziomego scrolla (pas bezpieczeństwa * dla nowych elementów). */ /* ========================================================================= * CZĘŚĆ 1 — MENU BOCZNE POGRUPOWANE (nagłówki grup, czytelna hierarchia) * ========================================================================= */ /* Grupa sekcji: pozycje wewnątrz trzymają ciasny odstęp (jak dotąd 2px). */ .phoenix-b2b-panel .pb2b-nav-group { display: flex; flex-direction: column; gap: 2px; } /* Wyraźny odstęp MIĘDZY grupami (nagłówek grupy dodatkowo je rozdziela). */ .phoenix-b2b-panel .pb2b-nav-group + .pb2b-nav-group { margin-top: 16px; } /* Pulpit (grupa przypięta, bez nagłówka) — mały odstęp do pierwszej grupy. */ .phoenix-b2b-panel .pb2b-nav-group-pinned { margin-bottom: 4px; } /* Nagłówek grupy — drobny, wersaliki, wyrównany do tekstu pozycji (12px wcięcia * pozycji + 20px ikona + 12px gap ≈ 12px paddingu wystarcza; etykieta nad ikoną). */ .phoenix-b2b-panel .pb2b-nav-group-title { margin: 0 0 6px; padding: 0 12px; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pb2b-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-user-select: none; user-select: none; } /* Aktywna pozycja menu — czytelna w OBU motywach. * Baza (panel-v3.css) ustawia color:#fff, co na jasnym, półprzezroczystym tle * aktywnej pozycji jest nieczytelne. W trybie jasnym wymuszamy ciemny fiolet. */ .phoenix-b2b-panel:not([data-pb2b-theme="dark"]) .pb2b-nav-item.is-active, .phoenix-b2b-panel:not([data-pb2b-theme="dark"]) .pb2b-nav-item.is-active .pb2b-nav-label { color: var(--pb2b-primary-strong); } .phoenix-b2b-panel:not([data-pb2b-theme="dark"]) .pb2b-nav-item.is-active { background: var(--pb2b-primary-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pb2b-primary) 28%, transparent); } .phoenix-b2b-panel:not([data-pb2b-theme="dark"]) .pb2b-nav-item.is-active .pb2b-nav-icon { color: var(--pb2b-primary); } /* ========================================================================= * CZĘŚĆ 2 — NAGŁÓWEK SEKCJI: TYTUŁ + KRÓTKI OPIS (+ akcja po prawej) * ========================================================================= */ .phoenix-b2b-panel .pb2b-app-section-heading { display: flex; flex-direction: column; gap: 3px; min-width: 0; /* pozwala ellipsis / chroni przed poziomym scrollem */ flex: 1 1 auto; } .phoenix-b2b-panel .pb2b-app-section-sub { margin: 0; font-size: 12.5px; line-height: 1.4; font-weight: 400; color: var(--pb2b-text-muted); } /* Gdy jest opis (2 wiersze), wyrównaj nagłówek do góry; akcja po prawej centrowana. */ .phoenix-b2b-panel .pb2b-app-section-header:has(.pb2b-app-section-sub) { align-items: flex-start; } .phoenix-b2b-panel .pb2b-app-section-header > .pb2b-app-button, .phoenix-b2b-panel .pb2b-app-section-header > .pb2b-app-badge { flex: 0 0 auto; align-self: center; } /* Tytuł sekcji nieco mocniejszy w warstwie sekcji (spójny z resztą paneli). */ .phoenix-b2b-panel .pb2b-app-section-heading .pb2b-app-section-title { font-size: 15px; font-weight: 700; } /* Wariant „tight" — sekcje z osadzonym sklepem/katalogiem (flush card). */ .phoenix-b2b-panel .pb2b-section-header-tight { padding-top: 16px; padding-bottom: 14px; } /* Na wąsko: nagłówek może się zawinąć, akcja schodzi pod tytuł (zero scrolla). */ @media (max-width: 600px) { .phoenix-b2b-panel .pb2b-app-section-header { flex-wrap: wrap; } .phoenix-b2b-panel .pb2b-app-section-header > .pb2b-app-button { align-self: flex-start; } } /* ========================================================================= * CZĘŚĆ 3 — INTRO SEKCJI (Cennik CSV / Import CSV) — tytuł + opis nad treścią * ========================================================================= */ .phoenix-b2b-panel .pb2b-section-intro { margin: 0 0 4px; padding: 0; } .phoenix-b2b-panel .pb2b-section-intro-title { margin: 0 0 4px; font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--pb2b-text); } .phoenix-b2b-panel .pb2b-section-intro-sub { margin: 0; font-size: 13px; line-height: 1.45; color: var(--pb2b-text-muted); } /* ========================================================================= * CZĘŚĆ 4 — DASHBOARD: równe kafelki, mniej pustki, sekcje produktów spójne * ========================================================================= */ /* Kafelki Szybkich akcji — równa wysokość (grid stretch) + czytelne wyśrodkowanie. */ .phoenix-b2b-panel .pb2b-quick-tiles { align-items: stretch; } .phoenix-b2b-panel .pb2b-quick-tile { min-height: 84px; height: 100%; justify-content: center; } /* Sekcje produktów na dashboardzie (Najczęściej kupowane / Ostatnio oglądane) — * siatka wypełnia szerokość, więc kilka produktów nie zostawia wielkiej dziury. */ .phoenix-b2b-panel .pb2b-card-body > .pb2b-shop { min-height: 0; margin: 0; } .phoenix-b2b-panel .pb2b-card-body > .pb2b-shop > .pb2b-card-grid, .phoenix-b2b-panel .pb2b-card-body > .pb2b-shop > .pb2b-shop-grid { width: 100%; } /* Pusty stan bloku produktów — wycentrowany, „intencjonalny", nie pusta dziura. */ .phoenix-b2b-panel .pb2b-shop-empty-sm { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; text-align: center; color: var(--pb2b-text-muted); } /* Drobne dopięcie odstępów hero/banerów (mniej pustej przestrzeni u góry). */ .phoenix-b2b-panel .pb2b-banners { margin-top: 0; } /* ========================================================================= * CZĘŚĆ 5 — SPÓJNOŚĆ light/dark + ZERO poziomego scrolla (pas bezpieczeństwa) * ========================================================================= */ /* Nowe elementy nigdy nie wychodzą poza szerokość kontenera. */ .phoenix-b2b-panel .pb2b-app-section-heading, .phoenix-b2b-panel .pb2b-app-section-sub, .phoenix-b2b-panel .pb2b-section-intro, .phoenix-b2b-panel .pb2b-nav-group { max-width: 100%; min-width: 0; } /* Opis sekcji dziedziczy poprawny token koloru również w trybie ciemnym. */ .phoenix-b2b-panel[data-pb2b-theme="dark"] .pb2b-app-section-sub, .phoenix-b2b-panel[data-pb2b-theme="dark"] .pb2b-section-intro-sub { color: var(--pb2b-text-muted); } /* Dostępność: szanuj „mniej ruchu". */ @media (prefers-reduced-motion: reduce) { .phoenix-b2b-panel .pb2b-quick-tile { transition: none; } }