/* ==========================================================================
   RETURN AFRICA CRM — FRONT-END [ra_crm] SHORTCODE SHELL
   Scoped entirely under .ra-crm-public so it never leaks into the rest of
   the site's theme. Reuses the same brand tokens as assets/admin.css so the
   two shells (wp-admin for Admin-only screens, this for everyone else) feel
   like one product.

   FULL-VIEWPORT NOTE: .ra-crm-public breaks out of whatever centered/
   padded content column the active theme wraps shortcode output in, using
   the width:100vw + negative-margin trick below, and asks for
   min-height:100dvh (with a 100vh fallback for browsers that don't support
   dvh yet). This gets close to a true full-viewport app shell regardless of
   theme — but if the theme renders its own header/footer around page
   content (almost all do), "100vh" necessarily includes space below that
   header, not the literal top-of-browser-window to bottom-of-browser-
   window. For the closest possible full-viewport feel, use a page
   template with minimal/no theme header-footer for the CRM page; this CSS
   alone can't override markup the theme itself controls outside the
   shortcode's own output.
   ========================================================================== */

.ra-crm-public {
	--ra-forest-dark: #1e352f;
	--ra-forest-medium: #2d4f46;
	--ra-safari-gold: #c2a677;
	--ra-warm-white: #fbfbfa;
	--ra-charcoal: #2b2b2b;
	--ra-border-light: #e0deda;
	--ra-text-muted: #6e6c68;
	--ra-bg-card: #ffffff;

	/* Same collection accent tokens as assets/admin.css — kept in sync so a
	   collection badge looks identical whether it's rendered in wp-admin or
	   here. See that file's own comment for why these two specifically. */
	--ra-pafuri-accent: #a85f2f;
	--ra-pafuri-accent-bg: #f3e6da;
	--ra-cape-accent: #3d6b7a;
	--ra-cape-accent-bg: #dfe9eb;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	color: var(--ra-charcoal);
	box-sizing: border-box;

	/* Break out of the theme's centered content column so this reaches the
	   true edges of the browser window, not just its parent's width. */
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;

	min-height: 100vh;
	min-height: 100dvh; /* accounts for mobile browser chrome (address bar) collapsing on scroll — overrides the line above where supported */

	display: flex;
	flex-direction: column;
}

.ra-crm-public *,
.ra-crm-public *::before,
.ra-crm-public *::after {
	box-sizing: border-box;
}

.ra-crm-public h2 {
	color: var(--ra-forest-dark);
	font-weight: 600;
	margin: 0 0 16px;
}

.ra-crm-public h3 {
	color: var(--ra-forest-dark);
	font-size: 16px;
	font-weight: 600;
	margin: 28px 0 12px;
}

.ra-crm-public-nav {
	display: flex;
	gap: 4px;
	background: var(--ra-forest-dark);
	padding: 0 24px;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	flex-shrink: 0;
}

/* The RETURN Africa logo is dark charcoal, and this nav's own background
   is dark forest green (--ra-forest-dark) — placed directly against it,
   the logo would be nearly invisible. This gives it a small light pad of
   its own so it stays legible regardless of where in the nav it's
   placed; swap for a white/reversed logo file instead if one exists, and
   this wrapper can just go. */
