/* ==========================================================================
   Booking Detail Redesign (May 2026)
   --------------------------------------------------------------------------
   Visual + structural restyle of /bookings/detail/{id}. NO new actions, no
   removed actions. Mirrors the POS visual vocabulary so the two surfaces
   feel like one product. See docs/BOOKING_DETAIL_REDESIGN_PLAN.md.
   ========================================================================== */

/* ----- Tokens (reused from POS where possible) ----- */
:root {
	--bd-navy: #003264;
	--bd-line: #eef0f4;
	--bd-card-bg: #ffffff;
	--bd-page-bg: #f6f7f9;
	--bd-mute: #6d87a1;
	--bd-mute-2: #94a3b8;
	--bd-success: #16a34a;
	--bd-warn: #d97706;
	--bd-danger: #dc2626;
	--bd-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
	--bd-radius: 12px;
	--bd-radius-sm: 8px;
}

/* ----- Page shell ----- */
.bd-page {
	background: var(--bd-page-bg);
	min-height: 100%;
}

.bd-shell {
	padding: 24px 32px 12px;
	max-width: 1600px;
	margin: 0 auto;
}

/* Help banner sits below the bd-shell. Match horizontal padding so the
   alert lines up with the cards above, and sit close to the cards.
   The inner `.help-box` ships with its own `mt-3 mb-3`; we zero those
   out so the only spacing is the 8px above (from this banner's
   margin-top) and shell padding-bottom — keeping the visual gap small. */
.bd-help-banner {
	max-width: 1600px;
	margin: 0 auto 16px;
	padding: 0 32px;
}
.bd-help-banner .help-box {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
@media (max-width: 991px) {
	.bd-help-banner { padding: 0 16px; }
}

@media (max-width: 991px) {
	.bd-shell {
		padding: 16px 16px 120px;
	}
}

/* ----- Unified header -----
   Leans on the existing site-wide `.product-details-header.title` class for
   outer chrome (background / border-bottom / padding). We only add
   internal layout helpers below for the inline pills, metadata, dropdown,
   primary CTA — without overriding the global pattern. */
.bd-header {
	gap: 12px;
	flex-wrap: wrap;
}

/* Back button intentionally NOT styled here — uses the site-wide
   `.back-button` styling via <x-breadcrumb.back /> for consistency
   with every other page header. */

.bd-header-title-block {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	flex: 1 1 auto;
	min-width: 0;
}

.bd-header-title {
	/* Match the site-wide section-title used on every other page header */
	font-size: 20px;
	font-weight: 600;
	color: #303233;
	line-height: 26px;
	margin: 0;
	white-space: nowrap;
}

.bd-header-meta {
	font-size: 12.5px;
	color: var(--bd-mute);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
/* Only render the dot BETWEEN consecutive metadata pieces — no leading dot.
   `:first-of-type` matches the first <span> sibling (which is usually a pill,
   not a meta), so we use the adjacent sibling combinator instead. */
.bd-header-meta + .bd-header-meta::before {
	content: "·";
	color: var(--bd-mute-2);
	margin: 0 4px;
}

/* Hide the secondary meta strip (booking type · duration · total) once the
   right-rail layout collapses — at that width the pills + title + Actions
   dropdown + primary CTA already fill the row, and the meta info just
   wraps to a second line that pushes everything down. The same details
   are still surfaced inside the Customer / Experience date / Payment
   cards lower on the page, so hiding here is purely a UI compaction. */
@media (max-width: 1199px) {
	.bd-header-meta { display: none; }
}

.bd-header-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
}
.bd-header-pill--archived {
	background: #e5e7eb;
	color: #4b5563;
}

.bd-header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.bd-actions-trigger {
	background: var(--bd-card-bg);
	border: 1px solid var(--bd-line);
	color: var(--bd-navy);
	padding: 8px 14px;
	border-radius: var(--bd-radius-sm);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background 0.12s;
}
.bd-actions-trigger:hover { background: var(--bd-page-bg); }
.bd-actions-trigger img { width: 12px; height: 12px; }

.bd-cta-primary {
	background: var(--bd-navy);
	color: #fff;
	border: 0;
	padding: 9px 18px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: opacity 0.12s, transform 0.05s;
}
.bd-cta-primary:hover { opacity: 0.92; }
.bd-cta-primary:active { transform: translateY(1px); }
.bd-cta-primary img { width: 14px; height: 14px; filter: brightness(0) invert(1); }

@media (max-width: 767px) {
	.bd-header { padding: 12px 16px; flex-wrap: wrap; row-gap: 8px; }
	.bd-header-meta { display: none; }
	.bd-header-title-block { width: 100%; }
	.bd-header-actions { margin-left: auto; }
	.bd-cta-primary {
		position: fixed;
		bottom: 16px;
		left: 16px;
		right: 16px;
		justify-content: center;
		padding: 14px 20px;
		font-size: 15px;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
		z-index: 50;
	}
}

/* ----- Banners (reskin only, no behavior change) ----- */
.bd-banner {
	margin: 16px 32px 0;
	padding: 14px 18px;
	border-radius: var(--bd-radius-sm);
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
}
.bd-banner--warning {
	background: #fff7ed;
	border: 1px solid #fed7aa;
	color: #9a3412;
}
.bd-banner--shortage {
	background: #fef9c3;
	border: 1px solid #fde68a;
	color: #854d0e;
	justify-content: space-between;
}
.bd-banner__icon {
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--bd-warn);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	flex-shrink: 0;
}
.bd-banner__title {
	font-weight: 600;
	color: inherit;
}
.bd-banner__msg {
	color: inherit;
	margin: 2px 0 0;
	font-size: 13px;
}
.bd-banner__dismiss {
	background: transparent;
	border: 1px solid currentColor;
	color: inherit;
	padding: 4px 12px;
	border-radius: var(--bd-radius-sm);
	font-size: 12.5px;
	cursor: pointer;
}

