/**
 * PhoenixB2B 2.13.20 — Historia zamówień klienta: filtry + karty + stan płatności.
 *
 * Zakres: WYŁĄCZNIE sekcja „Historia zamówień” (`.pb2b-orders-section`),
 * plus dwa małe, współdzielone komponenty:
 *   - `.pb2b-pay-pill`  — pill stanu płatności (lista, pulpit, oba modale),
 *   - `.pb2b-od-alert`  — komunikat/ostrzeżenie płatności w modalach.
 *
 * Zero zmian w: checkoucie, dostawach, fakturach, kontenerach, menu, sidebarze,
 * wyglądzie globalnym panelu. Wszystko scoped pod `.phoenix-b2b-panel`.
 *
 * Tryb jasny/ciemny wyłącznie przez tokeny `--pb2b-*` (panel-v3-tokens.css),
 * więc sekcja dziedziczy motyw panelu bez własnych media-query prefers-color.
 *
 * PC     → karty w jednym strumieniu, nagłówek karty w dwóch kolumnach.
 * Mobile → chipy jako poziomy scroll, daty w jednej karcie, „Szczegóły”
 *          pełnej szerokości, duże pola dotykowe (min. 44 px).
 */

/* ==========================================================================
 * 1) PASEK FILTRÓW
 * ========================================================================== */
.phoenix-b2b-panel .pb2b-orders-section .pb2b-of {
	margin: 0 0 12px;
}

.phoenix-b2b-panel .pb2b-of-card {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	padding: 14px;
	background: var(--pb2b-surface-soft, #F1F4FB);
	border: 1px solid var(--pb2b-border, rgba(15, 23, 42, 0.10));
	border-radius: var(--pb2b-radius-sm, 10px);
}

.phoenix-b2b-panel .pb2b-of-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.phoenix-b2b-panel .pb2b-of-field-search {
	flex: 1 1 260px;
}

.phoenix-b2b-panel .pb2b-of-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--pb2b-muted, #475569);
}

