/*
 * ReMarkit site layout (duckie_mo_mo template).
 * Shared chrome (background, fixed header/footer, buttons, logo) used by
 * every page — home included — plus the inner-page content components
 * (page title band, content card, sidebar, cards, CTA band). Design
 * tokens live in tokens.css.
 */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

html, body {
	/* Falls back to this flat tone before/without the animated 3D scene
	   (see bg-scene.js, which reads the same light/dark state to pick a
	   matching scene color) — every page shares one wallpaper tone. */
	background: var(--rmk-page-bg);
	color: var(--rmk-chrome-text);
}
/* Inner (staff) pages only — home keeps the flat tone as-is, it already
   has the animated scene doing visual work. Subtle depth behind the
   glass panels, not a competing visual element: kept to existing
   --rmk-* tokens so it stays on-brand, and to a soft radial blend so it
   doesn't create a hard seam near the fixed footer. */
body.rmk-inner {
	background: radial-gradient(120% 120% at 15% 0%, var(--rmk-primary-deep2) 0%, var(--rmk-page-bg) 55%);
}

body {
	margin: 0;
	font-family: 'Instrument Sans', sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	/* Stops the browser fake-bolding/italicising the FALLBACK font while
	   the real one is still loading — that synthesis is a second, separate
	   source of visible flicker/shift on top of the font swap itself. */
	font-synthesis: none;
}

a { color: var(--rmk-accent); text-decoration: none; }
a:hover { color: var(--rmk-accent-hover); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--rmk-accent); outline-offset: 2px; }

.wrap { max-width: 1180px; margin: 0 auto; width: 100%; }
.h-cond { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; }

/*
 * Joomla's admin-only "edit this module" affordance (visible when logged
 * in as an admin with front-end module editing enabled). The pencil icon
 * link is meant to stay visible; the tooltip text beside it
 * ("Edit Module / [Title] / Position: [pos]") is only meant to show on
 * hover, via Bootstrap's Tooltip JS component — which this template
 * doesn't load (see global CLAUDE.md: Bootstrap JS isn't auto-loaded in
 * Joomla 6). Without that JS the tooltip div just renders as plain
 * visible text, so hide it outright rather than wire up unused JS.
 */
[role="tooltip"] { display: none; }

/* ---------- Fixed wallpaper ---------- */

/* Home only: hosts the animated three.js scene (its own flat navy
   background + floating cubes/sprites), fixed behind everything. Inner
   pages don't run that WebGL scene — they get the same flat navy tone
   straight from html/body above, so no wallpaper element is needed there. */
.bg-fixed { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.bg-scene { overflow: hidden; }
.bg-scene canvas { display: block; width: 100% !important; height: 100% !important; }

.topline { position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(245, 130, 32, .6), transparent); }

/* ---------- Fixed header (every page) ---------- */

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--rmk-bar-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rmk-border-chrome); }
.header-row { position: relative; max-width: 1180px; margin: 0 auto; padding: 16px 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.header-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.header-actions { display: none; gap: 9px; align-items: center; }
.header-actions.visible { display: flex; }

.pill-btn { display: inline-flex; align-items: center; border-radius: var(--rmk-radius-pill); padding: 10px 22px; font: 600 13px 'Instrument Sans', sans-serif; cursor: pointer; border: 1px solid var(--rmk-control-border); min-height: 40px; transition: filter .15s ease; }
.pill-btn:hover { filter: brightness(.92); }
.pill-btn.contact { background: var(--rmk-primary); color: #fff; }
.pill-btn.demo { background: var(--rmk-accent); color: var(--rmk-on-accent); }

/* Logo mark: always a white pill regardless of theme — it's a fixed
   brand asset (like a business card), not part of the page surface. */
.logo { display: flex; align-items: center; gap: 10px; height: 34px; background: #fff; border-radius: var(--rmk-radius-sm); padding: 18px 22px 18px 12px; }
.logo-mark { height: 34px; width: 34px; flex: none; object-fit: contain; border-radius: 8px; }
.logo-word { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 27px; letter-spacing: .05em; white-space: nowrap; }
.logo-word .navy-part { color: var(--rmk-primary); -webkit-text-stroke: 1.6px rgba(255, 255, 255, .96); paint-order: stroke fill; }
.logo-word .orange-part { color: var(--rmk-accent); -webkit-text-stroke: 1.6px rgba(255, 255, 255, .96); paint-order: stroke fill; }
footer .logo { height: 26px; }
footer .logo-word { font-size: 21px; }
.header-email { font: 400 13.5px 'Instrument Sans', sans-serif; color: var(--rmk-chrome-text-soft); }

/* Logged-in-only logout control. Desktop keeps it out of the way (it's
   not part of the nav-new tab list, see index.php); mobile pins it to
   the header's top-right corner, independent of the tab bar at the
   bottom of the screen. */
.header-logout { display: none; }


/* ---------- Tab navigation: top bar on desktop, bottom bar on mobile ----------
   Both are fed directly from the "Menu Assignment" checkboxes on this
   template style (index.php queries #__menu.template_style_id) — not a
   module/module position — so checking/unchecking a box there is the
   only thing that adds, removes, or reorders a tab, and top/bottom can
   never drift out of sync with each other. */

.rmk-nav-top ul,
.rmk-nav-bottom ul { display: flex; list-style: none; margin: 0; padding: 0; }
.rmk-nav-top a,
.rmk-nav-bottom a { text-decoration: none; }

/* Desktop: inline tabs in the fixed header. Hidden by default, same as
   .rmk-nav-bottom below — the pair of media queries further down is the
   only thing that ever turns either one on, so there's one place that
   decides which shows, not "visible unless told otherwise."
   Centered on the header bar itself (absolute against .header-row,
   which is position:relative), not just centered in whatever flex space
   is left beside the logo — .header-row's own justify-content:
   space-between only centers within leftover space, which drifts off
   true-center depending on logo/header-actions width. This assumes a
   short, modest item list (see the max-5 standard below) — too many
   items risks overlapping the logo on narrower desktop widths. */
.rmk-nav-top {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.rmk-nav-top ul { flex-wrap: wrap; gap: 4px; align-items: center; }
.rmk-nav-top a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: var(--rmk-radius-pill);
	color: var(--rmk-nav-text);
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}
.rmk-nav-top a svg { flex: 0 0 auto; }
.rmk-nav-top a:hover { color: var(--rmk-chrome-text); background: var(--rmk-glass-item-bg); }
.rmk-nav-top li.current > a,
.rmk-nav-top li.active > a {
	background: var(--rmk-control-bg);
	color: var(--rmk-control-text);
	border: 1px solid var(--rmk-control-border);
	padding: 7px 15px;
}

/* Mobile: fixed bottom tab bar, equal-width tabs. */
.rmk-nav-bottom {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 46;
	background: var(--rmk-bar-bg);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--rmk-border-chrome);
	padding-bottom: env(safe-area-inset-bottom, 0);
}
.rmk-nav-bottom ul { align-items: stretch; }
.rmk-nav-bottom li { flex: 1 1 0; min-width: 0; }
.rmk-nav-bottom a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	text-align: center;
	min-height: 52px;
	padding: 6px 8px;
	color: var(--rmk-nav-text);
	font-weight: 600;
	font-size: 12px;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rmk-nav-bottom a svg { flex: 0 0 auto; }
.rmk-nav-bottom li.current > a,
.rmk-nav-bottom li.active > a { color: var(--rmk-accent); }

/* The one pair of breakpoint values, kept together on purpose: both
   blocks always exist in the markup (same module position, see
   index.php), so this pair of queries is the ONLY thing that decides
   which one paints. Nothing else in the CSS or PHP branches on width or
   device, so top/bottom can't drift out of sync with each other. */
@media (max-width: 1199.98px) {
	.rmk-nav-bottom { display: block; }
	/* One fixed bar at the bottom, not two stacked on a phone screen:
	   the tab bar replaces the footer bar at this width. */
	.site-footer { display: none; }

	/* Logo pinned left, logout pinned top-right — explicit rather than
	   relying on flexbox's default with the nav (now bottom-only, not in
	   this row at all) out of the picture. */
	.header-row { justify-content: flex-start; }
	/* It's a real action (ends the session), not a nav tab — styled as a
	   solid button like everything else on the site (--rmk-control-*,
	   same tokens as .btn), not a plain nav-colored outline pill, per
	   the "this is a button, is it not?" call. */
	.header-logout {
		display: inline-flex;
		align-items: center;
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
		padding: 6px 14px;
		border-radius: var(--rmk-radius-pill);
		border: 1px solid var(--rmk-control-border);
		font: 600 13px 'Instrument Sans', sans-serif;
		background: var(--rmk-control-bg);
		color: var(--rmk-control-text);
		white-space: nowrap;
	}
	.header-logout:hover { filter: brightness(1.12); }
	body.rmk-inner { padding-bottom: 64px; }
	body.rmk-home { padding-bottom: 56px; }
}
@media (min-width: 1200px) {
	.rmk-nav-top { display: block; }
	/* Special item, not a 6th nav tab: it's a real action (ends the
	   session), so it's styled as a solid button like everything else on
	   the site (--rmk-control-*, same tokens as .btn) rather than the
	   nav's own no-border/filled-when-active look or a plain outline —
	   sitting at .header-right's own right edge since .rmk-nav-top no
	   longer occupies this div's flow (it's absolutely positioned to
	   center on the header bar instead). */
	.header-logout {
		display: inline-flex;
		align-items: center;
		padding: 6px 14px;
		border-radius: var(--rmk-radius-pill);
		border: 1px solid var(--rmk-control-border);
		font: 600 13px 'Instrument Sans', sans-serif;
		background: var(--rmk-control-bg);
		color: var(--rmk-control-text);
		white-space: nowrap;
	}
	.header-logout:hover {
		filter: brightness(1.12);
	}
}

/* ---------- Page hero band (inner pages) ---------- */

/* Bottom padding scales down with viewport the same way .rmk-content-card's
   own padding does (clamp, not a flat 40px) — the combined "hero bottom
   padding + card top padding" gap was reading as too much dead air above
   the filters on a phone-width screen, flagged live as "looks off". */
.page-hero { position: relative; z-index: 1; padding: 122px 30px clamp(16px, 4vw, 40px); }
.page-hero h1 { margin: 0; font-size: clamp(32px, 4.4vw, 54px); line-height: 1; color: var(--rmk-chrome-text); }
.page-hero .breadcrumb-list { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 14px 0 0; padding: 0; font-size: .9rem; color: var(--rmk-chrome-text-faint); }
.page-hero .breadcrumb-list a { color: var(--rmk-chrome-text-soft); }

/* ---------- Eyebrow (small rule + label, used above any heading) ---------- */

.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.eyebrow .rule { width: 32px; height: 2px; background: var(--rmk-accent); }
.eyebrow .txt { font: 600 11.5px 'Instrument Sans', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--rmk-accent); }

/* ---------- Main content wrapper (inner pages) ---------- */

.rmk-main { position: relative; z-index: 1; padding: 0 30px 90px; }
.rmk-main-standalone { padding-top: 122px; }

.rmk-main-with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; align-items: start; }
.rmk-main-primary { min-width: 0; }