@media (max-width: 767px) {
	.bd-banner { margin: 12px 16px 0; }
}

/* ----- Tabs (label only; CSS unchanged from existing nav-tabs) ----- */
.bd-tabs-wrap {
	padding: 16px 32px 0;
}
@media (max-width: 767px) {
	.bd-tabs-wrap { padding: 12px 16px 0; }
}

/* ----- Two-column layout ----- */
.bd-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 24px;
	align-items: start;
}
@media (max-width: 1279px) {
	.bd-layout {
		grid-template-columns: 1fr;
	}
}

.bd-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.bd-side { min-width: 0; }

/* Sticky right rail on wide viewports only. Below 1280, the rail flows
   inline. On mobile we add a sticky-bottom payment summary bar instead
   (see .bd-side-mobile-bar). */
@media (min-width: 1280px) {
	.bd-side {
		position: sticky;
		top: 16px;
	}
}

/* ----- Cards ----- */
.bd-card {
	background: var(--bd-card-bg);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius);
	box-shadow: var(--bd-card-shadow);
	padding: 20px 22px;
}
.bd-card + .bd-card { /* nothing — gap handled by parent grid */ }

.bd-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.bd-card__title {
	font-size: 15px;
	font-weight: 600;
	/* Card section labels use the site-default text color, not navy */
	color: #303233;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.bd-card__title-count {
	color: var(--bd-mute);
	font-weight: 500;
	font-size: 13px;
}
.bd-card__action {
	background: transparent;
	border: 0;
	color: var(--bd-navy);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.bd-card__action:hover { background: var(--bd-page-bg); }

/* ----- Two-up card row (Customer + Rental period) ----- */
.bd-card-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 767px) {
	.bd-card-row { grid-template-columns: 1fr; }
}

/* ----- Customer card ----- */
.bd-customer__name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--bd-navy);
	text-decoration: none;
	margin-bottom: 4px;
}
.bd-customer__name:hover { text-decoration: underline; }
.bd-customer__contact {
	font-size: 13px;
	color: var(--bd-mute);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-bottom: 8px;
}
.bd-customer__contact-label {
	color: var(--bd-mute-2);
	margin-right: 4px;
}
.bd-customer__divider {
	border-top: 1px solid var(--bd-line);
	margin: 12px 0;
}
.bd-customer__source-line {
	font-size: 12px;
	color: var(--bd-mute);
}
.bd-customer__source-label {
	color: var(--bd-mute-2);
	margin-right: 4px;
}