.ra-crm-public-logo-wrap {
	display: flex;
	align-items: center;
	background: var(--ra-warm-white, #fbfbfa);
	padding: 4px 12px;
	border-radius: 4px;
	margin-right: 12px;
}

.ra-crm-public-logo {
	height: 32px;
	width: auto;
	display: block;
}

.ra-crm-public-nav-link {
	display: inline-block;
	padding: 14px 16px;
	color: var(--ra-warm-white);
	opacity: 0.7;
	text-decoration: none;
	font-size: 14px;
	border-bottom: 3px solid transparent;
	white-space: nowrap; /* keeps nav items from wrapping/squashing on narrow screens — the row scrolls horizontally instead, touch-friendly */
}

.ra-crm-public-nav-link:hover {
	opacity: 1;
	color: var(--ra-warm-white);
}

.ra-crm-public-nav-link.is-active {
	opacity: 1;
	border-bottom-color: var(--ra-safari-gold);
	font-weight: 600;
}

.ra-crm-public-quick-search {
	position: relative;
	margin-left: auto;
	align-self: center;
	flex-shrink: 0;
}

.ra-crm-public-quick-search input[type="search"] {
	padding: 6px 10px;
	border-radius: 4px;
	border: 1px solid transparent;
	width: 220px;
	font-size: 13px;
}

.ra-crm-quick-search-results {
	position: absolute;
	top: 100%;
	right: 0;
	width: 320px;
	max-height: 360px;
	overflow-y: auto;
	background: var(--ra-warm-white, #fff);
	border-radius: 4px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.2);
	z-index: 100;
	margin-top: 4px;
}

.ra-crm-quick-search-result {
	display: block;
	width: 100%;
	text-align: left;
	padding: 8px 12px;
	border: none;
	border-bottom: 1px solid var(--ra-border-light, #e0deda);
	background: none;
	cursor: pointer;
	font-size: 13px;
}

.ra-crm-quick-search-result:hover {
	background: var(--ra-border-light, #f5f4f0);
}

.ra-crm-quick-search-result span {
	display: block;
	color: var(--ra-text-muted, #6e6c68);
	font-size: 12px;
}

.ra-crm-quick-search-empty {
	padding: 10px 12px;
	font-size: 13px;
	color: var(--ra-text-muted, #6e6c68);
}

.ra-crm-public-body {
	background: var(--ra-bg-card);
	padding: 24px;
	flex: 1 1 auto;
	width: 95vw;
	max-width: 1860px;
	margin: 0 auto;
}

/* The page's own first heading (e.g. "Dashboard") had its default browser
   top margin stacking on top of .ra-crm-public-body's own padding above —
   this was the visible gap right under the nav. Doesn't touch the theme's
   own header/title above the nav, which this plugin has no control over. */
.ra-crm-public-body > h2:first-child {
	margin-top: 0;
}

.ra-crm-public-hint {
	color: var(--ra-text-muted);
	font-size: 13px;
	margin-top: -8px;
	margin-bottom: 20px;
}

.ra-crm-public-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 8px;
}

.ra-crm-public-card {
	background: var(--ra-warm-white);
	border: 1px solid var(--ra-border-light);
	border-radius: 6px;
	padding: 16px 20px;
	min-width: 140px;
	flex: 1 1 160px; /* grows to fill a row, shrinks to stack on narrow screens, instead of a hardcoded column count */
}

.ra-crm-public-card-sm {
	min-width: 100px;
	padding: 12px 16px;
}

.ra-crm-public-card-number {
	display: block;
	font-size: 24px;
	font-weight: 600;
	color: var(--ra-forest-dark);
}

.ra-crm-public-card-label {
	display: block;
	font-size: 12px;
	color: var(--ra-text-muted);
	margin-top: 4px;
}

/* ==========================================================================
   Report section wrapper — same reasoning as the admin equivalent: a long
   page like Reports had every section using its own ad-hoc inline margin
   (20px here, 28px there, none at all elsewhere), which reads as clumsy
   even when nothing on it is individually wrong. One consistent wrapper
   instead, matching the admin side's card treatment so the front-end and
   wp-admin views of the same report feel like the same product.
   ========================================================================== */
.ra-crm-public-report-section {
	background: var(--ra-bg-card);
	border: 1px solid var(--ra-border-light);
	border-radius: 6px;
	padding: 20px 24px;
	margin-bottom: 20px;
}

.ra-crm-public-report-section > h3 {
	margin: 0 0 4px 0;
	font-size: 17px;
	color: var(--ra-forest-dark);
}

.ra-crm-public-report-section > p.ra-crm-public-hint {
	margin-top: 0;
	margin-bottom: 16px;
}

.ra-crm-public-report-subsection {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--ra-border-light);
}
.ra-crm-public-report-subsection:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}
.ra-crm-public-report-subsection > h4 {
	margin: 0 0 10px 0;
	font-size: 14px;
	color: var(--ra-forest-dark);
}

/* Condenses a longer/lower-priority table behind a native <details> toggle
   — same reasoning as the admin side: useful but not something every
   visit needs open. */
.ra-crm-public-report-section details > summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--ra-forest-dark);
	padding: 6px 0;
	list-style: none;
}
.ra-crm-public-report-section details > summary::-webkit-details-marker {
	display: none;
}
.ra-crm-public-report-section details > summary::before {
	content: '▸';
	display: inline-block;
	width: 1em;
	color: var(--ra-safari-gold);
}
.ra-crm-public-report-section details[open] > summary::before {
	content: '▾';
}
.ra-crm-public-report-section details > summary .ra-crm-public-report-count {
	font-weight: 400;
	color: var(--ra-text-muted);
}

