/* =====================================================================
   Liva Back Office — GLOBAL SEARCH
   Two surfaces, one stylesheet: the header box + its dropdown (loaded on
   EVERY page from inc_topmenu.php) and the full results page.

   Built on the --lv-* token layer from css/theme.css, with a literal
   fallback in every var() so this file still renders correctly if it is
   ever loaded before/without theme.css. That is what makes dark mode
   free here — there is no html[data-theme="dark"] block below, and
   there should not need to be one.
   ===================================================================== */

/* ============================  HEADER BOX  ========================== */

/* ⚠ LOCATION, RESTATED 2026-09-19. This used to read "lives as the first child of #top-tools
   (which already carries the margin-left:auto that pins the cluster right)". BOTH HALVES ARE NOW
   FALSE: the form is a direct child of #top, a zone of its own between #top-info and #top-tools,
   and #top-tools no longer carries margin-left:auto at all. Corrected rather than appended —
   a locator comment that names the wrong parent is worse than none. */
/* THE SIZING BELONGS ON THE FORM, not on the span. #lv_gsearch is a <span> INSIDE
   <form id="lv_gsearch_form">, so the form is the flex item and the span is not —
   which made this flex/min-width pair inert, and the box held its natural 244px however tight
   the header got. That was ~64px of the header overflow measured on 2026-08-05. The span keeps
   position:relative because #lv_gsearch_panel anchors to it. */
/* ⭐ THE CENTRE ZONE. This form is a direct child of #top now (see inc_topmenu) — not a member of
   #top-tools — because it is the header's one ACTION and the row needed a middle.

   ⛔ WHY A CAP ALONE COULD NEVER WORK, measured at 2000px before this change: the form grew to its
   560px ceiling and the remaining 123px had nowhere to go, so it parked at the left edge of the
   flex-end cluster — a dead gap sitting between the clocks and a search box that was itself 560px
   of empty field. Two voids, and raising the cap only trades them for one enormous box.
   `margin-inline: auto` is the missing half: flex resolves flex-grow FIRST, then auto margins take
   whatever is still unclaimed and SPLIT IT EVENLY. So the field grows to a width a person would
   actually type into, and everything beyond that becomes symmetric air on both sides of it.
   Nothing is ever left over on one side, at any viewport width.

   480, not 560: a search field is sized by what gets typed into it — a booking ref, an email, a
   name — not by how much room happens to be going. Past ~480px extra width reads as an empty box
   rather than a bigger control, which is how this became "a large empty region" in the first
   place. */
#lv_gsearch_form {
	flex: 1 1 320px;
	max-width: 480px;
	min-width: 180px;
	margin-inline: auto;
}
#lv_gsearch {
	position: relative;
	display: block;
	width: 100%;
}
#lv_gsearch .gs-field {
	display: flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--lv-input-border, #d3dbe2);
	background: var(--lv-input-bg, #ffffff);
	border-radius: 999px;
	transition: border-color .12s ease, box-shadow .12s ease;
}
#lv_gsearch .gs-field:focus-within {
	border-color: var(--lv-brand, #0089cf);
	box-shadow: 0 0 0 3px var(--lv-focus, rgba(0, 137, 207, .18));
}
#lv_gsearch .gs-field svg {
	flex: 0 0 auto;
	opacity: .7;
	color: var(--lv-header-muted, #6d777f);
}
#lv_gsearch input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 13.5px;
	color: var(--lv-input-text, #22313f);
}
/* [Note]:--lv-placeholder, NOT --lv-muted (bug 1717). This selector carries an ID, so it outranks
   [Note]:BOTH css/main.css's bare placeholder rule and css/theme.css:229's dark rule — repointing the
   [Note]:base rule alone would have left this one box at 2.98:1 in light while every field around it
   [Note]:cleared AA. The pill's background is --lv-input-bg either way, so this lands at 5.23:1 light
   [Note]:and 6.10:1 dark. Global search is the one field on EVERY back-office page. */
#lv_gsearch input[type="text"]::placeholder {
	color: var(--lv-placeholder, #5f6e7e);
}
/* The pill draws the focus ring (:focus-within above). theme.css also gives
   every focused input its own ring, which painted a second, RECTANGULAR ring
   inside the round one — obvious in dark mode. The pill is the control here,
   so the inner field yields its ring rather than competing with it. */