/* ----- Rental period card ----- */
.bd-period__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.bd-period__col {
	min-width: 0;
}
.bd-period__label {
	font-size: 11px;
	font-weight: 600;
	color: var(--bd-mute);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.bd-period__time {
	font-size: 16px;
	font-weight: 600;
	color: var(--bd-navy);
	line-height: 1.2;
	margin-bottom: 2px;
}
.bd-period__date {
	font-size: 13px;
	color: var(--bd-mute);
}
.bd-period__location-block {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--bd-line);
}
.bd-period__location-name {
	font-size: 14px;
	font-weight: 500;
	color: var(--bd-navy);
}
.bd-period__location-addr {
	font-size: 12.5px;
	color: var(--bd-mute);
	margin-top: 2px;
	line-height: 1.4;
}
.bd-period__duration {
	margin-top: 14px;
	font-size: 13px;
	color: var(--bd-navy);
	font-weight: 500;
}
.bd-period__made {
	font-size: 12px;
	color: var(--bd-mute);
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px dashed var(--bd-line);
}

/* Click-to-move affordance on the period block */
.bd-period__grid--clickable {
	cursor: pointer;
	border-radius: 8px;
	margin: -8px;
	padding: 8px;
	transition: background-color 0.12s ease;
}
.bd-period__grid--clickable:hover {
	background-color: #f1f5fa;
}
.bd-period__grid--clickable:hover .bd-period__time {
	color: #003264;
}
.bd-period__edit-btn {
	font-size: 12px;
	font-weight: 500;
	color: #003264;
	background: transparent;
	border: 1px solid #eaeaea;
	border-radius: 8px;
	padding: 4px 10px;
	cursor: pointer;
	transition: all 0.12s ease;
}
.bd-period__edit-btn:hover {
	background-color: #003264;
	color: #fff;
	border-color: #003264;
}

/* ----- Move dates panel ----- */
.bd-move__current {
	background-color: #f6f7f9;
	border: 1px solid #eaeaea;
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 16px;
}
.bd-move__current-label {
	font-size: 11px;
	color: #6d87a1;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 4px;
}
.bd-move__current-value {
	font-size: 14px;
	color: #303233;
}
.bd-move__field-label {
	font-size: 12px;
	color: #6d87a1;
	font-weight: 500;
	margin-bottom: 6px;
	display: block;
}
.bd-move__select {
	font-size: 14px;
	padding: 8px 32px 8px 12px;
	border-radius: 8px;
	border: 1px solid #eaeaea;
}
.bd-move__exp-card {
	border: 1px solid #eaeaea;
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 12px;
}
.bd-move__exp-name {
	font-weight: 600;
	font-size: 14px;
	color: #303233;
	margin-bottom: 4px;
}
.bd-move__exp-meta {
	font-size: 12px;
	color: #6d87a1;
	margin-bottom: 10px;
}
.bd-move__exp-empty {
	font-size: 13px;
	color: #6d87a1;
	font-style: italic;
	margin-bottom: 0;
}
.bd-move__slot {
	padding: 10px 16px;
	border: 1px solid #eaeaea;
	background-color: #fff;
	color: #303233;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.bd-move__slot--selected {
	border-color: #003264;
	background-color: #003264;
	color: #fff;
}
.bd-move__slot--full {
	background-color: #f3f4f6;
	color: #6b7280;
	cursor: not-allowed;
	text-decoration: line-through;
}
.bd-move__slot-meta {
	font-size: 11px;
	opacity: 0.85;
}
.bd-move__store-note {
	margin-top: 12px;
	font-size: 12px;
	color: #6d87a1;
	padding: 8px 12px;
	background: #f9fafb;
	border-radius: 6px;
}
.bd-move__alert {
	margin-top: 16px;
	padding: 12px;
	background-color: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
}
.bd-move__alert-title {
	font-weight: 600;
	font-size: 13px;
	color: #991b1b;
	margin-bottom: 6px;
}
.bd-move__alert-list {
	padding-left: 20px;
	font-size: 13px;
	color: #991b1b;
	margin-bottom: 0;
}
.bd-move__error-banner {
	margin-top: 16px;
	padding: 10px 12px;
	background-color: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	font-size: 13px;
	color: #991b1b;
}
.bd-move__pricing {
	margin-top: 16px;
	padding: 12px;
	border-radius: 8px;
}
.bd-move__pricing--charge {
	background-color: #fff7ed;
	border: 1px solid #fed7aa;
}
.bd-move__pricing--refund {
	background-color: #f0fdf4;
	border: 1px solid #bbf7d0;
}
.bd-move__pricing-row {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: #4b5563;
	margin-top: 2px;
}
.bd-move__pricing-row--total {
	font-size: 14px;
	font-weight: 600;
	margin-top: 6px;
}
.bd-move__pricing-row--charge {
	color: #9a3412;
}
.bd-move__pricing-row--refund {
	color: #15803d;
}
.bd-move__loading {
	font-size: 12px;
	color: #6d87a1;
	font-style: italic;
}
.bd-move__loading-fade {
	opacity: 0.5;
	pointer-events: none;
}
.bd-move__action-row {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
}
.bd-move__btn {
	border-radius: 8px;
	padding: 8px 16px;
	min-height: 44px;
}
.bd-move__btn-primary {
	background-color: #003264;
	border-color: #003264;
}