/* Tables scroll horizontally on narrow screens rather than squashing
   columns unreadably or breaking the page's width — wrap every
   .ra-crm-public-table in .ra-crm-public-table-wrap where it might get
   wide (many views already do; harmless if a wrapper isn't present, the
   table just uses its own overflow below as a fallback). */
.ra-crm-public-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ra-crm-public-table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	margin-bottom: 8px;
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ra-crm-public-table thead,
.ra-crm-public-table tbody,
.ra-crm-public-table tr {
	display: table;
	width: 100%;
	table-layout: fixed;
}

/* Sortable table headers + the pagination bar enhanceTables() (public.js)
   adds after every real data table — click a header to sort, click again
   to reverse; the arrow shows which column and direction is active. */
.ra-crm-public-table.ra-crm-enhanced thead th:hover {
	background: var(--ra-warm-white);
}

.ra-crm-public-table.ra-crm-enhanced thead th.ra-crm-sort-asc::after {
	content: ' \25B2';
	font-size: 10px;
}

.ra-crm-public-table.ra-crm-enhanced thead th.ra-crm-sort-desc::after {
	content: ' \25BC';
	font-size: 10px;
}

.ra-crm-table-search {
	margin: 8px 0;
}

.ra-crm-table-search input[type="search"] {
	width: 240px;
	max-width: 100%;
	padding: 5px 10px;
	border: 1px solid var(--ra-border-light);
	border-radius: 4px;
	font-size: 13px;
}

.ra-crm-table-controls {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 4px 0 16px;
	font-size: 13px;
	color: var(--ra-text-muted);
}

.ra-crm-table-controls select {
	padding: 3px 6px;
	border: 1px solid var(--ra-border-light);
	border-radius: 4px;
	font-size: 13px;
}

.ra-crm-table-controls button {
	background: none;
	border: 1px solid var(--ra-border-light);
	border-radius: 4px;
	padding: 3px 10px;
	font-size: 13px;
	cursor: pointer;
	color: var(--ra-charcoal);
}

.ra-crm-table-controls button:disabled {
	opacity: 0.4;
	cursor: default;
}

.ra-crm-table-controls button:not(:disabled):hover {
	border-color: var(--ra-forest-medium);
	color: var(--ra-forest-medium);
}

/*
	The contacts table specifically: 10 columns is too many to split
	evenly (table-layout: fixed above does exactly that by default) —
	Name/Email/Source get more room since they tend to hold the longest
	real content (a full name, a full email address, "Agent STO Levels
	Directory"), Type/STO tier get less since their values are always
	short ("Guest", "STO25"). nth-child rather than <colgroup>, which
	doesn't reliably size columns once thead/tbody/tr are forced to
	display: table the way they are just above.
*/
.ra-crm-contacts-table th:nth-child(1), .ra-crm-contacts-table td:nth-child(1) { width: 13%; } /* Name */
.ra-crm-contacts-table th:nth-child(2), .ra-crm-contacts-table td:nth-child(2) { width: 7%; }  /* Type */
.ra-crm-contacts-table th:nth-child(3), .ra-crm-contacts-table td:nth-child(3) { width: 15%; } /* Email */
.ra-crm-contacts-table th:nth-child(4), .ra-crm-contacts-table td:nth-child(4) { width: 9%; }  /* Phone */
.ra-crm-contacts-table th:nth-child(5), .ra-crm-contacts-table td:nth-child(5) { width: 6%; }  /* STO tier */
.ra-crm-contacts-table th:nth-child(6), .ra-crm-contacts-table td:nth-child(6) { width: 10%; } /* Country */
.ra-crm-contacts-table th:nth-child(7), .ra-crm-contacts-table td:nth-child(7) { width: 13%; } /* Source */
.ra-crm-contacts-table th:nth-child(8), .ra-crm-contacts-table td:nth-child(8) { width: 9%; }  /* Preferred Channel */
.ra-crm-contacts-table th:nth-child(9), .ra-crm-contacts-table td:nth-child(9) { width: 9%; }  /* Company */
.ra-crm-contacts-table th:nth-child(10), .ra-crm-contacts-table td:nth-child(10) { width: 9%; } /* Favourite property */