@media (max-width: 992px) {
	.rmk-main-with-sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	.page-hero, .header-row, .rmk-main, .footer-row { padding-left: 20px; padding-right: 20px; }
}

/* ---------- Content card / sidebar card (inner pages) ---------- */

.rmk-content-card {
	background: var(--rmk-surface);
	color: var(--rmk-text);
	border-radius: var(--rmk-radius);
	box-shadow: var(--rmk-shadow-lifted);
	/* Horizontal padding scales down smoothly with viewport width instead
	   of staying a flat 2.5rem (40px) at every size — on a narrow phone
	   that 40px stacked on top of the page's own 20px edge padding (see
	   the 900px media query below) was eating 60px+ off each side before
	   any actual content started, which is exactly what was squeezing
	   labels/selects into not enough room to lay out properly. clamp()
	   keeps it dynamic rather than another fixed breakpoint jump: never
	   less than 16px, never more than the original 40px, scaling with
	   viewport width in between. Vertical padding now uses the exact same
	   clamp() — flagged live as wanting top/bottom to match left/right,
	   rather than staying a flat 40px while the sides scale down. */
	padding-block: clamp(16px, 6vw, 2.5rem);
	padding-inline: clamp(16px, 6vw, 2.5rem);
}

.rmk-content-card h1:first-child,
.rmk-content-card h2:first-child { margin-top: 0; }

.rmk-content-card h1, .rmk-content-card h2, .rmk-content-card h3 { color: var(--rmk-primary); }
/* :not(.btn):not(.rmk-btn) matters: a component can render a button as an
   <a> (com_crm's "Add Customer" does exactly this), and without the
   exclusion this rule's higher specificity (class + element) beats the
   single-class .btn-primary rule above it, silently overriding the
   button's color/no-underline with plain-link styling — in dark mode
   that's navy text forced onto a navy button, i.e. invisible. */
.rmk-content-card a:not(.btn):not(.rmk-btn) { color: var(--rmk-primary); text-decoration: underline; }
.rmk-content-card a:not(.btn):not(.rmk-btn):hover { color: var(--rmk-accent); }

.rmk-sidebar-card { padding: 1.75rem; }

.rmk-sidebar-card .modulesplit,
.rmk-sidebar-card > div:not(:last-child) {
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--rmk-border);
}

.rmk-sidebar-card h3 { color: var(--rmk-primary); font-weight: 700; font-size: 1rem; margin: 0 0 .75rem; }
.rmk-sidebar-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.rmk-sidebar-card a { font-weight: 600; }

/* ---------- Section headings / card grid (article content) ---------- */

.rmk-section { margin-bottom: 3rem; }
.rmk-section h2 { color: var(--rmk-primary); font-weight: 700; margin-bottom: 1.75rem; text-align: center; }

.rmk-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; }

.rmk-card {
	background: var(--rmk-surface);
	border: 1px solid var(--rmk-border);
	border-radius: var(--rmk-radius);
	box-shadow: var(--rmk-shadow-resting);
	padding: 1.5rem;
	transition: transform .16s ease, box-shadow .16s ease;
}
.rmk-card:hover { transform: translateY(-3px); box-shadow: var(--rmk-shadow-lifted); }
.rmk-card h3 { color: var(--rmk-primary); font-weight: 700; font-size: 1.1rem; margin-bottom: .5rem; }
.rmk-card p { color: var(--rmk-text-soft); margin: 0; }

/* ---------- Buttons: THE site button standard ----------
   One rule for every button on the site, whatever markup produced it
   (our own .rmk-btn, Joomla/Bootstrap .btn, component views), covering
   the shape/sizing/font every variant shares. Colour is layered on top
   by the per-variant blocks below — .btn-primary solid-filled,
   everything else (.btn-secondary, .btn-outline-*, .btn-danger) a real
   outline: transparent fill, coloured text/border. Site-wide: any
   component needing a coloured/outlined button should reach for these
   standard classes rather than authoring its own colour overrides — a
   component-level override here is what turned one bug (an "Assigned to
   Me" toggle rendering white in both its on/off states) into a long
   multi-layer debugging session, since site.css and the component's own
   CSS both fought to own the same button's colour. Keep colour
   decisions here, in the template, not per-component. See
   button-standard.md. */
.rmk-btn,
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-info,
.btn-light,
.btn-dark,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-light,
.btn-outline-dark,
.btn-outline-info,
.btn-danger,
.btn-outline-danger {
	/* inline-flex + nowrap: a pill's height should come from line-height +
	   padding and its width from content + padding — never let a
	   multi-word label wrap onto two lines, which (combined with the
	   pill radius) is what turned "Add Customer" into a near-circle when
	   its container got narrow. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	border-radius: var(--rmk-radius-pill);
	padding: .7rem 1.6rem;
	/* font shorthand FIRST, so it resets family/size/line-height to the
	   button's own inherited values before the explicit weight/line-height
	   below override just those two — a <button> element's UA default
	   font (which some browsers give a native platform font/metrics
	   distinct from whatever an <a> inherits from the page) was still
	   leaking through otherwise, which combined with appearance:auto's
	   native chrome is what was actually causing Delete to size
	   differently from Edit/Log Activity despite identical box-model CSS. */
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s ease, background-color .15s ease, color .15s ease;
	/* appearance:none strips native OS button chrome (padding/border the
	   browser adds on top of authored CSS for a real <button>, which an
	   <a> never had to begin with) — without it a <button> can end up
	   sized differently from an <a> carrying the exact same classes even
	   with identical padding/border/box-sizing authored here. */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	/* box-sizing pinned explicitly and a fixed min-height as the actual
	   source of truth for "site standard button height", rather than
	   trusting padding+line-height to add up the same way on every
	   element type. */
	box-sizing: border-box;
	min-height: 2.75rem;
	border: 1px solid var(--rmk-control-border);
}

/* Solid, filled variant — the one "primary action" look, --rmk-control-*
   surface: white + navy text in light mode, navy + orange text in dark
   mode (see tokens.css's [data-rmk-scheme="light"] block). */
.rmk-btn,
.btn-primary {
	background: var(--rmk-control-bg);
	color: var(--rmk-control-text);
}
.rmk-btn:hover,
.rmk-btn:focus,
.btn-primary:hover,
.btn-primary:focus {
	background: var(--rmk-control-bg);
	color: var(--rmk-control-text);
	border-color: var(--rmk-control-border);
	filter: brightness(1.12);
}

/* Outline variant — everything that ISN'T the primary action: a real
   outline (transparent fill, --rmk-control-text for text/border) so it
   reads as visibly lower-emphasis next to a solid .btn-primary, on
   every surface (dark glass panel or white content/component card)
   since --rmk-control-text already flips with light/dark mode. Hover
   fills solid with the same control surface, same as .btn-primary's
   resting look, for a consistent "pressed/engaged" affordance.

   .btn:not(.btn-primary) — a plain class="btn btn-primary" element
   matches the bare .btn selector too; the :not() stops this block from
   fighting the solid variant above for the SAME element via specificity
   (0-2-0 here vs 0-1-0 there) rather than relying on source order. */
.btn:not(.btn-primary),
.btn-secondary,
.btn-success,
.btn-info,
.btn-light,
.btn-dark,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-light,
.btn-outline-dark,
.btn-outline-info {
	background: transparent;
	color: var(--rmk-control-text);
	border-color: var(--rmk-control-border);
}
.btn:hover,
.btn:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-success:hover,
.btn-info:hover,
.btn-light:hover,
.btn-dark:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-light:hover,
.btn-outline-dark:hover,
.btn-outline-info:hover {
	background: var(--rmk-control-bg);
	color: var(--rmk-control-text);
	border-color: var(--rmk-control-border);
}

/* Danger variant — destructive actions (Delete). --rmk-error is a fixed
   coral-red, deliberately NOT theme-flipping like --rmk-control-* —
   "this is destructive" shouldn't change meaning between light/dark
   mode. Outline at rest (matches the rest of the outline family), solid
   red fill on hover as a "you're about to commit" cue. */
.btn-danger,
.btn-outline-danger {
	background: transparent;
	color: var(--rmk-error);
	border-color: var(--rmk-error);
}
.btn-danger:hover,
.btn-outline-danger:hover {
	background: var(--rmk-error);
	color: #ffffff;
	border-color: var(--rmk-error);
	filter: none;
}

/* Plain text button — no pill, no border. */
.btn-link {
	background: none;
	border: none;
	padding: 0;
	color: var(--rmk-accent);
	font-weight: 600;
	text-decoration: none;
}
.btn-link:hover { color: var(--rmk-accent-hover); background: none; text-decoration: underline; }

/* min-height explicitly pinned to match .rmk-select-sm .rmk-select-trigger
   exactly (e.g. Reassign next to the Account Owner select) — .btn-sm
   otherwise only trims padding/font-size and still inherits the base
   .btn rule's min-height: 2.75rem unchanged, so a "sm" button rendered
   at full button height regardless of its smaller padding. This is the
   correct direction: the smaller control sets the standard, this button
   comes down to meet it — not the trigger stretched up to a plain
   .btn's height. */
.btn-sm { padding: .45rem 1.1rem; font-size: .85rem; min-height: 2.2rem; }
.btn-lg { padding: .9rem 2.1rem; font-size: 1.05rem; }
.btn:disabled, .btn.disabled { opacity: .55; cursor: default; filter: none; }

/* ---------- Form panel (glass card holding a form: contact, demo, etc.) ----------
   Standard component — reuse this exact panel/field/button set for any
   new form anywhere on the site rather than inventing new styling. */