.phoenix-b2b-panel .pb2b-of-field input[type="search"],
.phoenix-b2b-panel .pb2b-of-field input[type="date"] {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	font: inherit;
	font-size: 15px;
	color: var(--pb2b-text, #0F172A);
	background: var(--pb2b-bg-2, #FFFFFF);
	border: 1px solid var(--pb2b-border, rgba(15, 23, 42, 0.10));
	border-radius: var(--pb2b-radius-xs, 8px);
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
}

.phoenix-b2b-panel .pb2b-of-field input[type="search"]:focus,
.phoenix-b2b-panel .pb2b-of-field input[type="date"]:focus {
	outline: none;
	border-color: var(--pb2b-primary, #7C3AED);
	box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

/* Ikona kalendarza w dark mode nie może zniknąć na ciemnym tle. */
.phoenix-b2b-panel[data-pb2b-theme="dark"] .pb2b-of-field input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1) opacity(0.75);
}

.phoenix-b2b-panel .pb2b-of-dates {
	display: flex;
	gap: 10px;
	flex: 0 1 auto;
}

.phoenix-b2b-panel .pb2b-of-dates .pb2b-of-field {
	flex: 1 1 150px;
}

.phoenix-b2b-panel .pb2b-of-actions {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}

.phoenix-b2b-panel .pb2b-of-actions .pb2b-app-button {
	min-height: 44px;
}

/* ==========================================================================
 * 2) CHIPY STATUSÓW — mobile: poziomy scroll bez łamania układu
 * ========================================================================== */
.phoenix-b2b-panel .pb2b-of-chips {
	display: flex;
	gap: 8px;
	margin: 0 0 14px;
	padding: 2px 0 6px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.phoenix-b2b-panel .pb2b-of-chips::-webkit-scrollbar {
	display: none;
}

.phoenix-b2b-panel .pb2b-of-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	color: var(--pb2b-text-soft, #334155);
	background: var(--pb2b-surface-soft, #F1F4FB);
	border: 1px solid var(--pb2b-border, rgba(15, 23, 42, 0.10));
	border-radius: 999px;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.phoenix-b2b-panel .pb2b-of-chip:hover,
.phoenix-b2b-panel .pb2b-of-chip:focus-visible {
	color: var(--pb2b-text, #0F172A);
	background: var(--pb2b-bg-4, #E7ECF7);
	border-color: var(--pb2b-border-strong, rgba(15, 23, 42, 0.20));
}

.phoenix-b2b-panel .pb2b-of-chip.is-active {
	color: var(--pb2b-primary-contrast, #FFFFFF);
	background: var(--pb2b-primary, #7C3AED);
	border-color: var(--pb2b-primary, #7C3AED);
}

.phoenix-b2b-panel .pb2b-of-summary {
	margin: 0 0 12px;
	font-size: 13px;
}

/* ==========================================================================
 * 3) KARTA ZAMÓWIENIA
 * ========================================================================== */
.phoenix-b2b-panel .pb2b-orders-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.phoenix-b2b-panel .pb2b-oc {
	padding: 14px 16px;
	background: var(--pb2b-bg-2, #FFFFFF);
	border: 1px solid var(--pb2b-border, rgba(15, 23, 42, 0.10));
	border-radius: var(--pb2b-radius-sm, 10px);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.phoenix-b2b-panel .pb2b-oc:hover {
	border-color: var(--pb2b-border-strong, rgba(15, 23, 42, 0.20));
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

/* ---- Nagłówek: numer + data po lewej, suma + status po prawej ---- */
.phoenix-b2b-panel .pb2b-oc-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--pb2b-border, rgba(15, 23, 42, 0.10));
}

.phoenix-b2b-panel .pb2b-oc-ident,
.phoenix-b2b-panel .pb2b-oc-topright {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.phoenix-b2b-panel .pb2b-oc-topright {
	align-items: flex-end;
	text-align: right;
}

.phoenix-b2b-panel .pb2b-oc-number,
.phoenix-b2b-panel .pb2b-oc-total {
	font-size: 16px;
	color: var(--pb2b-text, #0F172A);
}

.phoenix-b2b-panel .pb2b-oc-number strong,
.phoenix-b2b-panel .pb2b-oc-total strong {
	font-weight: 700;
}

.phoenix-b2b-panel .pb2b-oc-date,
.phoenix-b2b-panel .pb2b-oc-statusline {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 13px;
	color: var(--pb2b-muted, #475569);
}

/* Etykieta („Numer:”, „Data:”, „Status:”, „Suma:”) — zawsze ze spacją po
   dwukropku, żeby nie powstawało „NUMER#8728”. */
.phoenix-b2b-panel .pb2b-oc-key {
	margin-right: 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--pb2b-dim, #64748B);
}

/* ---- Metryki: pozycje / płatność / metoda ---- */
.phoenix-b2b-panel .pb2b-oc-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 12px 0 0;
}

.phoenix-b2b-panel .pb2b-oc-cell {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.phoenix-b2b-panel .pb2b-oc-cell dt {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--pb2b-dim, #64748B);
}

.phoenix-b2b-panel .pb2b-oc-cell dd {
	margin: 0;
	font-size: 14px;
	color: var(--pb2b-text, #0F172A);
	overflow-wrap: anywhere;
}

.phoenix-b2b-panel .pb2b-oc-note {
	margin: 12px 0 0;
	padding: 10px 12px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--pb2b-text-soft, #334155);
	background: var(--pb2b-surface-soft, #F1F4FB);
	border-left: 3px solid var(--pb2b-info, #38BDF8);
	border-radius: var(--pb2b-radius-xs, 8px);
}

.phoenix-b2b-panel .pb2b-oc-note.is-warning {
	border-left-color: var(--pb2b-warning, #F59E0B);
}

.phoenix-b2b-panel .pb2b-oc-foot {
	display: flex;
	justify-content: flex-end;
	margin-top: 14px;
}

.phoenix-b2b-panel .pb2b-oc-details {
	min-height: 44px;
}

.phoenix-b2b-panel .pb2b-orders-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	justify-content: center;
	margin-top: 18px;
}

/* ==========================================================================
 * 4) PILL STANU PŁATNOŚCI (współdzielony: lista, pulpit, modale)
 *
 * Kolory mają jednoznacznie odróżniać „opłacone” od „transakcja rozpoczęta”.
 * `reference_only` jest ŻÓŁTY, nie zielony — bo transaction_id z PayU nie jest
 * dowodem opłacenia (fix 2.13.20).
 * ========================================================================== */
.phoenix-b2b-panel .pb2b-pay-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
	white-space: nowrap;
	border: 1px solid transparent;
	border-radius: 999px;
}

.phoenix-b2b-panel .pb2b-pay-pill.is-paid {
	color: var(--pb2b-success, #22C55E);
	background: rgba(34, 197, 94, 0.14);
	border-color: rgba(34, 197, 94, 0.30);
}

.phoenix-b2b-panel .pb2b-pay-pill.is-reference_only,
.phoenix-b2b-panel .pb2b-pay-pill.is-pending {
	color: var(--pb2b-warning, #F59E0B);
	background: rgba(245, 158, 11, 0.14);
	border-color: rgba(245, 158, 11, 0.30);
	white-space: normal;
}

.phoenix-b2b-panel .pb2b-pay-pill.is-failed {
	color: var(--pb2b-danger, #EF4444);
	background: rgba(239, 68, 68, 0.14);
	border-color: rgba(239, 68, 68, 0.30);
}

.phoenix-b2b-panel .pb2b-pay-pill.is-cancelled,
.phoenix-b2b-panel .pb2b-pay-pill.is-unpaid {
	color: var(--pb2b-muted, #475569);
	background: rgba(148, 163, 184, 0.18);
	border-color: rgba(148, 163, 184, 0.32);
}

.phoenix-b2b-panel[data-pb2b-theme="dark"] .pb2b-pay-pill.is-cancelled,
.phoenix-b2b-panel[data-pb2b-theme="dark"] .pb2b-pay-pill.is-unpaid {
	color: #CBD5E1;
}

/* ==========================================================================
 * 5) KOMUNIKAT PŁATNOŚCI W MODALACH + referencja techniczna
 * ========================================================================== */
.phoenix-b2b-panel .pb2b-od-alert {
	margin: 10px 0 0;
	padding: 10px 12px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--pb2b-text-soft, #334155);
	background: var(--pb2b-surface-soft, #F1F4FB);
	border-left: 3px solid var(--pb2b-info, #38BDF8);
	border-radius: var(--pb2b-radius-xs, 8px);
}

.phoenix-b2b-panel .pb2b-od-alert.is-warning {
	border-left-color: var(--pb2b-warning, #F59E0B);
}

.phoenix-b2b-panel .pb2b-od-ref {
	display: inline-block;
	max-width: 100%;
	padding: 2px 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	color: var(--pb2b-text-soft, #334155);
	background: var(--pb2b-surface-soft, #F1F4FB);
	border: 1px solid var(--pb2b-border, rgba(15, 23, 42, 0.10));
	border-radius: 6px;
	overflow-wrap: anywhere;
}

.phoenix-b2b-panel .pb2b-od-paid.is-pending {
	color: var(--pb2b-warning, #F59E0B);
	background: rgba(245, 158, 11, 0.14);
}

/* ==========================================================================
 * 6) MOBILE
 * ========================================================================== */
@media (max-width: 782px) {
	.phoenix-b2b-panel .pb2b-of-card {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.phoenix-b2b-panel .pb2b-of-field-search,
	.phoenix-b2b-panel .pb2b-of-dates,
	.phoenix-b2b-panel .pb2b-of-actions {
		flex: 1 1 auto;
		width: 100%;
	}

	/* Daty zawsze obok siebie w jednej karcie — nigdy „rozjechane”. */
	.phoenix-b2b-panel .pb2b-of-dates {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.phoenix-b2b-panel .pb2b-of-actions .pb2b-app-button {
		flex: 1 1 0;
		justify-content: center;
	}

	/* Chipy poza padding karty — scroll „od krawędzi do krawędzi”. */
	.phoenix-b2b-panel .pb2b-of-chips {
		margin-right: calc(var(--pb2b-card-pad, 16px) * -1);
		margin-left: calc(var(--pb2b-card-pad, 16px) * -1);
		padding-right: var(--pb2b-card-pad, 16px);
		padding-left: var(--pb2b-card-pad, 16px);
	}

	.phoenix-b2b-panel .pb2b-oc-head {
		flex-direction: column;
	}

	.phoenix-b2b-panel .pb2b-oc-topright {
		align-items: flex-start;
		text-align: left;
	}

	.phoenix-b2b-panel .pb2b-oc-meta {
		grid-template-columns: 1fr 1fr;
	}

	.phoenix-b2b-panel .pb2b-oc-foot .pb2b-oc-details {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 420px) {
	.phoenix-b2b-panel .pb2b-oc-meta {
		grid-template-columns: 1fr;
	}
}