.ra-crm-public-table th,
.ra-crm-public-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--ra-border-light);
	font-size: 13px;
	/* table-layout: fixed splits width equally across every column
	   regardless of content length — without this, a long email or
	   phone number has nowhere to go but visually spill into the next
	   cell, since there's no wrapping and no cutoff. Truncates instead,
	   with the full value still available via the title attribute the
	   cells below set explicitly for exactly the columns most likely to
	   need it (email, phone, company, source). */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ra-crm-public-table th {
	color: var(--ra-text-muted);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.03em;
}

.ra-crm-public-search {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.ra-crm-public-search input[type="text"] {
	flex: 1;
	min-width: 160px;
	max-width: 320px;
}

/* Action row above a list (Export, per-page, etc.) — buttons/selects that
   aren't part of the search/filter form itself, right-aligned by default
   since Export CSV specifically was asked to sit top-right above the
   table. */
.ra-crm-public-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}

.ra-crm-public-toolbar-left,
.ra-crm-public-toolbar-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* Matches .ra-crm-public-button's height/font so a <select> sitting next
   to real buttons in a toolbar doesn't look mismatched. width/display are
   forced explicitly — many themes apply a generic width:100% to every
   <select> as a baseline responsive-forms reset, which otherwise silently
   wins over this class and breaks the whole toolbar's alignment (confirmed
   directly: that's exactly what was happening here). */
.ra-crm-public-toolbar select.ra-crm-public-select-inline,
.ra-crm-public-select-inline {
	display: inline-block !important;
	width: auto !important;
	padding: 8px 10px;
	border: 1px solid var(--ra-border-light);
	border-radius: 4px;
	font-size: 13px;
	background: var(--ra-warm-white);
	color: var(--ra-charcoal);
	vertical-align: middle;
}

.ra-crm-public-toolbar-left label,
.ra-crm-public-toolbar-left span {
	display: inline-block;
	vertical-align: middle;
}

/* Search input fills whatever's left of the row; Filters is fixed at 25%
   — literal vw units would be wrong here since .ra-crm-public-body caps
   out at max-width:1400px and centers, so vw stops matching the actual
   row's width past that point. 25%/75% of the row itself is the correct
   way to get the same visual proportion without breaking on wide
   screens. Filters expands to the full row width once opened, rather
   than staying squeezed into that 25%. */
.ra-crm-search-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	flex-wrap: wrap;
}

.ra-crm-search-input {
	flex: 1 1 auto;
	min-width: 200px;
}

.ra-crm-filters-details {
	flex: 0 0 25%;
	max-width: 25%;
	min-width: 160px;
}

.ra-crm-filters-details[open] {
	flex-basis: 100%;
	max-width: 100%;
	width: 100%;
}

/* Reported directly: the theme forces a generic width:100% onto every
   <select> as a baseline responsive-forms reset, which was silently
   overriding this plugin's own filter styling wherever it wasn't
   explicitly fought — first caught on the Contacts toolbar/filter panel,
   but the identical container classes (.ra-crm-public-search,
   .ra-crm-public-filter-bar, .ra-crm-public-form) are reused for every
   tab's filters (Enquiries, Tasks, Reports, Saved Filters), so the same
   fix is applied once here for all of them rather than patched tab by
   tab. Scoped to .ra-crm-public-body specifically so it can't reach into
   .ra-crm-modal-body, where .ra-crm-public-form selects are deliberately
   full-width instead (see that rule further down) — two different
   contexts reusing the same class name with opposite intended widths. */
.ra-crm-public-body .ra-crm-public-search select,
.ra-crm-public-body .ra-crm-public-filter-bar select,
.ra-crm-public-body .ra-crm-public-form select {
	display: inline-block !important;
	width: auto !important;
	min-width: 160px;
	padding: 7px 10px;
	border: 1px solid var(--ra-border-light);
	border-radius: 4px;
	font-size: 13px;
	background: var(--ra-warm-white);
	color: var(--ra-charcoal);
	vertical-align: middle;
}