.panel { background: var(--rmk-glass-bg); border: 1px solid var(--rmk-glass-border); border-radius: var(--rmk-radius); padding: 30px 30px 34px; backdrop-filter: blur(4px); }
.segtrack { display: flex; gap: 6px; margin-bottom: 26px; background: rgba(0, 0, 0, .16); border-radius: var(--rmk-radius-pill); padding: 4px; }
.seg { flex: 1; text-align: center; border-radius: var(--rmk-radius-pill); padding: 10px; font: 600 13px 'Instrument Sans', sans-serif; cursor: pointer; background: transparent; color: var(--rmk-glass-text-soft); border: 1px solid var(--rmk-control-border); transition: background .18s ease, color .18s ease; min-height: 36px; }
.seg[aria-selected="true"] { background: var(--rmk-control-bg); color: var(--rmk-control-text); border-color: var(--rmk-control-border); }
.panel h2 { margin: 0 0 6px; font-size: 30px; color: var(--rmk-glass-text); }
.panel .note { margin: 0 0 22px; font: 400 14px/1.55 'Instrument Sans', sans-serif; color: var(--rmk-glass-text-soft); }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 11px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label,
.panel label { font: 400 11.5px 'Instrument Sans', sans-serif; color: var(--rmk-field-label); letter-spacing: .03em; }
.panel input,
.panel textarea {
	background: var(--rmk-field-bg);
	border: 1px solid var(--rmk-field-border);
	border-radius: var(--rmk-radius-sm);
	padding: 13px 14px;
	font: 400 14px 'Instrument Sans', sans-serif;
	color: var(--rmk-field-text);
	width: 100%;
	resize: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.panel input::placeholder,
.panel textarea::placeholder { color: var(--rmk-field-placeholder); }
.panel input:focus,
.panel textarea:focus { outline: none; border-color: var(--rmk-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rmk-accent) 25%, transparent); }
.panel input[aria-invalid="true"],
.panel textarea[aria-invalid="true"] { border-color: var(--rmk-error); }
.err { font: 400 12px 'Instrument Sans', sans-serif; color: var(--rmk-error); min-height: 14px; }
.form-fields { display: flex; flex-direction: column; gap: 11px; margin-top: 11px; }
.msgfield textarea { height: 84px; }
.msgfield.short textarea { height: 52px; }
.form-shell { min-height: 0; }

.slot-select { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: var(--rmk-field-bg); border: 1px solid var(--rmk-field-border); border-radius: var(--rmk-radius-sm); padding: 13px 14px; cursor: pointer; min-height: 48px; transition: border-color .15s ease, background .15s ease; }
.slot-select.chosen { background: color-mix(in srgb, var(--rmk-accent) 18%, transparent); border-color: var(--rmk-accent); }
.slot-select-label { font: 600 14px 'Instrument Sans', sans-serif; color: var(--rmk-glass-text); }
.slot-select-tag { font: 500 11px ui-monospace, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--rmk-accent); }

.submit-btn { background: var(--rmk-control-bg); color: var(--rmk-control-text); border: none; border-radius: var(--rmk-radius-pill); padding: 14px; text-align: center; font: 600 14.5px 'Instrument Sans', sans-serif; cursor: pointer; margin-top: 4px; min-height: 48px; transition: filter .15s ease; width: 100%; }
.submit-btn:hover { filter: brightness(1.1); }
.submit-btn:disabled { opacity: .7; cursor: default; }
.success { font: 400 15px/1.5 'Instrument Sans', sans-serif; color: var(--rmk-glass-text); text-align: center; padding: 24px 6px; }
.success .big { display: block; font: 600 17px 'Instrument Sans', sans-serif; color: var(--rmk-accent); margin-bottom: 6px; }

/* ---------- Modal dialog (standard for any popup: calendar, confirmations, etc.) ---------- */

.modal-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(9, 26, 42, .5); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal-overlay[hidden] { display: none; }
.modal-panel { width: 100%; max-width: 680px; background: var(--rmk-modal-bg); border: 1px solid var(--rmk-modal-border); border-radius: 14px; overflow: hidden; box-shadow: var(--rmk-shadow-lifted); }
.modal-head { padding: 20px 26px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rmk-modal-border); }
.modal-title { font-size: 26px; color: var(--rmk-glass-text); }
.modal-sub { font: 400 12.5px 'Instrument Sans', sans-serif; color: var(--rmk-glass-text-soft); margin-top: 2px; }
.modal-close { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--rmk-glass-item-border); background: transparent; display: grid; place-items: center; font: 400 15px 'Instrument Sans', sans-serif; color: var(--rmk-glass-text); cursor: pointer; min-height: 0; }
.modal-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.modal-footer { margin-top: auto; padding-top: 22px; }
.modal-summary { font: 400 12.5px 'Instrument Sans', sans-serif; color: var(--rmk-glass-text-soft); margin-bottom: 12px; }
@media (max-width: 900px) { .modal-body { grid-template-columns: 1fr; } }

/* ---------- Delete-confirmation modal (customer detail) ----------
   Reuses the shared .modal-overlay/.modal-panel/.modal-head chrome above
   — only the body content here is new. Not wrapped in .rmk-content-card/
   --panel (this sits at the top level of the template, not inside the
   component's own card), so the shared label/textarea styling scoped to
   those ancestor classes doesn't reach it — styled directly here instead,
   matching the same "glass field" look used everywhere else on a dark
   surface. */
.crm-delete-modal-body {
	padding: 22px 26px 26px;
	color: var(--rmk-glass-text);
}
.crm-delete-modal-body p { color: var(--rmk-glass-text-soft); margin: 0 0 16px; }
.crm-delete-modal-body .form-label {
	display: block;
	color: var(--rmk-glass-text-soft);
	font-weight: 600;
	font-size: .95rem;
	margin-bottom: .4rem;
}
.crm-delete-modal-body textarea.form-control {
	width: 100%;
	background: var(--rmk-field-bg);
	border: 1px solid var(--rmk-field-border);
	border-radius: var(--rmk-radius);
	color: var(--rmk-field-text);
	padding: .65rem .9rem;
	resize: vertical;
}
.crm-delete-modal-body textarea.form-control::placeholder { color: var(--rmk-field-placeholder); }
.crm-delete-modal-body textarea.form-control:focus {
	outline: none;
	border-color: var(--rmk-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rmk-accent) 25%, transparent);
}
.crm-delete-modal-error {
	color: #ff8a7a;
	font-size: .85rem;
	font-weight: 600;
	margin: 10px 0 0;
}
.crm-delete-modal-body .crm-btn-row {
	margin-top: 20px;
}

/* ---------- Calendar picker (used inside the modal above) ---------- */

.cal-pane { padding: 22px 26px; border-right: 1px solid var(--rmk-modal-border); }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal-navbtn { width: 28px; height: 28px; border-radius: var(--rmk-radius-sm); border: 1px solid var(--rmk-glass-item-border); background: transparent; display: grid; place-items: center; color: var(--rmk-glass-text); font: 400 13px 'Instrument Sans', sans-serif; cursor: pointer; min-height: 0; }
.cal-month { font: 600 14px 'Instrument Sans', sans-serif; color: var(--rmk-glass-text); }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 7px; }
.cal-weekdays span { text-align: center; font: 500 10px ui-monospace, Menlo, monospace; color: var(--rmk-glass-text-soft); }
.cal-weekdays span.wk { color: var(--rmk-glass-text-soft); opacity: .7; }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-day { aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--rmk-radius-sm); background: var(--rmk-glass-item-bg); border: 1px solid var(--rmk-glass-item-border); color: var(--rmk-glass-text); cursor: pointer; font: 400 13px 'Instrument Sans', sans-serif; min-height: 0; }
.cal-day.disabled { background: transparent; border-color: transparent; color: var(--rmk-glass-text-soft); opacity: .5; cursor: default; }
.cal-day.empty { visibility: hidden; cursor: default; }
.cal-day.selected { background: var(--rmk-accent); border-color: var(--rmk-accent); color: var(--rmk-on-accent); }
.time-pane { padding: 22px 26px; display: flex; flex-direction: column; }
.time-label { font: 500 10.5px ui-monospace, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--rmk-glass-text-soft); margin-bottom: 12px; }
.time-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.time-chip { text-align: center; border-radius: var(--rmk-radius-sm); padding: 11px 8px; background: var(--rmk-glass-item-bg); border: 1px solid var(--rmk-glass-item-border); color: var(--rmk-glass-text); cursor: pointer; font: 600 13px 'Instrument Sans', sans-serif; min-height: 0; }
.time-chip.selected { background: var(--rmk-accent); border-color: var(--rmk-accent); color: var(--rmk-on-accent); }
.confirm-slot { width: 100%; border-radius: var(--rmk-radius-pill); padding: 13px; background: var(--rmk-glass-item-bg); color: var(--rmk-glass-text-soft); border: none; font: 600 14px 'Instrument Sans', sans-serif; cursor: default; min-height: 48px; }
.confirm-slot:not(:disabled) { background: var(--rmk-accent); color: var(--rmk-on-accent); cursor: pointer; }

/* ---------- Joomla / Bootstrap component layer ----------
   Joomla components (com_users, com_crm, com_content, modules …) emit
   stock Bootstrap markup that knows nothing about this design. Rather
   than restyling each component one at a time, everything Bootstrap
   realistically renders is mapped onto the site's tokens here — so a
   NEW component dropped onto the site inherits the design by default
   instead of leaking Bootstrap's blue/grey/teal defaults. Buttons are
   handled by the site button standard further up. */

/* --- Form fields. Bare element selectors too: component views often
       skip Bootstrap's .form-* classes entirely (com_crm does). --- */
.rmk-content-card .form-label,
.rmk-component-card .form-label,
.rmk-content-card label,
.rmk-component-card label {
	color: var(--rmk-text-soft);
	font-weight: 600;
	/* Bumped from .85rem — flagged live as reading a little small next to
	   the bigger filter controls beside/below it (e.g. Activities'
	   Status/Rep labels). */
	font-size: .95rem;
	margin-bottom: .3rem;
}
/* Activities filter labels (Status/Rep/Customer) specifically — NOT a
   site-wide bump (which would also resize every other form's labels:
   customer edit, activity edit, etc.). Extra specificity
   (.rmk-content-card--panel .crm-activities .form-label, 3 classes) is
   required here on purpose: a later rule below (.rmk-content-card--panel
   .form-label, added for a color fix, unrelated to size) sits at the
   same 2-class specificity as a plain ".crm-activities .form-label"
   would, and — being LATER in the file — silently won every size change
   attempted here via the cascade's normal tie-break, even though this
   rule looked like it should apply. That's why an earlier attempt to
   make these labels 1.5x bigger visibly did nothing at all. */
.rmk-content-card--panel .crm-activities .form-label {
	font-size: 1rem;
}

/* Pill is the standing shape standard for every single-line field/button
   on the site (see project CLAUDE.md) — textarea is the one exception
   (a pill radius only reads correctly on a short control), so it's
   split out below with the normal --rmk-radius rounded-rectangle. */