/* ----- Cancellation card (shown only when cancelled) ----- */
.bd-cancellation {
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: var(--bd-radius);
	padding: 18px 22px;
}
.bd-cancellation__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--bd-danger);
	margin-bottom: 8px;
}
.bd-cancellation__reason {
	font-size: 14px;
	color: #7f1d1d;
	margin-bottom: 4px;
}
.bd-cancellation__notes {
	font-size: 13px;
	color: #991b1b;
}

/* Inventory cell — render each tracked inventory item on its own line so
   long lists of identifiers (#123, #124, …) are easy to scan in a row. */
.bd-items-card .inventory-line {
	display: block;
	line-height: 1.6;
}

/* ----- Items section (visual chrome only — table content unchanged) ----- */
.bd-items-card .table-bordered {
	margin-bottom: 0;
}
.bd-items-card__title-divider {
	margin-top: 8px;
	margin-bottom: 12px;
	border-top: 1px solid var(--bd-line);
}
.bd-items-store-section {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--bd-line);
}
.bd-items-store-section__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--bd-navy);
	margin-bottom: 12px;
}

/* ----- Participants card ----- */
.bd-participants-empty {
	font-size: 13px;
	color: var(--bd-mute);
	padding: 10px 0;
}
.bd-participants-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bd-participant-row {
	display: flex;
	flex-direction: column;
	padding: 10px 0;
	border-top: 1px solid var(--bd-line);
}
.bd-participant-row:first-child {
	border-top: 0;
	padding-top: 0;
}
.bd-participant-row__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.bd-participant-row__name {
	font-size: 14px;
	font-weight: 500;
	color: var(--bd-navy);
	text-decoration: none;
}
.bd-participant-row__name:hover { text-decoration: underline; }
.bd-participant-row__head-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}
.bd-participant-row__edit,
.bd-participant-row__remove {
	background: transparent;
	border: 0;
	color: var(--bd-mute);
	cursor: pointer;
	padding: 4px 6px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
}
.bd-participant-row__edit { font-size: 14px; }
.bd-participant-row__remove { font-size: 16px; }
.bd-participant-row__edit:hover {
	background: rgba(0, 50, 100, 0.06);
	color: var(--bd-navy);
}
.bd-participant-row__remove:hover { color: var(--bd-danger); }

