/* 19 — Portal · Global topbar search re-skin
   -----------------------------------------------------------------------------
   Restyles the JS-rendered global-search dropdown (assets/js/finlaw-search.js)
   to match the Claude-Design mockup (project/"14 Search Results.dc.html") while
   the search REST round-trip + keyboard/ARIA nav are preserved untouched.

   Auto-loaded after portal-redesign.css by finlaw_enqueue_redesign_partials().
   Everything is scoped under `.portal-shell` and the JS-emitted dropdown classes
   (`.tb-search[data-finlaw-search]`, `.finlaw-search-*`) so it applies to BOTH
   the client (data-finlaw-search="client") and firm (…="firm") topbars without
   touching view markup. Uses existing style.css theme tokens only. The pill
   colours match the mockup: matter/document/message → blue-pale/blue,
   invoice → amber, appointment → green.
   ========================================================================== */

/* Wrapper is the positioning context (already set by finlaw-search.css; kept
   here for scope-safety when this partial wins the cascade). */
.portal-shell .tb-search[data-finlaw-search] {
	position: relative;
}

/* ---- Input (active field) -------------------------------------------------
   White field, blue 1px border, 10px radius, room on the right for the ⌘K
   chip. The chip itself is decoration in the shell markup (no hook here). */
.portal-shell .tb-search[data-finlaw-search] input {
	box-sizing: border-box;
	width: 100%;
	background: #fff;
	border: 1px solid var(--blue, #26408d);
	border-radius: 10px;
	padding: 11px 60px 11px 36px;
	font-size: 14px;
	color: var(--ink, #1a1a2e);
}

.portal-shell .tb-search[data-finlaw-search] input:focus {
	outline: none;
	border-color: var(--blue, #26408d);
	box-shadow: 0 0 0 3px rgba(38, 64, 141, .35);
}

/* ---- Dropdown panel -------------------------------------------------------
   Overrides the older finlaw-search.css panel (this partial loads later and is
   scoped one level deeper via .portal-shell). */
.portal-shell .finlaw-search-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	left: auto;
	width: 520px;
	max-width: 90vw;
	max-height: none;
	overflow: hidden;
	padding: 0;
	background: #fff;
	border: 1px solid var(--hair, #e5e7eb);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(21, 34, 77, .16);
	z-index: 1200;
}

/* Scrollable list region; the footer stays pinned below it. */
.portal-shell .finlaw-search-list {
	max-height: 420px;
	overflow-y: auto;
}

/* ---- Group header ---------------------------------------------------------
   e.g. "Matters · 2". A hairline separates successive groups. */
.portal-shell .finlaw-search-group {
	padding: 10px 20px 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mid, #5d6470);
}

.portal-shell .finlaw-search-group ~ .finlaw-search-group,
.portal-shell .finlaw-search-item + .finlaw-search-group {
	border-top: 1px solid var(--grey-50, #f5f6fa);
	margin-top: 4px;
}

/* ---- Result row -----------------------------------------------------------*/
.portal-shell .finlaw-search-item {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 10px 20px;
	text-decoration: none;
	color: var(--ink, #1a1a2e);
	border-left: 3px solid transparent;
	cursor: pointer;
	transition: background-color .12s ease;
}

.portal-shell .finlaw-search-item:hover {
	background: var(--grey-50, #f5f6fa);
	color: var(--ink, #1a1a2e);
}

/* Active (keyboard) row: wash + red left rail, matching the mockup. */
.portal-shell .finlaw-search-item.is-active {
	background: var(--blue-pale, #eef1f8);
	border-left-color: var(--red, #d81f26);
	color: var(--ink, #1a1a2e);
	box-shadow: none;
}

/* ---- Tag pill (coloured by type) ------------------------------------------*/
.portal-shell .finlaw-search-tag {
	flex-shrink: 0;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.3;
	padding: 2px 7px;
	border-radius: 5px;
	margin-top: 0;
	/* Default (matter/document/message/other) = blue. */
	background: var(--blue-pale, #eef1f8);
	color: var(--blue, #26408d);
}

.portal-shell .finlaw-search-tag[data-type="invoice"] {
	background: var(--amber-bg, #fef3e2);
	color: var(--amber, #d97706);
}

.portal-shell .finlaw-search-tag[data-type="appointment"] {
	background: var(--green-bg, #f0faf6);
	color: var(--green, #1f8a5b);
}

/* ---- Row text -------------------------------------------------------------*/
.portal-shell .finlaw-search-text {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.portal-shell .finlaw-search-label {
	font-size: 14px;
	font-weight: 400;
	color: var(--ink, #1a1a2e);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.portal-shell .finlaw-search-sub {
	margin-top: 1px;
	font-size: 12px;
	color: var(--mid, #5d6470);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Query highlight inside label/sub. */
.portal-shell .finlaw-search-label mark,
.portal-shell .finlaw-search-sub mark {
	background: var(--red-pale, #fdeaea);
	color: var(--red-dark, #c8141b);
	border-radius: 3px;
	padding: 0 1px;
}

/* Return glyph on the active row (mockup). */
.portal-shell .finlaw-search-enter {
	flex-shrink: 0;
	font-size: 12px;
	color: var(--mid, #5d6470);
	opacity: 0;
}

.portal-shell .finlaw-search-item.is-active .finlaw-search-enter {
	opacity: 1;
}

/* ---- Footer (keyboard hints) ----------------------------------------------*/
.portal-shell .finlaw-search-foot {
	display: flex;
	gap: 14px;
	padding: 10px 20px;
	border-top: 1px solid var(--hair, #e5e7eb);
	font-size: 11.5px;
	color: var(--mid, #5d6470);
}

/* ---- Empty state ----------------------------------------------------------*/
.portal-shell .finlaw-search-empty {
	padding: 28px 20px;
	text-align: center;
	color: var(--mid, #5d6470);
}

.portal-shell .finlaw-search-empty-icon {
	display: block;
	margin: 0 auto 12px;
	color: var(--mid, #5d6470);
}

.portal-shell .finlaw-search-empty-title {
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink, #1a1a2e);
}

.portal-shell .finlaw-search-empty-hint {
	font-size: 12.5px;
	color: var(--mid, #5d6470);
}

/* ---- Responsive -----------------------------------------------------------*/
@media (max-width: 560px) {
	.portal-shell .finlaw-search-panel {
		width: 92vw;
	}
}