.rmk-content-card .form-control,
.rmk-content-card .form-select,
.rmk-content-card select,
.rmk-content-card input[type="text"],
.rmk-content-card input[type="email"],
.rmk-content-card input[type="search"],
.rmk-content-card input[type="url"],
.rmk-content-card input[type="tel"],
.rmk-content-card input[type="number"],
.rmk-content-card input[type="date"],
.rmk-content-card input[type="password"],
.rmk-component-card .form-control,
.rmk-component-card .form-select,
.rmk-component-card select {
	border: 1px solid var(--rmk-border);
	border-radius: var(--rmk-radius-pill);
	color: var(--rmk-text);
	background-color: #fff;
	padding: .55rem .9rem;
}
/* textarea.form-control, NOT bare textarea — com_crm's Notes field (and
   any other textarea) carries class="form-control" same as every single-
   line input, which ALSO matches the pill rule right above. CSS
   specificity compares class-COUNT before type-count: the pill rule is
   2 classes (.rmk-content-card .form-control), a bare "textarea" element
   selector here is only 1 class + 1 type — fewer classes always loses
   regardless of the extra type selector, so the pill rule was winning
   outright and rendering a multi-row textarea as a pill/near-circle.
   Adding .form-control here brings this rule to 2 classes + 1 type,
   which actually outranks the pill rule as intended. */
.rmk-content-card textarea.form-control,
.rmk-component-card textarea.form-control,
.rmk-content-card textarea,
.rmk-component-card textarea {
	border: 1px solid var(--rmk-border);
	border-radius: var(--rmk-radius);
	color: var(--rmk-text);
	background-color: #fff;
	padding: .55rem .75rem;
}

.rmk-content-card .form-control:focus,
.rmk-content-card .form-select:focus,
.rmk-content-card select:focus,
.rmk-content-card input:focus,
.rmk-content-card textarea:focus,
.rmk-component-card .form-control:focus,
.rmk-component-card .form-select:focus,
.rmk-component-card select:focus,
.rmk-component-card textarea:focus {
	outline: none;
	border-color: var(--rmk-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rmk-accent) 25%, transparent);
}
.rmk-content-card .form-check-input:checked,
.rmk-component-card .form-check-input:checked {
	background-color: var(--rmk-primary);
	border-color: var(--rmk-primary);
}
.rmk-content-card .form-check-input:focus,
.rmk-component-card .form-check-input:focus {
	border-color: var(--rmk-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rmk-accent) 25%, transparent);
}

/* --- Alerts / system messages. Bootstrap's own palette (and its
       dark-mode variants) is replaced with a tinted card + accent
       stripe, so "No activities logged yet." reads as part of the
       site rather than a stray teal box. --- */