.ra-crm-public-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.ra-crm-public-form input,
.ra-crm-public-form select {
	padding: 8px 10px;
	border: 1px solid var(--ra-border-light);
	border-radius: 4px;
}

.ra-crm-public-inline-form select {
	padding: 4px 6px;
	border: 1px solid var(--ra-border-light);
	border-radius: 4px;
}

/*
	Wraps the filter bar form + the active-filters chip row into one
	sticky unit. Previously only .ra-crm-public-filter-bar itself was
	sticky — the chips below it (.ra-crm-public-active-filters), which
	are the part that actually shows what's currently applied, scrolled
	away on their own. Sticking just the bar without the chips defeated
	the point: "always see what filters are applied" needs the chips
	to stay too, not just the dropdowns.
*/
.ra-crm-public-filter-sticky {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--ra-bg-card, #fff);
	padding-top: 8px;
	margin: 0 -24px;
	padding-left: 24px;
	padding-right: 24px;
}

.ra-crm-public-filter-bar {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 12px;
	padding: 14px 16px;
	background: var(--ra-border-light, #f5f4f0);
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.ra-crm-public-filter-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ra-crm-public-filter-group label {
	font-size: 12px;
	font-weight: 600;
	color: var(--ra-text-muted, #6e6c68);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.ra-crm-public-filter-group select {
	padding: 7px 10px;
	border: 1px solid var(--ra-border-light);
	border-radius: 4px;
	min-width: 160px;
}

/* Reports sub-tabs (Overview/Revenue & Clients/Alerts & VIP/Cancellations &
   Payments) — the page had grown long enough to be hard to read, so it's
   split into these; the filter bar above stays shared across all of them. */
.ra-crm-public-subnav {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	margin: 4px 0 24px;
	border-bottom: 2px solid var(--ra-border-light, #e0deda);
}

.ra-crm-public-subnav-link {
	display: inline-block;
	padding: 8px 16px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--ra-text-muted, #6e6c68);
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
}

.ra-crm-public-subnav-link:hover {
	color: var(--ra-forest-medium, #2d4f46);
}

.ra-crm-public-subnav-link.is-active {
	color: var(--ra-forest-dark, #1e352f);
	border-bottom-color: var(--ra-safari-gold, #c2a677);
}

.ra-crm-public-active-filters {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 20px;
	font-size: 13px;
}

.ra-crm-public-active-filters > span {
	color: var(--ra-text-muted, #6e6c68);
}

.ra-crm-public-filter-chip {
	display: inline-block;
	padding: 4px 10px;
	background: var(--ra-forest-dark, #1e352f);
	color: var(--ra-warm-white, #fff);
	border-radius: 999px;
	text-decoration: none;
	font-size: 12px;
}

.ra-crm-public-filter-chip:hover {
	opacity: 0.85;
}

/* Requested directly — Website Analytics quick date-range picks
   (Last 30/90 days, fiscal quarter/year), reusing the existing chip
   style rather than inventing a new one. Sits inside the same sticky
   filter wrapper as the main filter bar and the active-filters chips. */
.ra-crm-public-quick-ranges {
	margin: 4px 0 8px;
}
.ra-crm-public-quick-ranges .ra-crm-public-filter-chip {
	background: transparent;
	color: var(--ra-forest-dark, #1e352f);
	border: 1px solid var(--ra-border-light, #ddd8cf);
	margin-right: 6px;
}
.ra-crm-public-quick-ranges .ra-crm-public-filter-chip.is-active {
	background: var(--ra-forest-dark, #1e352f);
	color: var(--ra-warm-white, #fff);
}

.ra-crm-public-filter-clear {
	font-size: 12px;
	text-decoration: underline;
}

.ra-crm-public-button {
	display: inline-block;
	padding: 9px 16px;
	background: var(--ra-warm-white);
	border: 1px solid var(--ra-border-light);
	border-radius: 4px;
	color: var(--ra-forest-dark);
	text-decoration: none;
	font-size: 13px;
	cursor: pointer;
}

.ra-crm-public-button-primary {
	background: var(--ra-forest-dark);
	color: var(--ra-warm-white);
	border-color: var(--ra-forest-dark);
}

.ra-crm-public-button-small {
	padding: 4px 10px;
	font-size: 12px;
}

.ra-crm-public-badge {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 12px;
	font-size: 11px;
	background: var(--ra-border-light);
	color: var(--ra-charcoal);
}

.ra-crm-public-badge-won {
	background: #dcefe4;
	color: #1e352f;
}

.ra-crm-public-badge-lost {
	background: #f3dede;
	color: #6e2b2b;
}

.ra-crm-public-badge-new {
	background: #efe6d3;
	color: #6e5626;
}

/* The two mid-pipeline statuses — arguably the ones a reservationist looks
   at most, since they mean "I'm actively working this" — previously had no
   colour of their own and fell back to the plain grey .ra-crm-public-badge
   default, indistinguishable from each other at a glance. */
.ra-crm-public-badge-contacted {
	background: #dce8f3;
	color: #1e3f6e;
}

.ra-crm-public-badge-proposal_sent {
	background: #e0dcf3;
	color: #402b6e;
}

/* Region (SADC / International) is a different concept from enquiry status
   and deliberately has its own classes rather than reusing badge-won/
   badge-new — those happened to look fine together by accident of colour
   choice, but sharing classes meant a future change to status colours
   would have silently recoloured the region badge too. */
.ra-crm-public-badge-region-sadc {
	background: #dcefe4;
	color: #1e352f;
}

.ra-crm-public-badge-region-intl {
	background: #efe6d3;
	color: #6e5626;
}

/* Collection badges — same pill treatment as the region badges above,
   same tokens/naming as assets/admin.css's equivalent. */
.ra-crm-public-badge-collection-pafuri {
	background: var(--ra-pafuri-accent-bg);
	color: var(--ra-pafuri-accent);
}

.ra-crm-public-badge-collection-cape {
	background: var(--ra-cape-accent-bg);
	color: var(--ra-cape-accent);
}

.ra-crm-public-badge-collection-other {
	background: var(--ra-border-light);
	color: var(--ra-charcoal);
}

/* ==========================================================================
   MODAL — used by Add/Edit Contact and Add/Edit Enquiry (assets/public.js).
   Fetched form HTML is injected into .ra-crm-modal-body; the modal itself
   is full-screen on mobile (no wasted chrome, native-app feel) and a
   centered panel on larger screens.
   ========================================================================== */

.ra-crm-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(30, 53, 47, 0.55);
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.ra-crm-modal-overlay.is-open {
	display: flex;
}

.ra-crm-modal {
	background: var(--ra-bg-card, #fff);
	border-radius: 8px;
	width: 100%;
	max-width: 640px;
	max-height: calc(100dvh - 48px);
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	position: relative;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

/* Contact form specifically — wide enough for a real 3-column layout of
   the full admin field set, not just the original short single-column
   form. See assets/public.js loadFormIntoModal(), which toggles this only
   for the contact modal so the enquiry modal keeps its original width. */
.ra-crm-modal--wide {
	max-width: 1040px;
}

.ra-crm-modal-header {
	position: sticky;
	top: 0;
	background: var(--ra-forest-dark, #1e352f);
	color: var(--ra-warm-white, #fff);
	padding: 16px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 1;
}

.ra-crm-modal-header h3 {
	color: var(--ra-warm-white, #fff);
	margin: 0;
	font-size: 15px;
}

.ra-crm-modal-close {
	background: none;
	border: none;
	color: var(--ra-warm-white, #fff);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	opacity: 0.8;
}

.ra-crm-modal-close:hover {
	opacity: 1;
}

.ra-crm-modal-body {
	padding: 20px;
}

.ra-crm-modal-body .ra-crm-public-form {
	flex-direction: column;
	align-items: stretch;
}

.ra-crm-modal-body .ra-crm-public-form input,
.ra-crm-modal-body .ra-crm-public-form select,
.ra-crm-modal-body .ra-crm-public-form textarea {
	width: 100%;
}

/* Multi-column field layout for the widened contact form — 3 columns on
   desktop, narrowing to 2 then 1 as the modal itself narrows below. Each
   field is wrapped in .ra-crm-field so label+input move together as one
   grid item; .ra-crm-field--full spans every column for anything that
   doesn't make sense split up (textareas, checkbox/radio option groups,
   section headings). */
.ra-crm-modal-form-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 20px;
}

.ra-crm-modal-form-grid .ra-crm-field {
	min-width: 0;
}

.ra-crm-modal-form-grid .ra-crm-field--full {
	grid-column: 1 / -1;
}

.ra-crm-modal-form-grid .ra-field-label {
	margin-top: 14px;
}

.ra-crm-modal-form-grid .ra-field-label:first-child {
	margin-top: 0;
}

.ra-crm-modal-form-section {
	grid-column: 1 / -1;
	margin: 18px 0 4px;
	padding-top: 14px;
	border-top: 1px solid var(--ra-border-light, #e0deda);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ra-text-muted, #6e6c68);
}

.ra-crm-modal-form-section:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

@media (max-width: 900px) {
	.ra-crm-modal-form-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ra-crm-modal-loading,
.ra-crm-modal-error {
	padding: 40px 20px;
	text-align: center;
	color: var(--ra-text-muted, #6e6c68);
}

.ra-crm-modal-error {
	color: #a02020;
}

/* Radio/checkbox option groups inside modal forms — same visual language as the admin ra-radio-group. */
.ra-crm-modal-body .ra-option-group {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 4px 0 12px;
}

.ra-crm-modal-body .ra-option-group label {
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

.ra-crm-modal-body label.ra-field-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--ra-text-muted, #6e6c68);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 14px 0 4px;
}

.ra-crm-modal-body label.ra-field-label:first-child {
	margin-top: 0;
}

.ra-crm-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--ra-border-light, #e0deda);
}

.ra-crm-modal-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--ra-forest-dark, #1e352f);
	color: var(--ra-warm-white, #fff);
	padding: 12px 20px;
	border-radius: 6px;
	font-size: 13px;
	z-index: 100001;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
	display: none;
}

.ra-crm-modal-toast.is-visible {
	display: block;
}

.ra-crm-modal-toast.is-error {
	background: #6e2b2b;
}

/* ==========================================================================
   RESPONSIVE — mobile-first adjustments. Reservations staff are assumed to
   be on tablets/phones as often as desktop given the workflow this is
   built for (working enquiries throughout the day, not always at a desk).
   ========================================================================== */

@media (max-width: 782px) {
	.ra-crm-public-body {
		padding: 16px;
	}

	.ra-crm-public-filter-sticky {
		margin: 0 -16px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.ra-crm-public-nav {
		padding: 0 12px;
	}

	.ra-crm-public-nav-link {
		padding: 12px 12px;
		font-size: 13px;
	}

	.ra-crm-public-card {
		flex: 1 1 100%; /* one per row on phones — two-per-row math (min-width 140px) gets cramped below ~360px wide */
		min-width: 0;
	}

	.ra-crm-public-search {
		flex-direction: column;
		align-items: stretch;
	}

	.ra-crm-public-search input[type="text"],
	.ra-crm-public-search select {
		max-width: none;
		width: 100%;
	}

	.ra-crm-public-body .ra-crm-public-search select,
	.ra-crm-public-select-inline {
		width: 100% !important;
		min-width: 0;
	}

	.ra-crm-search-row {
		flex-direction: column;
		align-items: stretch;
	}

	.ra-crm-search-input {
		flex-basis: auto;
		max-width: none;
	}

	.ra-crm-public-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.ra-crm-public-toolbar-left,
	.ra-crm-public-toolbar-right {
		justify-content: space-between;
	}

	.ra-crm-public-form {
		flex-direction: column;
		align-items: stretch;
	}

	.ra-crm-public-form input,
	.ra-crm-public-form select {
		width: 100%;
	}

	/* Full-screen modal on mobile — no wasted chrome around a small form on a small screen. */
	.ra-crm-modal-overlay {
		padding: 0;
	}

	.ra-crm-modal {
		max-width: 100%;
		width: 100%;
		height: 100%;
		max-height: 100dvh;
		max-height: 100vh;
		border-radius: 0;
	}

	.ra-crm-modal--wide {
		max-width: 100%;
	}

	.ra-crm-modal-form-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.ra-crm-public-nav-link {
		padding: 10px 10px;
		font-size: 12px;
	}
}