/* Inline name/email edit panel that replaces the name link in-place. */
.bd-participant-row.is-editing {
	background: #fff8e6;
	border: 1px solid #f3d7a2;
	border-radius: var(--bd-radius-sm);
	padding: 10px 12px;
}
.bd-participant-row__edit-fields {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}
.bd-participant-row__edit-name-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
@media (max-width: 575px) {
	.bd-participant-row__edit-name-grid { grid-template-columns: 1fr; }
}
.bd-participant-row__edit-input {
	width: 100%;
	padding: 7px 10px;
	font-size: 13px;
	color: var(--bd-navy);
	background: var(--bd-card-bg);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-sm);
	font-family: inherit;
}
.bd-participant-row__edit-input:focus {
	outline: none;
	border-color: var(--bd-navy);
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.06);
}
.bd-participant-row__edit-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 4px;
}
.bd-participant-row__edit-cancel,
.bd-participant-row__edit-save {
	border-radius: var(--bd-radius-sm);
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	min-width: 90px;
	line-height: 1.2;
	transition: background 0.12s, opacity 0.12s;
}
.bd-participant-row__edit-cancel {
	background: var(--bd-card-bg);
	border: 1px solid var(--bd-line);
	color: var(--bd-navy);
}
.bd-participant-row__edit-cancel:hover { background: var(--bd-page-bg); }
.bd-participant-row__edit-save {
	background: var(--bd-navy);
	border: 1px solid var(--bd-navy);
	color: #fff;
}
.bd-participant-row__edit-save:hover { opacity: 0.92; }
.bd-participant-row__edit-save:disabled { opacity: 0.6; cursor: not-allowed; }
.bd-participant-row__booker-tag {
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bd-mute);
	background: var(--bd-page-bg);
	padding: 2px 8px;
	border-radius: 999px;
	flex-shrink: 0;
}
.bd-participant-row__ticket {
	margin-top: 6px;
}
.bd-participant-row__ticket-select {
	width: 100%;
	max-width: 320px;
	padding: 6px 10px;
	font-size: 12.5px;
	color: var(--bd-navy);
	background: var(--bd-card-bg);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-sm);
}
.bd-participant-row__ticket-select:focus {
	outline: none;
	border-color: var(--bd-navy);
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.06);
}
.bd-participant-row__notes-input {
	margin-top: 6px;
	width: 100%;
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-sm);
	padding: 6px 10px;
	font-size: 12.5px;
	color: var(--bd-navy);
	background: var(--bd-card-bg);
	resize: vertical;
	min-height: 32px;
	font-family: inherit;
	line-height: 1.4;
}
.bd-participant-row__notes-input:focus {
	outline: none;
	border-color: var(--bd-navy);
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.06);
}
.bd-participant-row--placeholder { opacity: 0.85; }

/* ----- Participants edit form (POS-style inline) ---------------------- */
.bd-edit-participants {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.bd-edit-participant-row {
	background: var(--bd-page-bg);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-sm);
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bd-edit-participant-row.is-resolved {
	background: #f0f7ee;
	border-color: #c4ddc1;
}
.bd-edit-participant-row__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.bd-edit-participant-row__num {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bd-mute);
}
.bd-edit-participant-row__remove {
	background: transparent;
	border: 0;
	color: var(--bd-mute);
	cursor: pointer;
	padding: 0 4px;
	font-size: 18px;
	line-height: 1;
}
.bd-edit-participant-row__remove:hover { color: var(--bd-danger); }

.bd-edit-participant-row__chip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--bd-card-bg);
	border: 1px solid #c4ddc1;
	border-radius: var(--bd-radius-sm);
	padding: 10px 12px;
}
.bd-edit-participant-row__chip-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--bd-navy);
}
.bd-edit-participant-row__chip-email {
	font-size: 12.5px;
	color: var(--bd-mute);
	margin-top: 2px;
}
.bd-edit-participant-row__chip-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}
.bd-edit-participant-row__chip-edit,
.bd-edit-participant-row__chip-clear {
	background: transparent;
	border: 0;
	color: var(--bd-mute);
	cursor: pointer;
	padding: 4px 6px;
	font-size: 16px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
}
.bd-edit-participant-row__chip-edit:hover {
	background: rgba(0, 50, 100, 0.06);
	color: var(--bd-navy);
}
.bd-edit-participant-row__chip-clear:hover { color: var(--bd-danger); }
.bd-edit-participant-row.is-editing-customer {
	background: #fff8e6;
	border-color: #f3d7a2;
}
.bd-edit-participant-row__editing-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px;
	border-radius: var(--bd-radius-sm);
	background: rgba(217, 119, 6, 0.1);
	color: #92400e;
	font-size: 12px;
	font-weight: 500;
}
.bd-edit-participant-row__editing-done {
	background: var(--bd-card-bg);
	border: 1px solid #f3d7a2;
	color: #92400e;
	font-size: 11.5px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 999px;
	cursor: pointer;
}
.bd-edit-participant-row__editing-done:hover { background: #fef3c7; }

.bd-edit-participant-row__fields {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bd-edit-participant-row__name-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
@media (max-width: 575px) {
	.bd-edit-participant-row__name-grid { grid-template-columns: 1fr; }
}
.bd-edit-participant-row__label {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--bd-mute);
	margin-bottom: 4px;
}
.bd-edit-participant-row__input,
.bd-edit-participant-row__select,
.bd-edit-participant-row__textarea {
	width: 100%;
	font-family: inherit;
	font-size: 13px;
	color: var(--bd-navy);
	background: var(--bd-card-bg);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-sm);
	padding: 8px 12px;
	line-height: 1.4;
}
.bd-edit-participant-row__textarea {
	resize: vertical;
	min-height: 38px;
}
.bd-edit-participant-row__input:focus,
.bd-edit-participant-row__select:focus,
.bd-edit-participant-row__textarea:focus {
	outline: none;
	border-color: var(--bd-navy);
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.06);
}