#lv_gsearch input[type="text"]:focus {
	outline: none;
	box-shadow: none;
	border: none;
}
/* The keyboard hint doubles as the affordance that the box HAS a shortcut. */
#lv_gsearch .gs-kbd {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	padding: 0 6px;
	border-radius: 4px;
	color: var(--lv-muted, #8a97a5);
	background: var(--lv-surface-3, #eef3f7);
	border: 1px solid var(--lv-border, #e3e8ee);
	white-space: nowrap;
}
#lv_gsearch.is-busy .gs-kbd,
#lv_gsearch.is-open .gs-kbd { visibility: hidden; }

/* ---------------------------  DROPDOWN  --------------------------- */

#lv_gsearch_panel {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 460px;
	max-width: 92vw;
	max-height: 74vh;
	overflow-y: auto;
	z-index: 1200;
	background: var(--lv-surface, #ffffff);
	border: 1px solid var(--lv-border, #e3e8ee);
	border-radius: 12px;
	box-shadow: var(--lv-shadow-lg, 0 18px 48px rgba(16, 42, 67, .22));
	padding: 6px;
	text-align: left;
}
#lv_gsearch.is-open #lv_gsearch_panel { display: block; }

#lv_gsearch_panel .gs-groupname {
	display: block;
	padding: 9px 12px 5px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lv-muted, #8a97a5);
	text-decoration: none;
}
/* A heading that IS a link to the module's filtered list says so on hover —
   it must not look clickable when it is only a heading (a module with no
   filter that can take the term renders a <div> and never gets this). */
a.gs-groupname:hover {
	color: var(--lv-link, #0b6aa2);
	text-decoration: underline;
}
#lv_gsearch_panel a.gs-row {
	display: block;
	padding: 7px 12px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--lv-text, #22313f);
}
#lv_gsearch_panel a.gs-row:hover,
#lv_gsearch_panel a.gs-row.on {
	background: var(--lv-brand-soft, #e7f3fb);
	color: var(--lv-brand-soft-ink, #0b6aa2);
}
#lv_gsearch_panel .gs-row-title {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#lv_gsearch_panel .gs-row-sub {
	display: block;
	font-size: 12px;
	color: var(--lv-muted, #8a97a5);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#lv_gsearch_panel a.gs-row:hover .gs-row-sub,
#lv_gsearch_panel a.gs-row.on .gs-row-sub { color: inherit; opacity: .78; }
#lv_gsearch_panel .gs-row-meta {
	float: right;
	margin-left: 10px;
	font-size: 12px;
	color: var(--lv-muted, #8a97a5);
}
#lv_gsearch_panel .gs-state {
	padding: 16px 12px;
	text-align: center;
	font-size: 12.5px;
	color: var(--lv-muted, #8a97a5);
}
#lv_gsearch_panel .gs-foot {
	margin-top: 4px;
	border-top: 1px solid var(--lv-border, #e3e8ee);
	padding-top: 4px;
}
#lv_gsearch_panel .gs-foot a {
	display: block;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	color: var(--lv-link, #0b6aa2);
}
#lv_gsearch_panel .gs-foot a:hover,
#lv_gsearch_panel .gs-foot a.on { background: var(--lv-surface-3, #eef3f7); }

/* NARROW WINDOWS: shrink, never hide.
   This used to be "display:none below 1150px", which was simply wrong and is
   why the box appeared missing on a smaller window. Two reasons it was wrong:
   a search field is the one control you reach for when you cannot find
   something, so it is the last thing that should disappear; and the saving was
   imaginary anyway — the back office sets min-width:1240px on #content, so
   below ~1240px the page already scrolls horizontally and hiding a 320px field
   prevents no wrapping that was not happening regardless.
   So it only ever gets smaller: the keyboard hint goes first (decoration), then
   the field narrows to roughly a word of typing. The placeholder is allowed to
   ellipsis; the magnifier keeps it recognisable at any width. */
@media (max-width: 1400px) {
	#lv_gsearch { flex-basis: 240px; }
	#lv_gsearch .gs-kbd { display: none; }
}
@media (max-width: 1150px) {
	#lv_gsearch { flex-basis: 170px; min-width: 140px; }
}
@media (max-width: 900px) {
	#lv_gsearch { flex-basis: 132px; min-width: 112px; }
	#lv_gsearch .gs-field { padding: 0 8px; gap: 5px; }
}

/* =========================  RESULTS PAGE  ========================== */

.gsr-form {
	display: flex;
	gap: 8px;
	margin: 0 0 18px;
}
.gsr-form input[type="text"] {
	flex: 1 1 auto;
	max-width: 640px;
	height: 40px;
	padding: 0 14px;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: var(--lv-input-text, #22313f);
	background: var(--lv-input-bg, #ffffff);
	border: 1px solid var(--lv-input-border, #d3dbe2);
	border-radius: 8px;
}
.gsr-form input[type="text"]:focus {
	outline: none;
	border-color: var(--lv-brand, #0089cf);
	box-shadow: 0 0 0 3px var(--lv-focus, rgba(0, 137, 207, .18));
}
.gsr-go {
	height: 40px;
	padding: 0 20px;
	border: 1px solid var(--lv-brand, #0089cf);
	background: var(--lv-brand, #0089cf);
	color: var(--lv-brand-ink, #ffffff);
	font-size: 13.5px;
	font-weight: 600;
	border-radius: 8px;
	cursor: pointer;
}
.gsr-go:hover { background: var(--lv-brand-hover, #0a76b0); border-color: var(--lv-brand-hover, #0a76b0); }

.gsr-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 18px;
}
.gsr-filter {
	display: inline-block;
	padding: 5px 13px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	color: var(--lv-text, #33475b);
	background: var(--lv-surface-2, #f4f7fa);
	border: 1px solid var(--lv-border, #e3e9ef);
}
.gsr-filter:hover { background: var(--lv-surface-3, #e7eef5); text-decoration: none; }
.gsr-filter.on {
	background: var(--lv-brand, #0089cf);
	border-color: var(--lv-brand, #0089cf);
	color: var(--lv-brand-ink, #ffffff);
}

.gsr-group {
	margin: 0 0 20px;
	background: var(--lv-surface, #ffffff);
	border: 1px solid var(--lv-border, #e3e8ee);
	border-radius: 12px;
	overflow: hidden;
}
.gsr-group-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 16px;
	background: var(--lv-surface-2, #f7f9fb);
	border-bottom: 1px solid var(--lv-border, #e3e8ee);
}
.gsr-group-head h2 {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--lv-heading, #16242f);
}
.gsr-count {
	font-size: 12px;
	font-weight: 700;
	color: var(--lv-muted, #8a97a5);
	background: var(--lv-surface-3, #eef3f7);
	border-radius: 999px;
	padding: 1px 9px;
}
.gsr-more { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--lv-link, #0b6aa2); text-decoration: none; }

.gsr-list { list-style: none; margin: 0; padding: 0; }
.gsr-list li { border-bottom: 1px solid var(--lv-border, #eef2f6); }
.gsr-list li:last-child { border-bottom: none; }
.gsr-list a {
	display: block;
	padding: 11px 16px;
	text-decoration: none;
	color: var(--lv-text, #22313f);
}
.gsr-list a:hover { background: var(--lv-surface-3, #eef3f7); text-decoration: none; }
.gsr-title { display: inline-block; font-size: 14px; font-weight: 600; }
.gsr-sub { display: block; font-size: 12px; color: var(--lv-muted, #8a97a5); }
.gsr-meta { float: right; font-size: 12px; color: var(--lv-muted, #8a97a5); }

.gsr-empty,
.gsr-hint,
.gsr-note {
	padding: 22px;
	border: 1px dashed var(--lv-border-strong, #d7dfe8);
	border-radius: 12px;
	background: var(--lv-surface, #fbfcfd);
	color: var(--lv-muted, #7a8794);
	font-size: 13px;
}
.gsr-empty strong { display: block; color: var(--lv-heading, #16242f); font-size: 14.5px; margin-bottom: 4px; }
.gsr-note { margin-top: 4px; padding: 12px 16px; font-size: 12.5px; }
.gsr-hint-lead { color: var(--lv-text, #33475b); font-size: 13.5px; margin-bottom: 12px; }
.gsr-hint-groups { display: flex; flex-wrap: wrap; gap: 6px; }
.gsr-chip {
	display: inline-block;
	padding: 3px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: var(--lv-brand-soft-ink, #0b6aa2);
	background: var(--lv-brand-soft, #e7f3fb);
}