/**
 * Styles for the attach-or-create contact picker (assets/js/pbj-crm-contact-picker.js).
 *
 * Everything reads the portal's own CSS variables, so every preset — including
 * Dark — themes this control with no rules of its own. Added 2026-08-11 after
 * the on-screen check found the result rows rendering with no spacing at all
 * (label, tag and detail ran together as one string): the bundle shipped with
 * classes but no stylesheet. Same delivery shape as pbj-crm-files.css.
 */

.pbjcrm-picker {
	position: relative;
	max-width: 420px;
}

.pbjcrm-picker-label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}

.pbjcrm-picker-search {
	position: relative;
}

.pbjcrm-picker-input {
	width: 100%;
	box-sizing: border-box;
}

.pbjcrm-picker-list {
	position: absolute;
	z-index: 40;
	left: 0;
	right: 0;
	top: calc(100% + 2px);
	max-height: 320px;
	overflow-y: auto;
	background: var(--pbjcrm-surface, var(--pbjcrm-bg, #fff));
	/* --pbjcrm-edge, not --pbjcrm-border-strong (item 3 sweep, 2026-08-15). This
	   panel FLOATS over the form behind it, so its outline is what says where it
	   starts and stops — WCAG 1.4.11's 3:1. border-strong is an in-page affordance
	   and MEASURES 1.71-2.45:1 against the surface on six of the eight presets
	   (default 1.74, soft 1.71, dark 2.06, terminal-dark 2.45, notebook-light 2.10,
	   notebook-dark 2.03); only contrast and terminal-light pass. edge measures
	   3.52-5.11:1 on all eight. */
	border: 1px solid var(--pbjcrm-edge, var(--pbjcrm-border-strong, #c3c4c7));
	border-radius: var(--pbjcrm-radius, 6px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	padding: 4px;
}

.pbjcrm-picker-list:empty {
	display: none;
}

/* One result row: name, then the Business tag, then the detail — spaced, on
 * their own line each side, full-width click target. */
.pbjcrm-picker-opt {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	padding: 7px 10px;
	margin: 0;
	border: 0;
	border-radius: calc(var(--pbjcrm-radius, 6px) - 2px);
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.pbjcrm-picker-opt + .pbjcrm-picker-opt {
	margin-top: 2px;
}

.pbjcrm-picker-opt:hover,
.pbjcrm-picker-opt[aria-selected="true"] {
	background: var(--pbjcrm-accent-soft, rgba(34, 113, 177, 0.12));
}

.pbjcrm-picker-opt-label {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pbjcrm-picker-opt-sub {
	margin-left: auto;
	opacity: 0.72;
	font-size: 0.92em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 55%;
}

.pbjcrm-picker-tag {
	flex: none;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 0.78em;
	font-weight: 600;
	background: var(--pbjcrm-accent-soft, rgba(34, 113, 177, 0.12));
	color: var(--pbjcrm-accent-strong, var(--pbjcrm-accent, #2271b1));
}

.pbjcrm-picker-add .pbjcrm-picker-opt-label {
	color: var(--pbjcrm-accent-strong, var(--pbjcrm-accent, #2271b1));
	font-weight: 600;
}

.pbjcrm-picker-note {
	margin: 6px 4px;
	opacity: 0.8;
}

.pbjcrm-picker-chosen {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pbjcrm-picker-chosen-label {
	font-weight: 600;
}

.pbjcrm-picker-form {
	margin-top: 8px;
	padding: 10px 12px;
	border: 1px solid var(--pbjcrm-border, #c3c4c7);
	border-radius: var(--pbjcrm-radius, 6px);
	background: var(--pbjcrm-surface, transparent);
}

.pbjcrm-picker-form h4 {
	margin: 0 0 8px;
}