.bd-edit-participant-row__suggestions {
	list-style: none;
	margin: 4px 0 0;
	padding: 4px;
	background: var(--bd-card-bg);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-sm);
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
	max-height: 220px;
	overflow-y: auto;
}
.bd-edit-participant-row__suggestion {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	background: transparent;
	border: 0;
	text-align: left;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
	color: var(--bd-navy);
}
.bd-edit-participant-row__suggestion:hover { background: var(--bd-page-bg); }
.bd-edit-participant-row__suggestion-name {
	font-size: 13px;
	font-weight: 500;
}
.bd-edit-participant-row__suggestion-email {
	font-size: 11.5px;
	color: var(--bd-mute);
}

.bd-edit-participants__add {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1px dashed var(--bd-line);
	color: var(--bd-navy);
	font-size: 13px;
	font-weight: 500;
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
	align-self: flex-start;
}
.bd-edit-participants__add:hover { background: var(--bd-page-bg); }
.bd-edit-participants__add img { width: 12px; height: 12px; }
.bd-participant-row__rate {
	font-size: 11.5px;
	color: var(--bd-mute);
	margin-top: 2px;
}
.bd-participant-row__unassigned {
	font-size: 11.5px;
	color: var(--bd-warn);
	font-weight: 500;
	margin-top: 2px;
}
.bd-participant-row__notes,
.bd-participant-row__fields {
	font-size: 12.5px;
	color: var(--bd-mute);
	margin-top: 2px;
}

/* Per-participant custom fields — read-mode "label: value" rows + edit-mode
   wrapper around the standard <x-custom-fields.form-fields> component. */
.bd-participant-row__cf-list {
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.bd-participant-row__cf-row {
	font-size: 12.5px;
	color: var(--bd-mute);
	display: flex;
	gap: 6px;
}
.bd-participant-row__cf-label {
	font-weight: 500;
	color: var(--bd-text);
}
.bd-participant-row__cf-label::after {
	content: ':';
}
.bd-participant-row__cf-value {
	color: var(--bd-mute);
	word-break: break-word;
}
.bd-participant-row__cf-edit {
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1px dashed var(--bd-line);
}
.bd-participant-row__cf-edit .form-group { padding-top: 8px; }
.bd-participant-row__cf-edit .form-label {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--bd-text);
	margin-bottom: 4px;
}
.bd-participant-row__cf-edit .form-control,
.bd-participant-row__cf-edit input[type="text"],
.bd-participant-row__cf-edit input[type="email"],
.bd-participant-row__cf-edit input[type="number"],
.bd-participant-row__cf-edit input[type="date"],
.bd-participant-row__cf-edit textarea,
.bd-participant-row__cf-edit select {
	font-size: 13px;
	padding: 6px 10px;
}
.bd-participant-row__waivers {
	margin-top: 6px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.bd-participant-waiver-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 500;
	padding: 2px 8px;
	border-radius: 999px;
}
.bd-participant-waiver-pill--signed {
	background: #dcfce7;
	color: #166534;
}
.bd-participant-waiver-pill--pending {
	background: #fef3c7;
	color: #854d0e;
}
.bd-participant-waiver-link {
	font-size: 11.5px;
	color: var(--bd-navy);
	text-decoration: none;
	margin-left: 4px;
}
.bd-participant-waiver-link:hover { text-decoration: underline; }

/* Inline edit-mode footer */
.bd-participants-edit-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--bd-line);
}

.bd-assign-link {
	font-size: 12px;
	color: var(--bd-warn);
	font-weight: 500;
	text-decoration: none;
	margin-left: 6px;
}
.bd-assign-link:hover { text-decoration: underline; }