.alert {
	/* Bumped from --rmk-radius-sm (6px, near-square) — flagged live on
	   empty-state boxes ("No activities logged yet") as jarring against
	   the site's other rounded surfaces. Not the full pill: an alert can
	   hold multi-line content (validation error lists), and a pill only
	   reads correctly on a short single-line control — --rmk-radius
	   matches the big panels (.rmk-content-card etc.), which is the
	   audit's own accepted minimum for a box that might not be one line. */
	border: 1px solid var(--rmk-border);
	border-left: 4px solid var(--rmk-primary);
	border-radius: var(--rmk-radius);
	background: color-mix(in srgb, var(--rmk-primary) 6%, #fff);
	color: var(--rmk-text);
	padding: .9rem 1.1rem;
}
.alert a { color: var(--rmk-primary); font-weight: 600; }
.alert-info { border-left-color: var(--rmk-primary); }
.alert-success { border-left-color: #1f9254; background: color-mix(in srgb, #1f9254 7%, #fff); }
.alert-warning { border-left-color: var(--rmk-accent); background: color-mix(in srgb, var(--rmk-accent) 8%, #fff); }
.alert-danger, .alert-error { border-left-color: #c0392b; background: color-mix(in srgb, #c0392b 7%, #fff); }
.alert-heading { color: var(--rmk-primary); font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; font-weight: 700; }

/* --- Menu modules (mod_menu). Joomla ships these with Bootstrap's
       .nav class, which turns the list into a flex row and fights the
       card layout; this restores a clean vertical stack of
       button-style links using the site button standard. --- */
.rmk-content-card .mod-menu,
.rmk-content-card .mod-list,
.rmk-sidebar-card .mod-menu,
.rmk-sidebar-card .mod-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.rmk-content-card .mod-menu > li,
.rmk-sidebar-card .mod-menu > li { width: 100%; }
.rmk-content-card .mod-menu > li > a,
.rmk-sidebar-card .mod-menu > li > a {
	display: block;
	background: var(--rmk-control-bg);
	color: var(--rmk-control-text);
	border: 1px solid var(--rmk-control-border);
	border-radius: var(--rmk-radius-pill);
	padding: .7rem 1.2rem;
	font-weight: 600;
	font-size: .95rem;
	text-align: center;
	text-decoration: none;
	transition: filter .15s ease;
}
.rmk-content-card .mod-menu > li > a:hover,
.rmk-sidebar-card .mod-menu > li > a:hover { filter: brightness(1.12); color: var(--rmk-control-text); }
.rmk-content-card .mod-menu > li.current > a,
.rmk-content-card .mod-menu > li.active > a,
.rmk-sidebar-card .mod-menu > li.current > a,
.rmk-sidebar-card .mod-menu > li.active > a {
	background: var(--rmk-accent);
	border-color: var(--rmk-accent);
	color: var(--rmk-on-accent);
}

/* Admin-only "edit this module" pencil: must not render as a full
   pill button in the middle of the menu it belongs to. */
.jmodedit {
	display: inline-block;
	background: none;
	border: none;
	padding: 0;
	margin: 0 0 .5rem;
	color: var(--rmk-text-faint);
	font-size: .8rem;
}
.jmodedit:hover { background: none; color: var(--rmk-accent); filter: none; }

/* --- List groups (used by com_users login options). --- */
.rmk-content-card .list-group-item,
.rmk-component-card .list-group-item {
	background: #fff;
	color: var(--rmk-text);
	border-color: var(--rmk-border);
}
.rmk-content-card .list-group-item a,
.rmk-component-card .list-group-item a { color: var(--rmk-primary); text-decoration: none; }
.rmk-content-card .list-group-item a:hover,
.rmk-component-card .list-group-item a:hover { color: var(--rmk-accent); }

/* --- Tables, badges, pagination: common in list views (CRM activities,
       article lists), so they get a brand default up front rather than
       after someone notices they look wrong. --- */
.rmk-content-card .table,
.rmk-component-card .table {
	width: 100%;
	color: var(--rmk-text);
	border-color: var(--rmk-border);
	vertical-align: middle;
}
.rmk-content-card .table > thead th,
.rmk-component-card .table > thead th {
	color: var(--rmk-primary);
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	border-bottom: 2px solid var(--rmk-border);
	background: none;
}
.rmk-content-card .table > tbody tr:hover > *,
.rmk-component-card .table > tbody tr:hover > * {
	background: color-mix(in srgb, var(--rmk-primary) 4%, transparent);
}

.badge {
	border-radius: var(--rmk-radius-pill);
	font-weight: 600;
	padding: .35em .8em;
	background: var(--rmk-primary);
	color: #fff;
}
.badge.bg-success { background: #1f9254 !important; }
.badge.bg-warning { background: var(--rmk-accent) !important; color: var(--rmk-on-accent) !important; }
.badge.bg-danger { background: #c0392b !important; }
.badge.bg-secondary, .badge.bg-info { background: var(--rmk-primary) !important; color: #fff !important; }

.pagination { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.pagination .page-link {
	display: block;
	border: 1px solid var(--rmk-border);
	border-radius: var(--rmk-radius-sm);
	padding: .4rem .75rem;
	color: var(--rmk-primary);
	background: #fff;
	text-decoration: none;
	font-weight: 600;
}
.pagination .page-item.active .page-link { background: var(--rmk-accent); border-color: var(--rmk-accent); color: var(--rmk-on-accent); }
.pagination .page-item.disabled .page-link { opacity: .5; }

/* ---------- "Panel" card variant (login, and any other single-form page) ----------
   Matches home's #contact .panel exactly: translucent glass on the navy
   wallpaper, instead of the plain white content card used for articles. */

.rmk-content-card--panel {
	/* --rmk-glass-bg is only 6% white opacity, relying almost entirely on
	   a 4px blur to obscure whatever's behind it — fine over a mostly-
	   static home page panel, but this card is the ENTIRE staff-area
	   surface (customer detail, activities, etc.) sitting over the
	   animated cube/sprite scene, and that scene's moving shapes/colors
	   were clearly visible bleeding through the text on mobile, flagged
	   live as distracting. A dedicated, more opaque background + heavier
	   blur (own values, not overriding the shared token other glass
	   elements still use) keeps the glass look while actually obscuring
	   the moving background behind readable content. */
	background: rgba(9, 26, 42, .72);
	border: 1px solid var(--rmk-glass-border);
	backdrop-filter: blur(16px);
	color: var(--rmk-glass-text);
}
.rmk-content-card--panel h1,
.rmk-content-card--panel h2,
.rmk-content-card--panel h3 { color: var(--rmk-glass-text); }
/* :not(.btn):not(.rmk-btn) matches the base rule above (line 245) on
   purpose: each :not() adds a full class of specificity, and without
   matching it here the plain-navy base rule (higher specificity than a
   bare ".rmk-content-card--panel a") would keep winning over this
   override — navy text is invisible against this panel's own navy-tinted
   glass background, which is exactly the "blue on blue" bug that showed
   up here once the panel became the default everywhere. */
.rmk-content-card--panel a:not(.btn):not(.rmk-btn) { color: var(--rmk-accent); }
.rmk-content-card--panel a:not(.btn):not(.rmk-btn):hover { color: var(--rmk-accent-hover); }

/* .form-label added on purpose: it's a real Bootstrap class com_crm uses
   (the "Status" filter label has it, "Rep" apparently doesn't) and it
   carries higher specificity in the base rule (.rmk-content-card
   .form-label, two classes) than a bare "label" element does here —
   without mirroring it, .form-label labels silently kept the base
   muted-navy color meant for a white card, while plain labels correctly
   got this panel color, producing two different label colors on the same
   filter row for no visible reason. */
.rmk-content-card--panel label,
.rmk-content-card--panel .form-label,
.rmk-content-card--panel .control-label label {
	font: 400 11.5px 'Instrument Sans', sans-serif;
	color: #fff/* var(--rmk-field-label) */;
	letter-spacing: .03em;
}
.rmk-content-card--panel .control-group { margin-bottom: 11px;}
/* Every <select>'s opened dropdown list, site-wide — not just
   #filter_status (that was a one-off scoped to a single field; every
   select's options should follow the same light/dark branding, and
   follow it when the scheme actually switches). Same control-bg/
   control-text pairing every button/tab already uses: navy bg + orange
   text in dark mode, white bg + navy text in light mode. Browsers don't
   let the OPEN dropdown popup be styled much beyond background/color/
   border on the <option> itself — this is close to the practical limit. */
select option {
	/* Text color here is deliberately NOT --rmk-control-text (that's
	   brand-orange in dark mode, the button/tab color) — flagged live as
	   wrong for an options list: white on the dark-mode navy background,
	   navy on the light-mode white background, matching --rmk-glass-text
	   /--rmk-primary exactly as the Account Owner box's own closed-state
	   text already does below. Background keeps --rmk-control-bg (white
	   in light mode, navy in dark mode) — that half was already right. */
	background: var(--rmk-control-bg);
	color: var(--rmk-glass-text);
}
[data-rmk-scheme="light"] select option {
	color: var(--rmk-primary);
}
/* Native <select> chevron, site-wide. Every select on the site was
   rendering with NO inner arrow at all: Bootstrap's own chevron only
   ever ships on elements carrying its .form-select class (via a
   background-image it sets), and com_crm's plain <select> markup never
   carries that class — so those had nothing to draw an arrow from in
   the first place. Meanwhile the elements that DO have .form-select
   lost Bootstrap's chevron a different way: several rules above use the
   `background:` shorthand (e.g. `background: var(--rmk-field-bg);`),
   which resets background-image to none even when only a color was
   intended. Fixed once, everywhere, with our own drawn arrow instead of
   depending on either source: appearance:none turns off whatever native
   OS arrow might otherwise show (inconsistent across browsers) and this
   SVG chevron replaces it uniformly. Fixed brand-orange (--rmk-accent's
   hex, baked into the SVG — url() data-URIs can't reference a CSS
   custom property) so it reads the same against every field/control
   background in both schemes, same as the border tokens already do. */
select,
.form-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23F58220' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .85rem center;
	background-size: 11px;
	padding-right: 2.3rem !important;
}
/* Account Owner's select: closed-box background was solid --rmk-control-bg
   (a "read as a button/tab" look) — reversed on explicit preference for
   a transparent closed box in BOTH schemes instead, matching the site's
   other glass-style fields more closely. Border stays fixed brand-orange
   (--rmk-control-border) either way. Text is still its own white(dark)/
   navy(light) pair, same tokens the option list above now uses too, so
   the closed box and its open dropdown read consistently. */
.crm-owner-select {
	background-color: transparent !important;
	color: var(--rmk-glass-text) !important;
	border-color: var(--rmk-control-border) !important;
}
[data-rmk-scheme="light"] .crm-owner-select {
	color: var(--rmk-primary) !important;
}

/* ---------- Custom dropdown widget (custom-select.js) ----------
   A native <select>'s OPEN option list is drawn by the browser/OS, not by
   this stylesheet — border-radius (what was actually asked for here),
   custom hover states, anything beyond option background/color is simply
   not reachable with CSS on it in any browser. select.rmk-custom-select
   opts a <select> into being progressively replaced by this fully brand-
   styleable trigger + listbox instead; the real <select> stays in the
   DOM (visually hidden, not display:none) purely to hold the form value,
   so no server-side change was needed to keep submitting it. */
/* Pre-enhancement flicker guard: hides the raw native <select> the instant
   JS is confirmed running (html.has-js, set synchronously in theme.js
   before first paint) until custom-select.js has replaced it with the
   .rmk-select-trigger button and stamped it .rmk-select-native. Without
   this, the native select paints first at its own (Bootstrap) size, then
   gets swapped for the differently-sized pill trigger a moment later —
   the visible "jumping widths on load" reported live. visibility:hidden
   (not display:none) keeps its column occupying the same space the whole
   time, so nothing else on the row reflows either. Scoped to html.has-js
   so a visitor with JS disabled/blocked still gets the plain, usable
   native select instead of a permanently invisible field. */
html.has-js select.rmk-custom-select:not(.rmk-select-native),
html.has-js select.rmk-search-select:not(.rmk-select-native) {
	visibility: hidden;
}
.rmk-select {
	position: relative;
	/* flex, NOT inline-flex: Bootstrap's .form-label (the <label> right
	   before this widget) is display:inline-block, and the native
	   <select> it used to sit above was display:block — a block-level
	   element always starts its own new line regardless of what inline
	   content precedes it, which is what put the label above the select
	   instead of beside it. inline-flex kept this widget inline-level, so
	   it sat on the SAME line as the label instead of dropping below it,
	   and looked narrower purely because it now had to share the row. */
	display: flex;
	/* Fill its container by default, same as the native <select> it
	   replaces (Bootstrap's .form-select is width:100%) — matters for a
	   filter select sitting alone in its own form column (Activities'
	   Status/Rep). Account Owner's select is the one exception: it sits
	   inline next to a Reassign button and should only be as wide as its
	   own content, not stretch to fill that whole flex row — targeted via
	   :has() on the underlying select's own class rather than coupling
	   this to whatever grid/column classes happen to be its parent. */
	width: 100%;
}
.rmk-select-trigger { width: 100%; }
.rmk-select:has(.crm-owner-select) {
	width: max-content;
	/* Also on the WRAP, not just the trigger below — every other select's
	   wrap is width:100% (sized by its column, never by its content), so
	   the has-js pre-hide guard (hides the raw <select> until JS swaps in
	   the real trigger) never causes a visible resize for those. This one
	   wrap is max-content instead, meaning BEFORE JS runs its only content
	   is the hidden native <select> (whatever width that happens to have),
	   and the instant the real trigger mounts with ITS OWN 12rem floor
	   below, the wrap jumps to match — that mismatch was the actual "late
	   load"/resize being asked about here. Floor set here too closes the
	   gap: the wrap is already 12rem wide from first paint, before JS has
	   run at all, so mounting the trigger changes nothing about its size.
	*/
	min-width: 12rem;
}
.rmk-select:has(.crm-owner-select) .rmk-select-trigger {
	width: auto;
	/* This is the one trigger that specifically needs room for "Harley
	   Parkrun"-length names without wrapping, and it sits inline next to
	   a Reassign button rather than alone in a narrow form column, so a
	   fixed floor doesn't risk pushing anything off-screen the way it did
	   for the Activities filters. */
	min-width: 12rem;
	max-width: none;
}
/* Visually hidden, not display:none — some browsers omit display:none
   fields from form submission edge cases, and this keeps the element
   genuinely present/measurable while removing it from view and tab
   order (aria-hidden + tabindex="-1" are set alongside this in JS). */
.rmk-select-native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.rmk-select-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	/* No blanket min-width here any more — a rigid 12rem floor doesn't
	   shrink on a narrow phone no matter how little room its column
	   actually has, which is exactly what was pushing the Activities
	   filter's "Rep" trigger straight off the edge of the screen (body's
	   overflow-x:clip hides page-level horizontal scroll, so it wasn't a
	   scrollbar — the control was just silently cut off past the
	   viewport edge). max-width keeps it from overflowing its container;
	   the Account Owner trigger (needs enough room for "Harley Parkrun"-
	   length names) gets its own min-width below instead, scoped to that
	   specific inline context via :has(). */
	max-width: 100%;
	background: transparent;
	/* --rmk-glass-text (white) is correct ONLY because this trigger is
	   background:transparent, so its text sits on whatever's behind it —
	   and every current usage (com_crm's customer/activity views) renders
	   inside index.php's single global .rmk-content-card--panel wrapper
	   (the dark glass surface --rmk-glass-text is defined for). That's a
	   guarantee from page layout, not from this rule. A select placed
	   outside a --panel context (a plain white/light card) would repeat
	   the exact white-on-white bug fixed below on .rmk-select-option — if
	   that ever happens, give that context its own scoped override (see
	   the .rmk-content-card--panel .form-control pattern lower in this
	   file) rather than changing this base rule. */
	color: var(--rmk-glass-text);
	border: 1px solid var(--rmk-control-border);
	border-radius: var(--rmk-radius-pill);
	padding: .55rem 1rem;
	font: inherit;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	/* Match the shared .btn rule's height for a default-size trigger.
	   The Account Owner trigger actually renders at the SMALLER .rmk-
	   select-sm size below, which is the one that needed to line up with
	   Reassign — matching THIS (base) size to the regular .btn was
	   backwards; .btn-sm is the one that gets pulled down to the sm
	   trigger's height instead, see there. */
	box-sizing: border-box;
	min-height: 2.75rem;
}
.rmk-select-trigger-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Searchable variant (custom-select.js's buildSearchWidget, opted into via
   select.rmk-search-select instead of .rmk-custom-select) — a text input
   standing in for the button trigger, filtering the SAME already-rendered
   .rmk-select-list/.rmk-select-option markup below it client-side as you
   type. Deliberately shares .rmk-select's width:100% (mobile: fills its
   column edge to edge, same as every other filter here — flagged live
   after an earlier version of this control didn't) and the same pill
   look as .rmk-select-trigger so it doesn't read as a different control. */
/* Deliberately NOT restyled here beyond sizing — the input also carries
   class="form-control", so it inherits the exact same brand field look
   (pill radius, translucent bg/border/text/placeholder on a glass panel,
   focus ring) as every other text input on the site, centrally defined
   at .rmk-content-card--panel input[type="text"] etc. A hand-rolled
   color/background/border here duplicated that look instead of reusing
   it and drifted from it, which is what "doesn't match the brand search"
   was flagging. flex: 1 1 auto (not just width: 100%) guarantees it
   fills 100% of its wrap's width even though it's a flex child sitting
   in the same .rmk-select row as the (flow-removed) native <select>. */
.rmk-select-search-input {
	flex: 1 1 auto;
	width: 100%;
	max-width: 100%;
	font: inherit;
	box-sizing: border-box;
	min-height: 2.75rem;
}
[data-rmk-scheme="light"] .rmk-select-trigger { color: var(--rmk-primary); }
/* This, not the base rule above, is what the Account Owner trigger
   (form-select-sm) actually renders at — .btn-sm is pinned to the SAME
   explicit min-height below so Reassign matches this smaller size,
   instead of this trigger being stretched up to a plain .btn's height. */
.rmk-select-sm .rmk-select-trigger { padding: .3rem .75rem; font-size: .85rem; min-width: 10rem; min-height: 2.2rem; }
/* Same drawn chevron as every native select, so the two triggers a page
   might mix (custom + native) still read as one family. Rotates open
   instead of a hover-blink like the password toggle — a static state
   flip communicates "this list is open" more clearly than an animation
   that plays once and stops. */
.rmk-select-trigger::after {
	content: '';
	width: 11px;
	height: 11px;
	flex: 0 0 auto;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23F58220' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 11px;
	transition: transform .15s ease;
}
.rmk-select.is-open .rmk-select-trigger::after { transform: rotate(180deg); }
.rmk-select-list {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	/* width: max-content (not just min-width:100%) so the list sizes to
	   its own longest option label instead of being capped at whatever
	   width the trigger happens to be — that's what was forcing "Harley
	   Parkrun" to wrap inside the popup even after the trigger itself was
	   widened. */
	min-width: 100%;
	width: max-content;
	max-width: 16rem;
	z-index: 60;
	margin: 0;
	padding: 6px;
	list-style: none;
	/* Explicit #ffffff, not var(--rmk-control-bg) — that token flips to
	   navy in dark scheme / white in light scheme, and a token-paired
	   .rmk-select-option text color (below) kept losing the fight to
	   render legibly (reported live as a blank/invisible dropdown list in
	   light mode: white-on-white). Same lesson as the button-standard
	   fix — an explicit, always-correct colour beats chasing a token
	   resolution through the cascade. This popup list is a floating
	   overlay (not inline page content), so it doesn't need to flip with
	   scheme the way inline controls do; a plain white surface with fixed
	   dark text is legible over any page background in both modes. */
	background: #ffffff;
	border: 1px solid var(--rmk-control-border);
	border-radius: var(--rmk-radius);
	/* The actual point of this whole widget: rounded corners on the
	   option list, which a native <select> popup cannot have. overflow
	   hidden clips each option's own square hover-highlight rectangle to
	   the list's rounded shape. */
	overflow: hidden;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
}
.rmk-select-option {
	padding: .5rem .75rem;
	border-radius: var(--rmk-radius-sm);
	/* !important on color only: something else (not yet identified, but
	   confirmed live via a diagnostic) keeps forcing white text on these
	   rows even though nothing in this file's source visibly targets
	   .rmk-select-option's color at equal-or-higher specificity —
	   background-color plain (no !important) already wins fine, so this
	   is scoped to the one property that was actually losing. */
	color: #1a2733 !important;
	background: #ffffff;
	cursor: pointer;
	outline: none;
	white-space: nowrap;
}
.rmk-select-option:hover,
.rmk-select-option:focus,
.rmk-select-option.is-active {
	background: color-mix(in srgb, var(--rmk-accent) 22%, transparent);
}
.rmk-select-option.is-selected {
	font-weight: 700;
	color: var(--rmk-primary);
}
/* Mirrors the base rule's full selector list (line 481 area) on purpose,
   attribute selectors included: input[type="text"] etc. have specificity
   0,2,1, one notch above a plain ".form-control" class at 0,2,0 — without
   matching that here, the base white background/dark text keeps winning
   over this override regardless of source order, while the placeholder
   color below (which has no competing base rule) still applies unopposed
   — a translucent WHITE placeholder on that leftover WHITE background.
   That's the exact bug: an invisible placeholder in the com_crm search
   box once this panel became the site-wide default. */
.rmk-content-card--panel .form-control,
.rmk-content-card--panel .form-select,
.rmk-content-card--panel select,
.rmk-content-card--panel input[type="text"],
.rmk-content-card--panel input[type="email"],
.rmk-content-card--panel input[type="search"],
.rmk-content-card--panel input[type="url"],
.rmk-content-card--panel input[type="tel"],
.rmk-content-card--panel input[type="number"],
.rmk-content-card--panel input[type="date"],
.rmk-content-card--panel input[type="password"] {
	/* background-color, not the shorthand — same chevron-eating bug as
	   .crm-owner-select above; this rule comes after the chevron rule in
	   the file and matches .form-select/select at equal-or-higher
	   specificity, so a `background:` shorthand here would silently
	   re-blank any select's arrow inside this panel. */
	background-color: var(--rmk-field-bg);
	border: 1px solid var(--rmk-field-border);
	border-radius: var(--rmk-radius-pill);
	color: var(--rmk-field-text);
}
/* Textarea is the one exception to the pill standard — a pill radius
   only reads correctly against a short, single-line control.
   textarea.form-control, not bare textarea: same specificity bug as the
   base (non-panel) rule above — a <textarea class="form-control"> (e.g.
   com_crm's Activity Notes field) also matches the 2-class .form-control
   pill rule two lines up, which always wins over a 1-class+1-type bare
   "textarea" selector regardless of source order. This is what was
   actually rendering the Notes textarea as a pill/circle live. */
.rmk-content-card--panel textarea.form-control,
.rmk-content-card--panel textarea {
	background: var(--rmk-field-bg);
	border: 1px solid var(--rmk-field-border);
	border-radius: var(--rmk-radius);
	color: var(--rmk-field-text);
}
.rmk-content-card--panel .form-control::placeholder { color: var(--rmk-field-placeholder); }
.rmk-content-card--panel .form-control:focus,
.rmk-content-card--panel .form-select:focus {
	border-color: var(--rmk-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rmk-accent) 25%, transparent);
}
.rmk-content-card--panel .input-password-toggle {
	background: transparent;
	border: 1px solid var(--rmk-field-border);
	border-left: none;
	color: var(--rmk-glass-text-soft);
	/* Overrides the shared .btn rule's text-button padding (.7rem 1.6rem)
	   — sized for a label like "Filter", way too wide for an icon-only
	   toggle glued to the side of a password field. Just enough room for
	   the 20px eye icon plus a little breathing room. */
	padding: .55rem .75rem;
}
/* Joomla's own password-toggle button relies on an icon font
   (icon-eye / icon-eye-slash, from an icomoon-style font this template
   never loads) — the button rendered with no visible glyph at all, just
   invisible text. Drawn in pure CSS instead (no font/asset dependency):
   an almond-shaped eye outline + pupil dot, flattened to a line for the
   "hidden" state. currentColor picks up the button's own color above,
   so it stays legible against both this panel and any future context. */
.input-password-toggle .icon-fw {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 14px;
}
.input-password-toggle .icon-fw::before {
	content: "";
	width: 18px;
	height: 12px;
	border: 2px solid currentColor;
	border-radius: 50%;
	box-sizing: border-box;
	transition: transform .2s ease;
}
.input-password-toggle .icon-fw::after {
	content: "";
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	transition: opacity .2s ease;
}
/* Password currently hidden (Joomla's icon-eye-slash class, "click to
   show") — flatten the almond to a closed-lid line and hide the pupil. */
.input-password-toggle .icon-eye-slash::before { transform: scaleY(.15); }
.input-password-toggle .icon-eye-slash::after { opacity: 0; }
/* Hover: a short blink loop (closed-open-closed-open) as an interactive
   hint, regardless of which state is currently showing — the animation
   drives the same transform/opacity the two states set statically above,
   so it overrides either starting point cleanly. */
.input-password-toggle:hover .icon-fw::before { animation: rmk-eye-blink 1.1s ease-in-out infinite; }
.input-password-toggle:hover .icon-fw::after { animation: rmk-eye-blink-pupil 1.1s ease-in-out infinite; }
@keyframes rmk-eye-blink {
	0%, 100% { transform: scaleY(1); }
	50% { transform: scaleY(.15); }
}
@keyframes rmk-eye-blink-pupil {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}
/* No separate prefers-reduced-motion override needed — the global rule
   at the top of this file already forces every animation-duration to
   ~0 under that setting. */
.rmk-content-card--panel .form-check-label { color: var(--rmk-glass-text-soft); }

/* Scoped to the login submit button's actual wrapper, `.controls`
   (confirmed from the real rendered markup: `<div class="controls"><button
   class="btn btn-primary">Log in</button></div>`) — a previous guess at
   Joomla core's login markup used `#login-form`, which this Joomla 6
   layout doesn't actually have, so the full-width rule never matched at
   all and the button silently reverted to a normal-width pill. Scoped at
   all (not a bare `.rmk-content-card--panel .btn-primary`) because that
   broader selector matches EVERY .btn-primary living inside the panel
   wrapper (every inner page uses it, not just login) — it was silently
   forcing "Log Activity" (customer detail) and "Add Customer" (customers
   list), both plain .btn-primary too, into this same block/full-width/
   differently-padded shape, which is also what made Log Activity render
   at a different height than Delete right next to it. */
.rmk-content-card--panel .controls .btn-primary {
	display: block;
	width: 100%;
	background: var(--rmk-control-bg);
	border: 1px solid var(--rmk-control-border);
	color: var(--rmk-control-text);
	border-radius: var(--rmk-radius-pill);
	padding: .85rem;
	font-weight: 600;
}
.rmk-content-card--panel .controls .btn-primary:hover,
.rmk-content-card--panel .controls .btn-primary:focus {
	filter: brightness(1.1);
	color: var(--rmk-control-text);
}

.rmk-content-card--panel .list-group {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/* Both halved from 10px/22px per explicit live feedback — too much
	   air between Log in and these three secondary links. */
	gap: 10px;
	/* margin-top: 22px; */
	border-top: none;
}
.rmk-content-card--panel .list-group-item {
	display: block;
	flex: 1 1 0;
	min-width: 160px;
	background: var(--rmk-control-bg);
	border: 1px solid var(--rmk-control-border);
	border-radius: var(--rmk-radius-pill);
	padding: .85rem;
	text-align: center;
	font: 600 13px 'Instrument Sans', sans-serif;
	color: var(--rmk-control-text);
	text-decoration: none;
	transition: filter .15s ease;
}
.rmk-content-card--panel .list-group-item:hover {
	filter: brightness(1.1);
	color: var(--rmk-control-text);
}
.rmk-content-card--panel .list-group-item a { color: inherit; text-decoration: none; }

@media (max-width: 640px) {
	.rmk-content-card--panel .list-group { flex-direction: column; }
	.rmk-content-card--panel .list-group-item { min-width: 0; }
}

/* Now that every inner page uses the glass panel (not just login), the
   rest of the Joomla/Bootstrap component layer above — written assuming
   a white card background — needs its own glass-aware pass so table
   text, alerts, pagination and the edit-pencil don't stay dark-on-dark. */
.rmk-content-card--panel p,
.rmk-content-card--panel td,
.rmk-content-card--panel th,
.rmk-content-card--panel li,
.rmk-content-card--panel dd { color: inherit; }
/* Bootstrap's <dt>/<dd> info grid (customer detail's Phone/Website/
   Account Owner rows) — confirmed live rendering as a plain WHITE
   Bootstrap .card sitting inside the dark glass panel, the single most
   glaring branding mismatch on that page. dt gets the same muted-label
   treatment as a form label; the card itself joins the rest of the
   glass-item family (list-group-item, table, alert) below. */
.rmk-content-card--panel dt {
	color: var(--rmk-glass-text-soft);
	font-weight: 600;
}
/* Bootstrap's .text-muted (the company-name subtitle under the customer
   name, activity timestamps, etc.) is a fixed grey via --bs-secondary-
   color — unrelated to this site's own light/dark tokens, so it doesn't
   move with the rest of the panel's text. */
.rmk-content-card--panel .text-muted { color: var(--rmk-glass-text-soft) !important; }
.rmk-content-card--panel .card {
	background: var(--rmk-glass-item-bg);
	border: 1px solid var(--rmk-glass-item-border);
	color: var(--rmk-glass-text);
}
.rmk-content-card--panel .card-body { color: inherit; }
.rmk-content-card--panel .card-header,
.rmk-content-card--panel .card-footer {
	background: transparent;
	border-color: var(--rmk-glass-item-border);
}
.rmk-content-card--panel .card-title { color: var(--rmk-accent); }
/* Account Owner row: Bootstrap's .form-select defaults to width:100%,
   which eats the entire (already narrow, col-md-4) dd column on its
   own, leaving no room for the Reassign button beside it — confirmed
   live wrapping onto its own separate line below the select instead of
   sitting next to it as the flex row markup intends. Capped, not full
   width, so both fit on one line. */
.crm-owner-select {
	width: auto;
	flex: 0 1 auto;
	min-width: 0;
}

.rmk-content-card--panel .table {
	color: var(--rmk-glass-text);
	border-color: var(--rmk-glass-border);
}
.rmk-content-card--panel .table > thead th {
	color: var(--rmk-accent);
	border-bottom-color: var(--rmk-glass-border);
}
.rmk-content-card--panel .table > tbody tr:hover > * {
	background: var(--rmk-glass-item-bg);
}

.rmk-content-card--panel .alert {
	background: var(--rmk-glass-item-bg);
	border-color: var(--rmk-glass-item-border);
	color: var(--rmk-glass-text);
}
.rmk-content-card--panel .alert a { color: var(--rmk-accent); }
.rmk-content-card--panel .alert-success { border-left-color: #3ddb8a; }
.rmk-content-card--panel .alert-warning { border-left-color: var(--rmk-accent); }
.rmk-content-card--panel .alert-danger,
.rmk-content-card--panel .alert-error { border-left-color: #ff8a7a; }
.rmk-content-card--panel .alert-heading { color: var(--rmk-glass-text); }

.rmk-content-card--panel .pagination .page-link {
	background: var(--rmk-glass-item-bg);
	border-color: var(--rmk-glass-item-border);
	color: var(--rmk-glass-text);
}

.rmk-content-card--panel .jmodedit { color: var(--rmk-chrome-text-faint); }
.rmk-content-card--panel .jmodedit:hover { color: var(--rmk-accent); }

/* ---------- Closing CTA band (e.g. error pages) ---------- */

.rmk-cta-band {
	background: var(--rmk-glass-bg);
	border: 1px solid var(--rmk-glass-border);
	border-radius: var(--rmk-radius);
	backdrop-filter: blur(4px);
	text-align: center;
	padding: 3rem 2rem;
	color: var(--rmk-glass-text);
}
.rmk-cta-band h2 { color: var(--rmk-glass-text); margin-bottom: 1rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(28px, 3.6vw, 40px); }
.rmk-cta-band p { color: var(--rmk-glass-text-soft); }

/* Customer detail info grid: "Account Owner" was the only label that
   wrapped to two lines (its value cell also holds a select + Reassign
   button, so the row is taller/narrower than the others) — flagged live
   as breaking the otherwise-consistent single-line label rhythm. */
.crm-customer-detail dl.row dt { white-space: nowrap; }
/* On a real phone (col-4 = ~33% of a ~360-400px screen, ~120px) a nowrap
   label like "Captured By" is simply wider than its own column — it
   doesn't wrap, so it overflows straight into the dd column next to it.
   Confirmed live: "Captured By" visibly overlapping "Administrator",
   "Instagram"/"Facebook" crammed flush against their em-dash values.
   Stack label above value instead of forcing them to share one cramped
   row below this width — each gets the full card width to itself. */
@media (max-width: 480px) {
	.crm-customer-detail dl.row dt,
	.crm-customer-detail dl.row dd {
		/* width, not just flex-basis: Bootstrap's .col-4/.col-8 set
		   `flex: 0 0 auto` PLUS an explicit `width: 33.33%`/`66.67%` as a
		   separate property (flex-basis:auto falls back to reading the
		   width property for its sizing) — belt-and-braces override both
		   explicitly rather than rely on flex-basis alone taking
		   priority. */
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}
	.crm-customer-detail dl.row dt {
		white-space: normal;
	}
}
/* Bootstrap's .row is a flex container that wraps every dt/dd pair onto
   its own line (4+8 columns = 12, a full row each time) — but with no
   row-gap and no cross-axis alignment, consecutive label/value pairs sat
   at inconsistent vertical spacing from each other, and a taller value
   (a btn-sm link button vs. plain text) top-aligned against its label
   instead of centering against it — flagged live as "not spaced
   correctly" and not forming a neat left-to-right line. row-gap gives
   every pair the same breathing room; align-items:center re-centers
   each dt against its own dd within that wrapped line (flex align-items
   applies per flex LINE when wrapping, which is exactly one label/value
   pair here). */
.crm-customer-detail dl.row {
	row-gap: 14px;
	align-items: center;
}
.crm-customer-detail dl.row dt,
.crm-customer-detail dl.row dd {
	display: flex;
	align-items: center;
	margin-bottom: 0;
}

/* ---------- CRM customers toolbar: Add Customer + Search ----------
   Real siblings in one flex row (see the customers/default.php template
   override). The in-card <h1> this was originally built around is gone
   — it duplicated index.php's own page-hero title for this route — so
   Add Customer + Search are now the toolbar's only content, sharing one
   row and only wrapping to their own lines if the viewport is too
   narrow for both. */
.crm-customers-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.crm-customers-toolbar .btn-primary {
	flex: 0 0 auto;
	white-space: nowrap;
}
.crm-customers-search {
	flex: 1 1 240px;
	min-width: 200px;
	margin: 0;
}
.crm-customers-search .input-group { width: 100%; }
/* Below the same 900px breakpoint the card grid itself switches to a
   single column at (card-grid-standard.md) — Add Customer wraps onto its
   own line here already (not enough room beside Search), but stayed
   sized to its own text instead of filling that line, next to Search
   which already fills its own full-width line — flagged live as an
   inconsistent, half-width-looking button beside a full-width field. */
@media (max-width: 900px) {
	.crm-customers-toolbar .btn-primary {
		flex: 1 1 100%;
		text-align: center;
	}
}

/* ---------- CRM customer list: table -> card grid ----------
   com_crm renders customers as a plain <table>; the template override
   (customers/default.php) can't change what com_crm itself queries, so
   this still reshapes a <table> into a grid via CSS display overrides —
   thead hidden, each <tr> becomes a card, tbody becomes the grid.
   Per-cell labels ("Company: ...") and tel: links are set server-side
   in that override now, not copied at runtime by crm-search.js. */
.crm-customers .table-responsive { overflow: visible; }
.crm-customers table.table {
	display: block;
	border: none;
}
.crm-customers table.table thead { display: none; }
.crm-customers table.table tbody {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.crm-customers table.table tbody tr {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--rmk-glass-item-bg);
	border: 1px solid var(--rmk-control-border);
	border-radius: var(--rmk-radius);
	padding: 16px;
	transition: background .15s ease;
	/* The whole card is now one click target via the name's
	   .stretched-link (see customers/default.php) — Bootstrap's
	   .stretched-link::after is position:absolute + inset:0, which needs
	   the nearest positioned ancestor to be THIS card, not the page. */
	position: relative;
}
/* Bootstrap's .table-hover row highlight assumed a full-width row, not a
   card — this replaces it with a card-appropriate tint instead of
   disabling hover feedback outright. Was reusing --rmk-glass-item-BORDER
   (rgba(255,255,255,.22), a border-opacity token) as a fill — a much
   stronger/whiter tint than the card's own --rmk-glass-item-BG
   (rgba(255,255,255,.08)) it's supposedly just "hovering" on top of, so
   the card visibly jumped to a different, unrelated shade on hover
   instead of a subtle brighten of its own background. A modest step up
   from the same base tint instead. */
.crm-customers table.table tbody tr:hover { background: rgba(255, 255, 255, .14); }
/* The actual mechanism behind "cells are a shade off from each other and
   from the row itself": Bootstrap 5.3's table striping/hover/active tint
   is NOT painted via background-color — it's `box-shadow: inset 0 0 0
   9999px var(--bs-table-accent-bg)` on every cell (`.table > :not(caption)
   > * > *`), with .table-striped/.table-hover only setting the
   --bs-table-accent-bg variable that shadow reads. A background-color
   override alone never stops it — the inset shadow paints on top of it
   regardless. Kill both: neutralize the variables AND force the shadow
   off, so every cell shows exactly the row's own solid background with
   nothing layered over it. */
.crm-customers table.table {
	--bs-table-bg: transparent;
	--bs-table-accent-bg: transparent;
	--bs-table-striped-bg: transparent;
	--bs-table-hover-bg: transparent;
	--bs-table-active-bg: transparent;
}
/* Bootstrap's actual striping rule (`.table-striped > tbody > tr:nth-of-
   type(odd) > *`) sets --bs-table-accent-bg DIRECTLY on each td, not on
   the <table> — a custom property assigned directly on an element always
   wins over one merely inherited down from an ancestor, regardless of
   which rule has higher specificity, so neutralizing it only at the
   <table> above was not enough to stop odd-numbered cards from getting a
   striped tint their neighbors didn't. Re-neutralize at the td itself. */
.crm-customers table.table tbody td {
	--bs-table-accent-bg: transparent;
}
.crm-customers table.table tbody tr > * {
	box-shadow: none !important;
}
.crm-customers table.table tbody td {
	/* !important matches Bootstrap's own .d-none/.d-md-table-cell utility
	   classes, which are !important themselves — without matching it,
	   those classes would keep hiding company/phone/etc. on narrow
	   screens, leaving a "card" with only a name in it. Every field
	   belongs in a customer card regardless of viewport. */
	display: block !important;
	/* The card's own border lives on the <tr> above — a per-cell border
	   here read as an orange line under every single field (including
	   the last one before the next card), which is visual noise, not a
	   deliberate divider. !important because Bootstrap's own .table
	   cell border-bottom otherwise wins regardless of source order. */
	border: none !important;
	padding: 0;
	color: var(--rmk-glass-text);
	font-size: .9rem;
	/* !important: crm.css (the component's own stylesheet, not ours — see
	   html/com_crm override comments) ships its own responsive card
	   fallback for this exact table and we don't control its source or
	   specificity, so a plain background here can lose to whatever it
	   declares. This is what was producing a separate, slightly
	   different-shaded rectangle behind EVERY field line instead of one
	   uniform card background. */
	background: transparent !important;
}
.crm-customers table.table tbody td:first-child {
	font: 700 17px 'Barlow Condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin-bottom: 4px;
}
.crm-customers table.table tbody td[data-label]::before {
	content: attr(data-label) ": ";
	font-weight: 600;
	color: var(--rmk-glass-text-soft);
}
.crm-customers table.table tbody tr.rmk-no-match {
	grid-column: 1 / -1;
	background: transparent;
	border-style: dashed;
}

/* "Assign to Me" (Unassigned tab only) — pinned to the card's own
   bottom-right corner rather than sitting inline as just another field
   row, so it reads as an action on the card, not another piece of data.
   z-index above the name's .stretched-link overlay (Bootstrap sets that
   to 1) — without it the whole-card link would swallow every click
   before it ever reached this button. Reserve real space for it at the
   bottom of any card that has one (:has(), already used elsewhere in
   this codebase) rather than letting it float over/under whatever field
   happens to be last. */
.crm-customers table.table tbody tr:has(.crm-assign-cell),
.crm-customers table.table tbody tr:has(.crm-found-where-icon) {
	padding-bottom: 52px;
}
.crm-customers table.table tbody td.crm-assign-cell {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
}
/* "Found Where" — the card's bottom-LEFT corner, mirroring "Take"'s
   bottom-right placement. No z-index needed (unlike .crm-assign-cell):
   this is informational only, a <span>-equivalent <td> with no link or
   button inside it, so there's nothing for the stretched-link overlay
   to swallow a click FROM. A small translucent circular backdrop keeps
   a light favicon legible against the card's own dark background. */
.crm-customers table.table tbody td.crm-found-where-icon {
	position: absolute;
	left: 16px;
	bottom: 16px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: var(--rmk-glass-text-soft);
	font-size: 15px;
	line-height: 1;
}
.crm-customers table.table tbody td.crm-found-where-icon img {
	border-radius: 3px;
}

@media (max-width: 900px) {
	.crm-customers table.table tbody { grid-template-columns: 1fr; }
}

/* ---------- Customer detail: Activity Timeline card grid ----------
   Was <ul class="list-group"><li class="list-group-item"> — matched
   .rmk-content-card--panel .list-group-item (written for the login
   page's solid pill-shaped auth-method buttons, see that rule's own
   comment), so every activity rendered as a squashed pill instead of a
   readable entry. Restyled as its own card grid instead, matching the
   Customers list's card design and spacing exactly: same background/
   border/radius/padding tokens, same 3-per-row desktop / 1-per-row
   mobile layout at the same 900px breakpoint. */
.crm-timeline {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (max-width: 900px) {
	.crm-timeline { grid-template-columns: 1fr; }
}
.crm-timeline-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--rmk-glass-item-bg);
	border: 1px solid var(--rmk-control-border);
	border-radius: var(--rmk-radius);
	padding: 16px;
	color: var(--rmk-glass-text);
	/* Needed for .stretched-link (Bootstrap utility) to size itself
	   against THIS card rather than the nearest other positioned
	   ancestor — same mechanism as the Customers list cards. */
	position: relative;
	transition: background .15s ease;
}
.crm-timeline-item:has(.stretched-link):hover {
	background: rgba(255, 255, 255, .14);
}
.crm-timeline-item .crm-timeline-title {
	font: 700 17px 'Barlow Condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--rmk-accent);
}
.crm-timeline-item .text-muted { color: var(--rmk-glass-text-soft) !important; }
.crm-timeline-item .fw-semibold { color: var(--rmk-glass-text); }
.crm-timeline-item p { margin: 0; color: var(--rmk-glass-text); }
.crm-timeline-item .small { font-size: .8rem; }

/* ---------- Full-width, equal-share button rows ----------
   Two or three actions (Filter/Clear; Log Activity/Edit/Delete) sitting
   in their own row/column but sized to their own text, leaving the rest
   of that row/column empty — flagged live as wanting them to fill it,
   like a segmented control, no leftover space. Every direct child
   stretches equally: a <button>, an <a class="btn">, or a <form> wrapping
   one (Delete) all count as "one action" here. The <form> case needs its
   own child button pulled to width:100% too, since flex:1 only sizes the
   form itself — the button inside would otherwise still size to its own
   text within that now-wider form. */
.crm-btn-row {
	/* Establishes its own flex context rather than relying on a `d-flex`
	   utility class already being present on the same element — the
	   Filter/Clear column (Activities) doesn't have one (Bootstrap
	   columns aren't flex containers on their own), while the customer
	   detail action row already does; this way the class works stand-
	   alone in either markup without depending on which. */
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: stretch;
}
/* This is the piece that was actually missing on the customer detail
   page: the row's own CHILDREN were told to share space equally
   (flex:1 below), but .crm-btn-row ITSELF was never told to grow within
   ITS OWN parent — a `justify-content-between` row with an often-empty
   sibling div (the company-subtitle slot). justify-content only
   POSITIONS flex items, it doesn't size them, so with no flex-grow of
   its own .crm-btn-row just sat at its natural content width (exactly as
   wide as Log Activity+Edit+Delete already were) and had no extra space
   to actually hand its children. Nothing downstream was broken; there
   was simply nothing to distribute. Scoped to this page specifically —
   applying it to EVERY .crm-btn-row would also let the Activities
   filter's Filter/Clear column expand into that row's own leftover grid
   space, a layout change nobody asked for there. */
.crm-customer-detail .crm-btn-row {
	flex: 1 1 auto;
}
.crm-btn-row > .btn,
.crm-btn-row > form {
	flex: 1 1 0;
}
.crm-btn-row > form {
	display: flex;
}
.crm-btn-row > form > .btn {
	flex: 1 1 0;
	width: 100%;
}
/* Filter/Clear specifically must never stack vertically, at any width —
   flagged live as wrong when the shared .crm-btn-row's flex-wrap let
   them wrap onto two lines at a narrow column width. The customer
   detail row (Log Activity/Edit/Delete) still needs to keep wrapping on
   a narrow phone (that's the earlier overflow fix — three buttons
   genuinely don't fit on one line there), so this is scoped to the
   Activities filter specifically rather than removing flex-wrap from
   .crm-btn-row generally. flex-shrink (already on by flex:1 1 0 above)
   lets the two buttons compress instead of wrapping when the column
   gets tight. */
.crm-activities .crm-btn-row {
	flex-wrap: nowrap;
	/* Status + Rep only claim 3+3 of the row's 12 grid columns at md+
	   (col-md-3 each), leaving this one's col-md-3 (25%) with another
	   25% of the row sitting empty to its right — flagged live as not
	   filling the space. Bootstrap's .col-md-3 sets `flex: 0 0 auto`
	   (don't grow); overriding flex-grow here lets this column alone
	   absorb that leftover space instead of leaving it empty (Status/Rep
	   keep their own flex:0 0 auto, so they don't grow too). */
	flex: 1 1 auto;
}

/* ---------- Contacted toggle (customer detail card corner) ----------
   A simple, glanceable red/green dot pinned to the customer detail
   card's own top-right corner — red = Awaiting Contact, green =
   Contacted, tap to flip (see html/com_crm/customer/default.php). Not
   built from .btn: the site button standard (button-standard.md) forces
   every .btn into the same solid pill shape/min-height, which would
   fight a small round tap-dot outright rather than just needing an
   override. .crm-contact-card only sets position:relative as a safety
   net — Bootstrap's own .card already sets it, but that's an
   implementation detail of a component this template doesn't own, not
   a contract to rely on going forward. */
.crm-contact-card { position: relative; }
.crm-contact-toggle-form {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
}
.crm-contact-toggle {
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .55);
	padding: 0;
	cursor: pointer;
	transition: filter .15s ease, transform .1s ease;
}
button.crm-contact-toggle:hover { filter: brightness(1.12); }
button.crm-contact-toggle:active { transform: scale(.92); }
span.crm-contact-toggle { cursor: default; }
/* Fixed semantic red/green — deliberately NOT the theme-flipping
   --rmk-control-* tokens: this status needs to read the same regardless
   of light/dark mode, the same way a traffic light doesn't change
   meaning with the light level. */
.crm-contact-toggle.is-awaiting { background: #dc3545; }
.crm-contact-toggle.is-contacted { background: #1e9e5a; }

/* "Take" — bottom-right corner of the same card, mirroring the
   Contacted toggle's top-right placement. A real .btn here (unlike the
   toggle above) is fine: this needs to read as a normal clickable
   button with a label, not a glanceable status dot, so it should look
   like every other button on the site. */
.crm-take-form {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 2;
}

/* Customer detail prev/next chevrons — icon-only buttons (no "Previous"/
   "Next" text). The site button standard's padding (.7rem 1.6rem, sized
   for a text label) would leave a lone arrow glyph swimming in a wide
   pill; this tightens it to a small square-ish pill instead, still
   inheriting the standard's colors/border/radius. */
.crm-nav-chevron {
	padding: .55rem .9rem;
	font-size: 1.1rem;
	line-height: 1;
}

/* ---------- Fixed footer (every page) ---------- */

.site-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; background: var(--rmk-bar-bg); backdrop-filter: blur(12px); border-top: 1px solid var(--rmk-border-chrome); }
.footer-row { max-width: 1180px; margin: 0 auto; min-height: 52px; padding: 10px 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 20px; row-gap: 6px; overflow: visible; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 6px; font: 400 12.5px 'Instrument Sans', sans-serif; color: var(--rmk-chrome-text-soft); }
.footer-links a { color: var(--rmk-chrome-text-soft); white-space: nowrap; }
.footer-links a:hover { color: var(--rmk-chrome-text); }
.footer-copy { font: 400 12px 'Instrument Sans', sans-serif; color: var(--rmk-chrome-text-faint); white-space: nowrap; }

/* Bottom padding so the fixed footer never covers the end of inner-page
   content. Header clearance is handled by .page-hero's own top padding. */
body.rmk-inner { padding-bottom: 62px; }

/* ---------- Component-only pages (raw/print views, no chrome) ---------- */

.rmk-component-card {
	position: relative;
	z-index: 1;
	background: var(--rmk-surface);
	color: var(--rmk-text);
	border-radius: var(--rmk-radius);
	box-shadow: var(--rmk-shadow-lifted);
	padding: 2rem;
	max-width: 1180px;
	margin: 40px auto;
}

/* Old rule that used to center .header-row on very small phones was
   removed here — it fought the explicit left-align + top-right logout
   rules in the nav breakpoint above (max-width: 1199.98px), which now
   own header-row layout on every mobile width, not just <=576px. */