/* ----- Tags card ----- */
.bd-tags-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}
.bd-tag-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f1f5f9;
	color: var(--bd-navy);
	font-size: 12px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 999px;
}
.bd-tag-chip__remove {
	background: transparent;
	border: 0;
	color: var(--bd-mute);
	cursor: pointer;
	padding: 0;
	font-size: 14px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.bd-tag-chip__remove:hover { color: var(--bd-danger); }
.bd-tags-empty {
	font-size: 13px;
	color: var(--bd-mute);
	padding: 4px 0 8px;
}

.bd-tags-add {
	position: relative;
	display: inline-block;
}
.bd-tags-add__btn {
	background: transparent;
	border: 1px dashed var(--bd-line);
	color: var(--bd-navy);
	font-size: 12px;
	font-weight: 500;
	padding: 4px 12px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.12s;
}
.bd-tags-add__btn:hover { background: var(--bd-page-bg); }
.bd-tags-add__pop {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 220px;
	background: var(--bd-card-bg);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-sm);
	padding: 12px 14px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	z-index: 5;
}
.bd-tags-add__pop-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	padding: 4px 0;
}
.bd-tags-add__pop-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--bd-line);
}

/* ----- Notes card ----- */
.bd-notes-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 220px;
	overflow-y: auto;
	padding-right: 4px;
}
.bd-note {
	background: var(--bd-page-bg);
	border-radius: var(--bd-radius-sm);
	padding: 10px 12px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}
.bd-note__body {
	flex: 1;
	font-size: 13.5px;
	color: var(--bd-navy);
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}
.bd-note__remove {
	background: transparent;
	border: 0;
	color: var(--bd-mute);
	cursor: pointer;
	padding: 0 4px;
	font-size: 14px;
	line-height: 1;
	flex-shrink: 0;
}
.bd-note__remove:hover { color: var(--bd-danger); }
.bd-note__meta {
	font-size: 11px;
	color: var(--bd-mute);
	margin-top: 4px;
}

.bd-notes-empty {
	font-size: 13px;
	color: var(--bd-mute);
	padding: 6px 0;
}

.bd-notes-add {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--bd-line);
}
.bd-notes-add__input {
	flex: 1;
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-sm);
	padding: 8px 12px;
	font-size: 13.5px;
	color: var(--bd-navy);
	background: var(--bd-card-bg);
	resize: vertical;
	min-height: 38px;
}
.bd-notes-add__input:focus {
	outline: none;
	border-color: var(--bd-navy);
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.06);
}
.bd-notes-add__btn {
	background: var(--bd-navy);
	color: #fff;
	border: 0;
	padding: 8px 16px;
	border-radius: var(--bd-radius-sm);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	flex-shrink: 0;
}
.bd-notes-add__btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ----- Email actions card ----- */
.bd-email-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bd-email-actions__btn {
	background: var(--bd-card-bg);
	border: 1px solid var(--bd-line);
	color: var(--bd-navy);
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.12s;
}
.bd-email-actions__btn:hover { background: var(--bd-page-bg); }
.bd-email-actions__hint {
	font-size: 12px;
	color: var(--bd-mute);
	margin-top: 10px;
}
.bd-email-actions__hint--missing {
	color: var(--bd-danger);
}

/* ----- Custom fields card ----- */
.bd-fields-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px 18px;
}
.bd-field {
	min-width: 0;
}
.bd-field__label {
	font-size: 11.5px;
	color: var(--bd-mute);
	margin-bottom: 2px;
}
.bd-field__value {
	font-size: 14px;
	color: var(--bd-navy);
	word-break: break-word;
}

/* ----- Right-rail Payment summary ----- */
.bd-pay {
	background: var(--bd-card-bg);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius);
	box-shadow: var(--bd-card-shadow);
	padding: 18px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.bd-pay__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.bd-pay__title {
	font-size: 15px;
	font-weight: 600;
	color: #303233;
	margin: 0;
}
/* Right-rail Payment header pill should match all other pills on the page
   (header, items table, etc.) — same line-height, padding, font-size. */
.bd-pay__head .pill {
	font-size: 12px;
	padding: 4px 12px;
	line-height: 1.4;
}
.bd-pay__lines {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bd-pay__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 13px;
	color: var(--bd-navy);
}
.bd-pay__row-label {
	color: var(--bd-mute);
}
.bd-pay__row-amount {
	font-variant-numeric: tabular-nums;
}
.bd-pay__row--negative .bd-pay__row-amount,
.bd-pay__row--negative .bd-pay__row-label {
	color: var(--bd-danger);
}
.bd-pay__row--success .bd-pay__row-amount,
.bd-pay__row--success .bd-pay__row-label {
	color: var(--bd-success);
}
.bd-pay__row--clickable {
	cursor: pointer;
}
.bd-pay__row--clickable:hover .bd-pay__row-label {
	text-decoration: underline;
}
.bd-pay__divider {
	border-top: 1px solid var(--bd-line);
	margin: 4px 0;
}
.bd-pay__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 16px;
	font-weight: 600;
	color: var(--bd-navy);
}
.bd-pay__total .bd-header-pill {
	font-size: 11px;
	font-weight: 500;
	margin-right: auto;
	margin-left: 8px;
}
.bd-pay__amount-due {
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.bd-pay__amount-due--positive {
	color: var(--bd-danger);
}
.bd-pay__amount-due--zero {
	color: var(--bd-success);
}

.bd-pay__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}
.bd-pay__cta {
	background: var(--bd-navy);
	color: #fff;
	border: 0;
	padding: 10px 16px;
	border-radius: var(--bd-radius-sm);
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
	width: 100%;
}
.bd-pay__cta:hover { opacity: 0.92; }
.bd-pay__cta--ghost {
	background: transparent;
	color: var(--bd-navy);
	border: 1px solid var(--bd-line);
}
.bd-pay__cta--ghost:hover {
	background: var(--bd-page-bg);
}
.bd-pay__cta--danger {
	background: transparent;
	color: var(--bd-danger);
	border: 1px solid var(--bd-line);
}
.bd-pay__cta--danger:hover {
	background: #fef2f2;
}

/* Inline ledger (replaces payment-history modal). Rendered conditionally. */
.bd-pay-ledger {
	margin-top: 6px;
	border-top: 1px dashed var(--bd-line);
	padding-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 280px;
	overflow-y: auto;
}
.bd-pay-ledger__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 12px;
	padding: 6px 8px;
	border-radius: 6px;
	background: var(--bd-page-bg);
}
.bd-pay-ledger__row-meta {
	color: var(--bd-mute);
	font-size: 11px;
}
.bd-pay-ledger__row--refund {
	background: #fef2f2;
	color: var(--bd-danger);
}
.bd-pay-ledger__row--voucher {
	background: #eff6ff;
	color: #1e40af;
}

/* Mobile: collapse the rail below the main content & make payment a sticky bar */
@media (max-width: 1279px) {
	.bd-side {
		margin-top: 16px;
	}
}

/* ----- Security deposit collapsible row in the right rail ----- */
.bd-deposit-row {
	border-top: 1px dashed var(--bd-line);
	padding-top: 12px;
	margin-top: 4px;
}
.bd-deposit-row__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 13px;
	cursor: pointer;
	background: transparent;
	border: 0;
	padding: 0;
	width: 100%;
	color: var(--bd-navy);
}
.bd-deposit-row__head .bd-header-pill {
	font-size: 11px;
}
.bd-deposit-row__detail {
	margin-top: 10px;
	background: var(--bd-page-bg);
	border-radius: var(--bd-radius-sm);
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ----- Visual reskin for kept legacy partials (light touch) ----- */
.bd-card .table-bordered {
	border-color: var(--bd-line);
	border-radius: var(--bd-radius-sm);
	overflow: hidden;
}
.bd-card .table-bordered > :not(caption) > * > * {
	border-color: var(--bd-line);
}
.bd-card .table-bordered thead th {
	background: var(--bd-page-bg);
	color: var(--bd-mute);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ----- Undo toast (tags / notes) ----- */
.bd-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--bd-navy);
	color: #fff;
	padding: 10px 16px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	z-index: 1000;
}
.bd-toast__undo {
	background: transparent;
	border: 0;
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
}

/* ----- Mobile: ensure interactive targets are reachable ----- */
@media (pointer: coarse) {
	.bd-tag-chip__remove,
	.bd-note__remove,
	.bd-card__action,
	.bd-pay__cta,
	.bd-cta-primary,
	.bd-actions-trigger {
		min-height: 36px;
	}
}