/*!
 * Green Road Map — Design System
 * ============================================================================
 * This file is loaded sitewide by plugins/system/grmdesign on every frontend
 * page (under both shaper_helixultimate and ultimate-rch templates) so the
 * redesign applies uniformly without having to edit each template's
 * custom.css. The plugin lives outside the template directory, so template
 * updates can't break it.
 *
 * Edit this file once — both templates pick up the change.
 *
 * The Inter web font is loaded by the plugin separately (Google Fonts link)
 * so there's no @import here.
 *
 * Originally extracted from templates/shaper_helixultimate/css/custom.css.
 * ============================================================================
 */

/* ============================================================================
   ============================================================================
   MEMBER MAP REDESIGN — green/glass direction — added 2026-05-08
   Pilot view: grrfrontendmembermapview
   References: docs/gamma-redesign-examples/{example-1.html,design-system.html}

   This block REPLACES the earlier "NEW MINIMAL STYLE" black/white experiment.
   Most rules below are scoped to body.view-grrfrontendmembermapview so they
   cannot affect any other page on the site. EXCEPTION: the HEADER block
   (look for "HEADER — GLOBAL") was promoted to sitewide because the same
   nav look is now the canonical look for every page. Inter is loaded via
   @import at the top of this file — it ships sitewide for now; can be
   moved to per-view PHP later if perf becomes a concern.
   ============================================================================
   ============================================================================ */


/* ----------------------------------------------------------------------------
   DESIGN TOKENS — local to the member-map view
   Defined on :root (sitewide) so they're available to ANY view that opts
   into the design system. Component rules below stay scoped per-view; only
   the tokens themselves are global. Tokens are namespaced `--gr-*` so they
   can't collide with framework variables.
   ---------------------------------------------------------------------------- */
:root {
  /* Brand greens */
  --gr-green:        #22c55e;
  --gr-green-light:  #86efac;
  --gr-green-dark:   #166534;
  --gr-green-soft:   rgba(34, 197, 94, 0.10);
  --gr-green-soft-2: rgba(34, 197, 94, 0.20);

  /* Slate neutrals */
  --gr-slate-50:  #f8fafc;
  --gr-slate-100: #f1f5f9;
  --gr-slate-200: #e2e8f0;
  --gr-slate-300: #cbd5e1;
  --gr-slate-400: #94a3b8;
  --gr-slate-500: #64748b;
  --gr-slate-600: #475569;
  --gr-slate-700: #334155;
  --gr-slate-800: #1e293b;
  --gr-slate-900: #0f172a;

  /* Glass surfaces */
  --gr-surface-100: rgba(255, 255, 255, 0.90);
  --gr-surface-200: rgba(255, 255, 255, 0.70);
  --gr-surface-300: rgba(255, 255, 255, 0.40);

  /* Shadows */
  --gr-shadow-glass:       0 8px 32px 0 rgba(31, 38, 135, 0.07);
  --gr-shadow-glass-hover: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  --gr-shadow-sm:          0 1px 2px 0 rgba(0, 0, 0, 0.05);

  /* Radii */
  --gr-radius-sm:   0.5rem;   /* 8px  */
  --gr-radius-md:   0.75rem;  /* 12px — Tailwind rounded-xl  */
  --gr-radius-lg:   1rem;     /* 16px — Tailwind rounded-2xl */
  --gr-radius-full: 9999px;

  /* Typography
     - sans  → body (paragraphs, form fields, tables, buttons)
     - display → headings (h1–h6 and the per-card title classes). Arvo
       is the slab-serif baked into the GREENROADMAP logo wordmark, so
       echoing it in headings ties the page chrome back to the brand
       mark while keeping body text clean and readable. */
  --gr-font-sans:    'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                     'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --gr-font-display: 'Arvo', Georgia, 'Times New Roman', serif;
}


/* ----------------------------------------------------------------------------
   DISPLAY-FONT (ARVO) OVERRIDES — applied to headings + heading-style
   class hooks across the design system. The body / form / table /
   button rules below leave font-family alone for everything else, so
   those keep using --gr-font-sans (Inter) by inheritance.
   Source order: this block sits at the top so the per-page heading
   rules later in the file inherit the Arvo family (they only override
   size / weight / colour, not font-family).
   ---------------------------------------------------------------------------- */
:where(h1, h2, h3, h4, h5, h6,
       .gr-list-card__title,
       .gr-grmuid,
       .gr-stat__value,
       .page-header h1,
       .com-users-login .page-header h1,
       .com-users-profile__edit .page-header h1) {
  font-family: var(--gr-font-display);
  letter-spacing: 0;        /* the Inter-tuned -0.01/-0.02 tight tracking */
                            /* reads odd in a slab serif; reset here so   */
                            /* per-rule letter-spacing settings can       */
                            /* override if they want.                     */
}
/* Heading-style classes that are SMALL UPPERCASE LABELS — keep Inter:
   .gr-totals__heading ("TOTALS" / "RESTRICTION TOTALS"), form field
   labels (.control-label label, .gr-filter label, .gr-stat__label,
   etc.). Arvo at small caps with tracking reads dated; Inter stays. */



/* ----------------------------------------------------------------------------
   TYPOGRAPHY RESET
   Defeats the inline <style> blocks that helix-ultimate emits in <head>:
     body { font-family: 'Roboto'; font-size: 14px; }
     h1..h5 { font-family: 'Arvo'; font-weight: 600; }
   These inline rules sit AFTER every CSS file in source order, so we win the
   cascade by adding extra specificity (the body class).
   ---------------------------------------------------------------------------- */
/* Body font (Inter) — applied to the page baseline + form controls.
   h1–h6 intentionally excluded; they inherit Arvo from the
   DISPLAY-FONT OVERRIDES block at the top of this file. */
body.view-grrfrontendmembermapview,
body.view-grrfrontendmembermapview button,
body.view-grrfrontendmembermapview input,
body.view-grrfrontendmembermapview select,
body.view-grrfrontendmembermapview textarea {
  font-family: var(--gr-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.view-grrfrontendmembermapview {
  font-size: 14px;
  color: var(--gr-slate-800);
  background-color: var(--gr-slate-50);
}

body.view-grrfrontendmembermapview h1 {
  font-size: 1.875rem;        /* 30px — Tailwind text-3xl */
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gr-slate-900);
}
body.view-grrfrontendmembermapview h2 {
  font-size: 1.25rem;         /* 20px — Tailwind text-xl */
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--gr-slate-800);
}
body.view-grrfrontendmembermapview h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gr-slate-800);
}


/* ----------------------------------------------------------------------------
   FOOTER + BOTTOM REGIONS — hidden on this view
   ---------------------------------------------------------------------------- */
body.view-grrfrontendmembermapview #sp-footer,
body.view-grrfrontendmembermapview #sp-bottom,
body.view-grrfrontendmembermapview #sp-section-1,
body.view-grrfrontendmembermapview #sp-hero {
  display: none !important;
}


/* ----------------------------------------------------------------------------
   HEADER — GLOBAL (applies to every frontend page, not just the member map).
   White / glass surface, sticky, compact, brand-green active nav.

   Note: this block sits inside the MEMBER MAP REDESIGN section purely for
   historical reasons — that's where the look was first developed. It was
   later promoted to a sitewide block (selectors no longer prefixed with
   body.view-grrfrontendmembermapview) because the user wants the same nav
   look on every page. The MAIN BODY rules below remain view-scoped because
   they're specifically about letting the map fill the viewport.
   ---------------------------------------------------------------------------- */
#sp-header {
  background-color: var(--gr-surface-100);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gr-slate-100);
  box-shadow: var(--gr-shadow-sm);
  position: sticky;
  top: 0;
  z-index: 50;
  height: 56px;
  min-height: 56px;
  padding: 0;
}

#sp-header .container,
#sp-header .container-inner {
  height: 100%;
}
#sp-header .container-inner > .row {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
  flex-wrap: nowrap;
}
#sp-header .sp-column {
  display: flex;
  align-items: center;
  height: 100%;
}

/* Primary logo — smaller, vertically centred */
#sp-logo .logo {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
}
.logo-image,
.logo-image-phone {
  height: 28px !important;
  width: auto;
  max-width: 100%;
}

/* Secondary "powered by TRF" logo — also smaller, right-aligned */
#sp-logo2 .sp-column {
  justify-content: flex-end;
}
#sp-logo2 img {
  max-height: 24px;
  width: auto;
  opacity: 0.75;
}

/* Megamenu — Inter, slate, brand-green active */
#sp-menu .sp-column {
  justify-content: flex-end;
  width: 100%;
}
.sp-megamenu-wrapper {
  height: 100%;
}
.sp-megamenu-parent {
  display: flex !important;            /* defeats Bootstrap d-lg-block !important */
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  height: 100%;
  list-style: none;
  flex-wrap: nowrap;
}
.sp-megamenu-parent > li {
  height: 100%;
  display: flex;
  align-items: stretch;
}
/* Note: #sp-header in the selector is needed to beat the legacy
   `#sp-menu li a { font-family: Arvo; color: #076633 ... }` rule earlier in
   this file, which has ID-level specificity (100). Class-only selectors
   would lose the cascade against it. */
#sp-header .sp-megamenu-parent > li {
  align-items: center;            /* override stretch so pills don't fill bar */
}
#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span.sp-menu-separator,
#sp-header .sp-megamenu-parent > li > span.sp-menu-heading {
  display: inline-flex;
  align-items: center;
  font-family: var(--gr-font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--gr-slate-600);
  padding: 7px 14px;
  border: none;
  border-radius: var(--gr-radius-full);
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
  transition: color 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
#sp-header .sp-megamenu-parent > li > a:hover,
#sp-header .sp-megamenu-parent > li > span:hover {
  color: var(--gr-slate-900);
  background-color: var(--gr-slate-100);
}

/* Active item — green pill with white text. */
#sp-header .sp-megamenu-parent > li.current-item > a,
#sp-header .sp-megamenu-parent > li.active > a {
  color: #ffffff;
  background-color: var(--gr-green);
}
#sp-header .sp-megamenu-parent > li.current-item > a:hover,
#sp-header .sp-megamenu-parent > li.active > a:hover {
  color: #ffffff;
  background-color: var(--gr-green-dark);
}

/* Login + Register pills (only show for guests) — matched pair of
   rounded-full pills sat side-by-side in the megamenu. Login is dark
   slate, Register is brand-green. Padding + font-size + radius MUST
   match so they read as a paired CTA, not two mismatched links.
   font-family !important needed to beat `.sppb-btn { font-family: Arvo !important }`. */
#sp-header .sp-megamenu-parent .nav-login-only-guest,
#sp-header .sp-megamenu-parent .nav-register-only-guest {
  font-family: var(--gr-font-sans) !important;
  border-radius: var(--gr-radius-full) !important;
  padding: 7px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border: none !important;
  border-bottom: none !important;
  text-transform: none !important;
  line-height: 1.4 !important;
}
#sp-header .sp-megamenu-parent .nav-login-only-guest {
  background-color: var(--gr-slate-900) !important;
  color: #ffffff !important;
}
#sp-header .sp-megamenu-parent .nav-login-only-guest:hover {
  background-color: var(--gr-slate-800) !important;
  color: #ffffff !important;
}
#sp-header .sp-megamenu-parent .nav-register-only-guest {
  background-color: var(--gr-green) !important;
  color: #ffffff !important;
}
#sp-header .sp-megamenu-parent .nav-register-only-guest:hover {
  background-color: var(--gr-green-dark) !important;
  color: #ffffff !important;
}

/* Dropdown menus.
   #sp-header in selectors so we beat the legacy `#sp-menu li a` rule.
   .sp-dropdown is the outer card; .sp-dropdown-inner is helix's own inner
   wrapper which ships with its own padding/background/shadow — we flatten
   it so the outer card is the only visual layer. */
#sp-header .sp-dropdown {
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-100);
  border-radius: var(--gr-radius-md);
  box-shadow: var(--gr-shadow-glass);
  padding: 6px;
  margin-top: 0;
}
/* Invisible hover bridge — closes the gap between the trigger pill and the
   dropdown so the user can move the mouse down without leaving the hover
   area and the dropdown collapsing. */
#sp-header .sp-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
  background: transparent;
}
#sp-header .sp-dropdown-inner {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border: none;
  border-radius: 0;
}
#sp-header .sp-dropdown-items {
  list-style: none;
  padding: 0;
  margin: 0;
}
#sp-header .sp-dropdown-items > li > a,
#sp-header .sp-dropdown li.sp-menu-item > a {
  display: block;
  font-family: var(--gr-font-sans) !important;
  font-size: 13px;
  font-weight: 500;
  color: var(--gr-slate-700);
  padding: 8px 12px;
  border-radius: var(--gr-radius-sm);
  border: none;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#sp-header .sp-dropdown-items > li > a:hover,
#sp-header .sp-dropdown li.sp-menu-item > a:hover {
  background-color: var(--gr-slate-100);
  color: var(--gr-slate-900);
}


/* ----------------------------------------------------------------------------
   MAIN BODY — let the map fill the viewport below the header
   ---------------------------------------------------------------------------- */
body.view-grrfrontendmembermapview #sp-main-body {
  padding: 0;
  margin: 0;
}


/* ----------------------------------------------------------------------------
   FLOATING MAP CONTROLS — vertical glass card stack on the right edge of the
   map. Two wrapper bars exist:
     .vertical-wrapper-controls       (top, ~12 buttons: search, key, pin,
                                       location, tracking, layers, gpx, zoom,
                                       fullscreen, settings, boundaries)
     .vertical-wrapper-controls-info  (bottom, 2 buttons: pin + info)
   Each wrapper used to render as a single grey pill containing tightly-packed
   children. We strip the wrapper background and convert each child into its
   own 40×40 white rounded card with a soft shadow. The OL zoom group keeps
   its + and − buttons inside ONE card, separated by a thin divider.
   ---------------------------------------------------------------------------- */
/* Wrapper itself is now the visual surface — one white rounded card with
   soft shadow that contains all the icons. This reads as a single tool
   palette over the busy map rather than 13 individual floating cards. */
body.view-grrfrontendmembermapview .vertical-wrapper-controls,
body.view-grrfrontendmembermapview .vertical-wrapper-controls-info {
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-100);
  border-radius: var(--gr-radius-lg);   /* 16px — matches example surfaces */
  box-shadow: var(--gr-shadow-glass);
  padding: 6px;
  width: 48px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Each direct child is transparent — the wrapper provides the visual surface.
   Children stay 36×36 with rounded corners so hover gives a subtle
   highlight ring inside the card. */
body.view-grrfrontendmembermapview .vertical-wrapper-controls > *,
body.view-grrfrontendmembermapview .vertical-wrapper-controls-info > * {
  background-color: transparent;
  color: var(--gr-slate-700);
  border: none;
  border-radius: var(--gr-radius-sm);   /* 8px — subtle hover highlight */
  box-shadow: none;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  transition: color 0.15s ease, background-color 0.15s ease;
  text-decoration: none;
}
body.view-grrfrontendmembermapview .vertical-wrapper-controls > *:hover,
body.view-grrfrontendmembermapview .vertical-wrapper-controls-info > *:hover {
  color: var(--gr-green);
  background-color: var(--gr-slate-50);
  border-color: transparent;
  box-shadow: none;
}

/* Icons (img / svg) inside cards — constrain so they're centred with breathing room. */
body.view-grrfrontendmembermapview .vertical-wrapper-controls > * img,
body.view-grrfrontendmembermapview .vertical-wrapper-controls > * svg,
body.view-grrfrontendmembermapview .vertical-wrapper-controls-info > * img,
body.view-grrfrontendmembermapview .vertical-wrapper-controls-info > * svg {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  object-fit: contain;
  display: block;
  margin: 0;
}

/* OL zoom group — both buttons stacked, no divider line (the wrapper is
   one surface; we treat zoom as two separate icon cells). */
body.view-grrfrontendmembermapview .vertical-wrapper-controls > .ol-zoom {
  height: 72px;
  flex-direction: column;
  gap: 2px;
}
body.view-grrfrontendmembermapview .vertical-wrapper-controls > .ol-zoom .ol-zoom-in,
body.view-grrfrontendmembermapview .vertical-wrapper-controls > .ol-zoom .ol-zoom-out {
  background: transparent;
  color: var(--gr-slate-700);
  border: none;
  border-radius: var(--gr-radius-sm);
  box-shadow: none;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  margin: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
body.view-grrfrontendmembermapview .vertical-wrapper-controls > .ol-zoom .ol-zoom-in:hover,
body.view-grrfrontendmembermapview .vertical-wrapper-controls > .ol-zoom .ol-zoom-out:hover {
  background-color: var(--gr-slate-50);
  color: var(--gr-green);
}

/* OL fullscreen / layer-switcher buttons — outer .ol-control is already a
   card; the inner button just needs to be transparent. */
body.view-grrfrontendmembermapview .vertical-wrapper-controls > .ol-control:not(.ol-zoom) > button,
body.view-grrfrontendmembermapview .vertical-wrapper-controls > .layer-switcher > button {
  background: transparent;
  color: var(--gr-slate-700);
  border: none;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

/* Flatten any inner wrappers (toggle labels, JS-injected button divs etc.)
   so the card is the only visual surface. */
body.view-grrfrontendmembermapview .vertical-wrapper-controls > * span,
body.view-grrfrontendmembermapview .vertical-wrapper-controls > * button,
body.view-grrfrontendmembermapview .vertical-wrapper-controls > * label,
body.view-grrfrontendmembermapview .vertical-wrapper-controls > * a,
body.view-grrfrontendmembermapview .vertical-wrapper-controls > * div:not(.panel),
body.view-grrfrontendmembermapview .vertical-wrapper-controls-info > * span,
body.view-grrfrontendmembermapview .vertical-wrapper-controls-info > * button,
body.view-grrfrontendmembermapview .vertical-wrapper-controls-info > * a,
body.view-grrfrontendmembermapview .vertical-wrapper-controls-info > * div {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

/* Font Awesome icons inside cards. */
body.view-grrfrontendmembermapview .vertical-wrapper-controls i.fas,
body.view-grrfrontendmembermapview .vertical-wrapper-controls i.fa,
body.view-grrfrontendmembermapview .vertical-wrapper-controls i.far,
body.view-grrfrontendmembermapview .vertical-wrapper-controls-info i.fas {
  color: var(--gr-slate-700);
  font-size: 16px;
  line-height: 1;
}

/* Layer-switcher and fullscreen buttons render their icons via Font Awesome
   ::before content (FA 5 is loaded site-wide). font-size: 0 on the button
   hides the OL-supplied glyphs (`»` for layer-switcher, `⤢` for fullscreen)
   so only the pseudo-element shows. */
body.view-grrfrontendmembermapview .vertical-wrapper-controls > .layer-switcher > button {
  font-size: 0 !important;   /* OL ships font-size: 1.14em — beat it */
}
body.view-grrfrontendmembermapview .vertical-wrapper-controls > .layer-switcher > button::before {
  content: "\f5fd";  /* fa-layer-group */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 16px;
  color: var(--gr-slate-700);
  line-height: 1;
}
body.view-grrfrontendmembermapview .vertical-wrapper-controls > .ol-fullscreen > button {
  font-size: 0;
}
body.view-grrfrontendmembermapview .vertical-wrapper-controls > .ol-fullscreen > button::before {
  content: "\f31e";  /* fa-expand-arrows-alt — clearer than fa-expand at 16px */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 16px;
  color: var(--gr-slate-700);
  line-height: 1;
}

/* Layer-switcher panel — clean up the radio-button + label layout. */
body.view-grrfrontendmembermapview .layer-switcher .panel {
  padding: 12px !important;
  font-family: var(--gr-font-sans);
}
body.view-grrfrontendmembermapview .layer-switcher .panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
body.view-grrfrontendmembermapview .layer-switcher .panel ul ul {
  padding-left: 0;
  margin-top: 4px;
}
body.view-grrfrontendmembermapview .layer-switcher .panel li.group > label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gr-slate-900);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px 0;
}
body.view-grrfrontendmembermapview .layer-switcher .panel li.layer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  margin: 0;
}
body.view-grrfrontendmembermapview .layer-switcher .panel li.layer input[type="radio"],
body.view-grrfrontendmembermapview .layer-switcher .panel li.layer input[type="checkbox"] {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--gr-green);
  cursor: pointer;
  position: static;   /* OL ships position: absolute on these — undo it */
  left: auto;
}
body.view-grrfrontendmembermapview .layer-switcher .panel li.layer > label {
  flex: 1 1 auto;
  display: block;            /* defeat flatten rule's inline-flex */
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: var(--gr-slate-700);
  margin: 0;
  cursor: pointer;
  line-height: 1.2;
}
body.view-grrfrontendmembermapview .layer-switcher .panel li.layer > label:hover {
  color: var(--gr-slate-900);
}

/* Pin toggle (#rememberMapTogglePlaceholder) — the toggle ships as
   .checkbox-wrapper-8 > input + .tgl-btn label > #pin-icon SVG. We need
   each layer to fill the card so the icon is centred. */
body.view-grrfrontendmembermapview #rememberMapTogglePlaceholder .checkbox-wrapper-8 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 0;
}
body.view-grrfrontendmembermapview #rememberMapTogglePlaceholder .checkbox-wrapper-8 input.tgl {
  display: none;
}
body.view-grrfrontendmembermapview #rememberMapTogglePlaceholder .tgl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
body.view-grrfrontendmembermapview #rememberMapTogglePlaceholder #pin-icon {
  width: 18px;
  height: 18px;
}
/* Path's own fill="#ffffff" attribute beats the parent SVG's CSS fill, so
   we must target the path directly. */
body.view-grrfrontendmembermapview #rememberMapTogglePlaceholder #pin-icon path {
  fill: var(--gr-slate-700);
}
body.view-grrfrontendmembermapview #cb3-8:checked + .tgl-btn #pin-icon path {
  fill: var(--gr-green);
}


/* ----------------------------------------------------------------------------
   GROUP BADGE — the dev-only widget in the bottom right.
   Restyled to match the glass surface language.
   ---------------------------------------------------------------------------- */
body.view-grrfrontendmembermapview #plg-groupbadge {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-family: var(--gr-font-sans) !important;
}
body.view-grrfrontendmembermapview #plg-groupbadge .gb-header {
  background-color: var(--gr-surface-100);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid var(--gr-slate-100);
  border-radius: var(--gr-radius-md);
  box-shadow: var(--gr-shadow-glass);
  padding: 10px 14px;
  color: var(--gr-slate-700);
}
body.view-grrfrontendmembermapview #plg-groupbadge .gb-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--gr-slate-800);
}
body.view-grrfrontendmembermapview #plg-groupbadge .gb-content {
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-100);
  border-radius: var(--gr-radius-md);
  box-shadow: var(--gr-shadow-glass);
  margin-top: 4px;
  padding: 10px 14px;
  color: var(--gr-slate-700);
  font-size: 12px;
}


/* ----------------------------------------------------------------------------
   SIDE PANE DOCK — the managed vertical stack that holds the side panes
   (route-details, route-planner). A flexbox column does the layout; the
   stacking + reflow are handled by assets/index-functions/sidePaneDock.js.
   The dock itself is click-through; only the panes inside it catch pointer
   events.
   ---------------------------------------------------------------------------- */
.side-pane-dock {
  /* position:absolute, anchored to the map area (#map2). top/left:0 with
     16px padding — the padding insets the panes by 16px (their visual
     margin from the map edge) and gives their drop-shadows room before
     the overflow clip. */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  max-height: 100%;
  /* The whole column scrolls as one unit when the stacked panes exceed
     the map area — one scrollbar on the dock, no internal pane scrolling. */
  overflow-y: auto;
}
.side-pane-dock > * {
  /* Panes keep their full natural height; the dock does the scrolling. */
  flex: 0 0 auto;
}


/* ----------------------------------------------------------------------------
   SIDE PANE (replaces the old OL popup that opened on feature click).
   `#popup` keeps its ID for backwards compatibility with the AJAX content
   fill code in markup.php. It is no longer an OL Overlay, and no longer
   self-positioned — it is a member of the SidePaneDock, which owns its
   position, show/hide and slide animation. This rule is only the card
   styling. Closed = inline display:none (set by the dock).
   ---------------------------------------------------------------------------- */
body.view-grrfrontendmembermapview #popup.side-pane {
  width: 360px;
  max-width: calc(100vw - 32px);
  /* No max-height — the pane is its natural height and the dock scrolls. */
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-100);
  border-radius: var(--gr-radius-lg);
  box-shadow: 0 12px 32px -6px rgba(15, 23, 42, 0.18),
              0 4px 12px -2px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--gr-font-sans);
}

/* Re-click pulse — body briefly tints to flag content swap. */
body.view-grrfrontendmembermapview #popup.side-pane.is-pulse .side-pane-body {
  animation: side-pane-pulse 600ms ease-out;
}
@keyframes side-pane-pulse {
  0%   { background-color: var(--gr-green-soft); }
  100% { background-color: transparent; }
}

/* Header — sticky title row with close X. */
body.view-grrfrontendmembermapview #popup.side-pane .side-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gr-slate-100);
  flex: 0 0 auto;
}
body.view-grrfrontendmembermapview #popup.side-pane .side-pane-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--gr-slate-900);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.view-grrfrontendmembermapview #popup.side-pane .side-pane-title i {
  color: var(--gr-green);
  font-size: 13px;
}
body.view-grrfrontendmembermapview #popup.side-pane .side-pane-closer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--gr-radius-sm);
  color: var(--gr-slate-500);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
body.view-grrfrontendmembermapview #popup.side-pane .side-pane-closer:hover {
  color: var(--gr-slate-900);
  background-color: var(--gr-slate-100);
}
body.view-grrfrontendmembermapview #popup.side-pane .side-pane-closer i {
  font-size: 14px;
}

/* Body — scrollable area for the AJAX-injected route details. position:
   relative anchors the absolute-positioned loader overlay below. */
body.view-grrfrontendmembermapview #popup.side-pane .side-pane-body {
  position: relative;
  padding: 16px;
  flex: 1 1 auto;
  overflow-y: auto;
  font-size: 13px;
  color: var(--gr-slate-700);
  line-height: 1.5;
}

/* Loading state — spinner overlays the pane body, content fades while it
   spins. The legacy #loader.lds-dual-ring just toggles a `.hidden` class
   when the AJAX call starts/finishes; we hijack the no-`.hidden` state to
   centre the spinner and dim #details behind it. */
body.view-grrfrontendmembermapview #popup.side-pane #loader.lds-dual-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: 48px;
  height: 48px;
  z-index: 2;
  pointer-events: none;
}
body.view-grrfrontendmembermapview #popup.side-pane #loader.lds-dual-ring::after {
  width: 36px;
  height: 36px;
  margin: 6px;
  border-color: var(--gr-green) transparent var(--gr-green) transparent;
}
body.view-grrfrontendmembermapview #popup.side-pane #loader.lds-dual-ring.hidden {
  display: none;
}
/* While the loader is visible (no .hidden class), fade #details. */
body.view-grrfrontendmembermapview #popup.side-pane #loader.lds-dual-ring:not(.hidden) ~ #details {
  opacity: 0.25;
  pointer-events: none;
  transition: opacity 150ms ease;
}
body.view-grrfrontendmembermapview #popup.side-pane #details {
  opacity: 1;
  transition: opacity 150ms ease;
}
body.view-grrfrontendmembermapview #popup.side-pane .side-pane-body p {
  margin: 0 0 8px 0;
}
body.view-grrfrontendmembermapview #popup.side-pane .side-pane-body p:last-child {
  margin-bottom: 0;
}
body.view-grrfrontendmembermapview #popup.side-pane .side-pane-body p > span {
  display: inline;
  font-weight: 600;
  color: var(--gr-slate-900);
}
body.view-grrfrontendmembermapview #popup.side-pane .side-pane-body a {
  color: var(--gr-green-dark);
  text-decoration: underline;
  text-decoration-color: var(--gr-green-soft-2);
  text-underline-offset: 2px;
}
body.view-grrfrontendmembermapview #popup.side-pane .side-pane-body a:hover {
  text-decoration-color: var(--gr-green-dark);
}

/* ----- Side-pane content components -----
   Class names below are emitted by markup.php's loadGRRinitialDetails_OL
   AJAX response. The structure is:
     .pane-grmuid    — hero GRMUID at the top of the body
     .pane-fields > .pane-field > <dt> + <dd>  — semantic key/value rows
     .pane-actions   — primary "More details" button + secondary icon row */
body.view-grrfrontendmembermapview #popup.side-pane .pane-grmuid-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px 0;
}
body.view-grrfrontendmembermapview #popup.side-pane .pane-grmuid {
  font-family: var(--gr-font-sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gr-slate-900);
  margin: 0;
  line-height: 1.1;
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}
/* Small "Road details" link to the right of the GRMUID for RCH/superuser.
   Simple outline-grey button. .side-pane-body in the selector chain to
   beat the generic `.side-pane-body a` rule above. */
body.view-grrfrontendmembermapview #popup.side-pane .side-pane-body .pane-grmuid-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1px solid var(--gr-slate-200);
  border-radius: var(--gr-radius-full);
  background-color: #ffffff;
  color: var(--gr-slate-700);
  font-family: var(--gr-font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
body.view-grrfrontendmembermapview #popup.side-pane .side-pane-body .pane-grmuid-action:hover {
  color: var(--gr-slate-900);
  background-color: var(--gr-slate-50);
  border-color: var(--gr-slate-300);
  text-decoration: none;
}
body.view-grrfrontendmembermapview #popup.side-pane .side-pane-body .pane-grmuid-action i {
  font-size: 10px;
  transition: transform 0.15s ease;
}
body.view-grrfrontendmembermapview #popup.side-pane .side-pane-body .pane-grmuid-action:hover i {
  transform: translateX(2px);
}

body.view-grrfrontendmembermapview .pane-fields {
  margin: 0 0 20px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.view-grrfrontendmembermapview .pane-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.view-grrfrontendmembermapview .pane-field dt {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--gr-slate-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
body.view-grrfrontendmembermapview .pane-field dd {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--gr-slate-900);
  line-height: 1.4;
  word-break: break-word;
}
body.view-grrfrontendmembermapview .pane-empty {
  color: var(--gr-slate-400);
  font-weight: 400;
}

body.view-grrfrontendmembermapview #popup.side-pane .pane-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--gr-slate-100);
}
body.view-grrfrontendmembermapview #popup.side-pane .pane-actions-secondary {
  display: flex;
  gap: 6px;
}

body.view-grrfrontendmembermapview #popup.side-pane .pane-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: none;
  border-radius: var(--gr-radius-full);
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
body.view-grrfrontendmembermapview #popup.side-pane .pane-btn-primary {
  background-color: var(--gr-green);
  color: #ffffff;
  width: 100%;
  box-shadow: 0 1px 2px 0 rgba(34, 197, 94, 0.18);
}
body.view-grrfrontendmembermapview #popup.side-pane .pane-btn-primary:hover {
  background-color: var(--gr-green-dark);
  color: #ffffff;
  text-decoration: none;
}
body.view-grrfrontendmembermapview #popup.side-pane .pane-btn-primary i {
  font-size: 13px;
}

body.view-grrfrontendmembermapview #popup.side-pane .pane-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  justify-content: stretch;
  flex: 1 1 0;
  height: 28px;
  padding: 0;
  border: 1px solid var(--gr-green-soft-2);
  border-radius: var(--gr-radius-full);
  background-color: transparent;
  color: var(--gr-green-dark);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
body.view-grrfrontendmembermapview #popup.side-pane .pane-icon-btn:hover {
  background-color: var(--gr-green-soft);
  border-color: var(--gr-green);
  text-decoration: none;
}
/* Default: icon centred, label parked just below the button. On hover the
   icon slides up and out, the label slides up into its place. */
body.view-grrfrontendmembermapview #popup.side-pane .pane-icon-btn-icon,
body.view-grrfrontendmembermapview #popup.side-pane .pane-icon-btn-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gr-font-sans);
  color: inherit;
  line-height: 1;
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity   0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.view-grrfrontendmembermapview #popup.side-pane .pane-icon-btn-icon {
  transform: translateY(0);
  font-size: 12px;
}
body.view-grrfrontendmembermapview #popup.side-pane .pane-icon-btn-label {
  transform: translateY(110%);
  font-size: 11px;
  font-weight: 500;
  opacity: 0;
}
body.view-grrfrontendmembermapview #popup.side-pane .pane-icon-btn:hover .pane-icon-btn-icon {
  transform: translateY(-110%);
  opacity: 0;
}
body.view-grrfrontendmembermapview #popup.side-pane .pane-icon-btn:hover .pane-icon-btn-label {
  transform: translateY(0);
  opacity: 1;
}

/* ----------------------------------------------------------------------------
   MODALS — applies to all Bootstrap modals on:
     - the member map view
     - the six single-record views (info, FAQ, etc.)
     - the two list views explicitly listed (FAQ + others)
   Same Bootstrap conventions across all three groups. Selectors use a
   nested :is() so the second :is() (single-record + list views) is the
   same group used by the SINGLE-RECORD + LIST VIEWS block below — keep
   them in sync. White rounded card, slate text + Inter, brand-green
   primary, outline-grey secondary, full-curve pill buttons — same
   tokens as the side pane.
   ---------------------------------------------------------------------------- */

:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-content {
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-100);
  border-radius: var(--gr-radius-lg);
  box-shadow: 0 12px 32px -6px rgba(15, 23, 42, 0.18),
              0 4px 12px -2px rgba(15, 23, 42, 0.08);
  font-family: var(--gr-font-sans);
  color: var(--gr-slate-700);
  overflow: hidden;
}

/* Header */
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--gr-slate-100);
  background-color: #ffffff;
}
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-title,
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-title.green {
  font-family: var(--gr-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--gr-slate-900);
  margin: 0;
}
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-title i {
  margin-right: 6px;
  color: var(--gr-green-dark);
  font-size: 13px;
}

/* Close button — Bootstrap 4 .close (×) AND Bootstrap 5 .btn-close */
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-header .close,
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-header .btn-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: -4px -4px -4px auto;
  border: none;
  border-radius: var(--gr-radius-sm);
  background-color: transparent;
  color: var(--gr-slate-500);
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  opacity: 1;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-header .close:hover,
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-header .btn-close:hover {
  color: var(--gr-slate-900);
  background-color: var(--gr-slate-100);
  opacity: 1;
}
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-header .close span {
  display: block;
  line-height: 1;
}

/* Body */
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body {
  padding: 20px;
  font-size: 13px;
  color: var(--gr-slate-700);
  line-height: 1.5;
}
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body p {
  margin: 0 0 12px 0;
}
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body p:last-child {
  margin-bottom: 0;
}
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body p.small,
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body .small {
  font-size: 12px;
  color: var(--gr-slate-500);
}
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body .text-muted {
  color: var(--gr-slate-500) !important;
}

/* Form labels — small uppercase slate-500, matching the side-pane field labels */
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body .form-label,
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body .form-label strong {
  display: block;
  font-family: var(--gr-font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--gr-slate-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px 0;
  line-height: 1.2;
}

/* Form controls — slate background, brand-green focus ring */
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body .form-control,
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body select.form-control,
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body textarea.form-control {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gr-slate-900);
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-200);
  border-radius: var(--gr-radius-sm);
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body .form-control:focus {
  outline: none;
  border-color: var(--gr-green);
  box-shadow: 0 0 0 3px var(--gr-green-soft);
}
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body .form-control[readonly] {
  background-color: var(--gr-slate-50);
  color: var(--gr-slate-600);
  cursor: default;
}
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body textarea.form-control {
  resize: vertical;
  min-height: 80px;
}
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body input[type="file"].form-control {
  padding: 6px 12px;
  font-size: 12px;
}

/* Helper text under inputs */
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body .form-text {
  margin-top: 4px;
  font-size: 11px;
  color: var(--gr-slate-500);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Form check (radio / checkbox rows) */
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  margin: 0;
}
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body .form-check-input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--gr-green);
  cursor: pointer;
}
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body .form-check-label {
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gr-slate-700);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  cursor: pointer;
}

/* Spacing between form groups */
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body .mb-3 {
  margin-bottom: 16px !important;
}
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body .mb-3:last-child {
  margin-bottom: 0 !important;
}

/* Footer */
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--gr-slate-100);
  background-color: #ffffff;
}
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-footer:empty {
  display: none;
}

/* Footer buttons. Override Bootstrap .btn defaults + .bg-mustard ugly. */
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--gr-radius-full);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, box-shadow 0.15s ease;
  text-transform: none;
  letter-spacing: 0;
}

/* Primary — brand green pill (overrides .bg-mustard too) */
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-footer .btn-primary,
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-footer .btn.bg-mustard,
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-footer .btn-primary.bg-mustard {
  background-color: var(--gr-green) !important;
  color: #ffffff !important;
  border-color: transparent;
  box-shadow: 0 1px 2px 0 rgba(34, 197, 94, 0.18);
}
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-footer .btn-primary:hover,
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-footer .btn.bg-mustard:hover {
  background-color: var(--gr-green-dark) !important;
  color: #ffffff !important;
}

/* Secondary — outline grey pill */
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-footer .btn-secondary {
  background-color: #ffffff;
  color: var(--gr-slate-700);
  border: 1px solid var(--gr-slate-200);
  box-shadow: none;
}
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-footer .btn-secondary:hover {
  background-color: var(--gr-slate-50);
  color: var(--gr-slate-900);
  border-color: var(--gr-slate-300);
}

/* In-body buttons (e.g. the "Upload" button inside the GPX modal body) */
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body .btn,
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  border: none;
  border-radius: var(--gr-radius-full);
  background-color: var(--gr-green);
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body .btn:hover,
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body .btn-primary:hover {
  background-color: var(--gr-green-dark);
  color: #ffffff;
}
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-body .btn.bg-mustard {
  background-color: var(--gr-green) !important;
  color: #ffffff !important;
}

/* Modal backdrop — slightly lighter than Bootstrap default */
:is(body.view-grrfrontendmembermapview, :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview)) .modal-backdrop.show {
  opacity: 0.4;
}

/* ============================================================================
   END MEMBER MAP REDESIGN
   ============================================================================ */


/* ============================================================================
   ============================================================================
   SINGLE-RECORD + LIST VIEWS — shared chrome (sidebar, sub-tabs, content
   card, info-trigger) + per-tab content rules. The :is() group above
   matches:
     - all six single-record views (substring match on
       "frontendsingleview"; the suffix is unique in this codebase)
     - the two list views explicitly named (8 other *frontendlistview
       views exist in the codebase but have NOT been audited for this
       design — add by name as they're brought in)

   Single-record views (substring-matched):
     view-grrfrontendsingleview        (Road details — landing tab)
     view-grraccessfrontendsingleview  (Access)
     view-grrdocsimagesfrontendsingleview (Documents / Photos / Videos)
     view-grrnotesfrontendsingleview   (Records Notes)
     view-grrreportsfrontendsingleview (Reports)
     view-grrhistoryfrontendsingleview (History — RCH only)
   List views (named explicitly):
     view-grrfrontendlistview          (Roads / Reports list)
     view-mcrgrrfrontendlistview       (Master County Records list)

   Modals: the MODALS block above wraps body.view-grrfrontendmembermapview
   plus this same :is() group via a nested :is(), so all modals on these
   views share one ruleset.
   ============================================================================
   ============================================================================ */

/* ----- Page baseline ----- */
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) {
  background-color: var(--gr-slate-50);
  color: var(--gr-slate-800);
  font-family: var(--gr-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Body font (Inter) — h1–h6 intentionally excluded; they inherit Arvo
   from the DISPLAY-FONT OVERRIDES block at the top of this file. */
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) button,
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) input,
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) select,
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) textarea {
  font-family: var(--gr-font-sans);
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) #sp-footer,
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) #sp-bottom,
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) #sp-section-1,
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) #sp-hero {
  display: none !important;
}

/* Header rules used to live here, scoped to
   :is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview).
   They were promoted to a sitewide block — see "HEADER — GLOBAL" near the
   top of this file. The rules are no longer duplicated here. */

/* ----- Body padding ----- */
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) #sp-main-body {
  padding: 24px 16px 64px;
}

/* ----- Top tabs (#myTab1) — pill-style.
   The legacy ultimate-rch tab styling (icon backgrounds, off-screen text,
   400px max-width, -50px margin on .tab-content) was commented out
   directly in templates/ultimate-rch/css/custom.css, so these rules don't
   need !important to win. */
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) #myTab1.nav-tabs.main {
  display: flex;
  gap: 4px;
  padding: 0 0 16px 0;
  margin: 0;
  border: none;
  list-style: none;
  background: transparent;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) #myTab1 .nav-item {
  margin: 0;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) #myTab1 .nav-link {
  display: inline-block;
  padding: 8px 14px;
  font-family: var(--gr-font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--gr-slate-700);
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-200);
  border-radius: var(--gr-radius-full);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease,
              border-color 0.15s ease;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) #myTab1 .nav-link:hover {
  background-color: var(--gr-slate-50);
  border-color: var(--gr-slate-300);
  color: var(--gr-slate-900);
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) #myTab1 .nav-link.active {
  background-color: var(--gr-green);
  border-color: var(--gr-green);
  color: #ffffff;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) #myTab1 .nav-link.active:hover {
  background-color: var(--gr-green-dark);
  border-color: var(--gr-green-dark);
  color: #ffffff;
}

/* ----- Left sidebar ----- */
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .left-sub-menu-holder {
  padding: 0 8px 0 0 !important;
  margin-top: 0 !important;
  display: flex;
  flex-direction: column;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .left-sub-menu-holder.pt-5,
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .left-sub-menu-holder.mt-5 {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) #theLeftMenu {
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-100);
  border-radius: var(--gr-radius-lg);
  box-shadow: var(--gr-shadow-glass);
  padding: 16px;
  height: auto;
  min-height: 0;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) #theLeftMenu .form-control-holder {
  margin: 0 0 8px 0;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) #theLeftMenu .dropper {
  width: 100%;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) #theLeftMenu .select select {
  width: 100%;
  padding: 8px 12px;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gr-slate-900);
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-200);
  border-radius: var(--gr-radius-sm);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%2364748b' stroke-width='1.5' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) #theLeftMenu .select select:focus {
  outline: none;
  border-color: var(--gr-green);
  box-shadow: 0 0 0 3px var(--gr-green-soft);
}

/* The previous sidebar `.left-sub-menu` ruleset (column-flex vertical
   list, block nav-links) was removed. The sub-tabs were moved out of
   the sidebar to the top of the .record-view-details card and are
   now styled as horizontal pills under #record-sub-tabs above. */

/* Sidebar logos */
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .logos {
  margin-top: 24px !important;
  padding-top: 16px;
  border-top: 1px solid var(--gr-slate-100);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .logos .trf-logo {
  width: auto;
  margin: 0 !important;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .logos .trf-logo:hover {
  opacity: 1;
}

/* ----- Main content (.col-lg-9.bg-grey) ----- */
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .bg-grey {
  background-color: transparent !important;
  padding: 0 !important;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details {
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-100);
  border-radius: var(--gr-radius-lg);
  box-shadow: var(--gr-shadow-glass);
  padding: 24px;
  position: relative;
}

/* Section heading (used by individual tabs that still emit a top H3) */
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details h3:not(.italic):first-of-type {
  font-family: var(--gr-font-sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--gr-slate-900);
  margin: 0 0 20px 0;
}

/* Sub-tab nav at the top of the content card — moved here from the
   left sidebar so the user can switch between sibling single-record
   views (Road details / Access / Documents / Notes / Reports / History)
   for the same road. Each tab is a real link to a different view, not
   an in-page tab toggle. The active tab is marked server-side with
   .active by the existing markup. */
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details #record-sub-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 0 0 20px 0;
  margin: 0 0 20px 0;
  border: none;
  border-bottom: 1px solid var(--gr-slate-100);
  list-style: none;
  overflow-x: auto;            /* graceful scroll if it ever does overflow */
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details #record-sub-tabs .nav-item {
  display: inline-flex;        /* shrink to content; default li would fill row */
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  background: transparent;     /* defeat any inherited bg from legacy rules */
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details #record-sub-tabs .nav-link {
  display: inline-block;
  padding: 8px 14px;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--gr-slate-600);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--gr-radius-full);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease,
              border-color 0.15s ease;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details #record-sub-tabs .nav-link span {
  display: inline;
  position: static;            /* legacy rule pushes spans off-screen */
  width: auto;
  height: auto;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: inherit;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details #record-sub-tabs .nav-link:hover {
  background-color: var(--gr-slate-50);
  border-color: var(--gr-slate-200);
  color: var(--gr-slate-900);
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details #record-sub-tabs .nav-link.active {
  background-color: var(--gr-green);
  border-color: var(--gr-green);
  color: #ffffff;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details #record-sub-tabs .nav-link.active:hover {
  background-color: var(--gr-green-dark);
  border-color: var(--gr-green-dark);
  color: #ffffff;
}

/* Field rows: <p><span>Label:</span> Value</p> */
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details p {
  margin: 0 0 14px 0;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gr-slate-900);
  line-height: 1.4;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details p > span {
  display: block;
  font-family: var(--gr-font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--gr-slate-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 4px 0;
}

/* Editable inline inputs */
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details input.rch_input,
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details input[type="text"],
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details input[type="email"],
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details input[type="url"],
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details textarea {
  display: block;
  width: 100%;
  padding: 8px 12px;
  margin-top: 4px;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gr-slate-900);
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-200);
  border-radius: var(--gr-radius-sm);
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details input.rch_input:focus,
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details input[type="text"]:focus,
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details input[type="email"]:focus,
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details input[type="url"]:focus,
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details textarea:focus {
  outline: none;
  border-color: var(--gr-green);
  box-shadow: 0 0 0 3px var(--gr-green-soft);
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details textarea {
  resize: vertical;
  min-height: 80px;
}

/* Selects */
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details .form-control-holder {
  margin: 0 0 14px 0;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details .form-control-holder > span {
  display: block;
  font-family: var(--gr-font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--gr-slate-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 4px 0;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details .select select,
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details select.form-control,
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details select {
  width: 100%;
  padding: 8px 12px;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gr-slate-900);
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-200);
  border-radius: var(--gr-radius-sm);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%2364748b' stroke-width='1.5' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details select:focus {
  outline: none;
  border-color: var(--gr-green);
  box-shadow: 0 0 0 3px var(--gr-green-soft);
}

/* Checkbox/radio groups — wrap each .form-control-holder that contains
   .form-check rows in a subtle outline card so the three flag-groups
   (Highway classification / Protected landscape / Surface type) read as
   distinct sections rather than one long stream. The :has() selector
   only matches checkbox-group holders, leaving the dropdown holders
   (county / HA / HA-ref) untouched. */
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details .form-control-holder:has(.form-check) {
  border: 1px solid var(--gr-slate-200);
  border-radius: var(--gr-radius-md);
  padding: 14px;
  margin-bottom: 12px;
  background-color: #ffffff;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details .form-control-holder:has(.form-check) > span {
  margin-bottom: 10px;
}

/* Checkboxes / radios */
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details .form-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 14px 6px 0;
  padding: 0;
  width: 100%;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details .form-check-input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--gr-green);
  cursor: pointer;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details .form-check-label {
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gr-slate-700);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  cursor: pointer;
}

/* Action buttons (UPDATE etc.) */
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details .btn,
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details .btn-primary,
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details .bg-mustard {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  background-color: var(--gr-green) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--gr-radius-full) !important;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  box-shadow: 0 1px 2px 0 rgba(34, 197, 94, 0.18);
  transition: background-color 0.15s ease;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details .btn:hover,
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details .btn-primary:hover,
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details .bg-mustard:hover {
  background-color: var(--gr-green-dark) !important;
  color: #ffffff !important;
}

/* Floating "i" info trigger top-right */
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details .info-trigger {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--gr-slate-200);
  border-radius: var(--gr-radius-full);
  background-color: #ffffff;
  color: var(--gr-slate-600);
  text-decoration: none;
  z-index: 5;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details .info-trigger:hover {
  color: var(--gr-green-dark);
  border-color: var(--gr-green-soft-2);
  background-color: var(--gr-slate-50);
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .record-view-details .info-trigger h3 {
  margin: 0;
  font-family: var(--gr-font-sans);
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  color: inherit;
  line-height: 1;
}

/* Loader overlay */
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) #loader.lds-dual-ring.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  z-index: 10;
}
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) #loader.lds-dual-ring.overlay::after {
  width: 36px;
  height: 36px;
  margin: 6px;
  border-color: var(--gr-green) transparent var(--gr-green) transparent;
}

/* Inline map preview — subtle outline card with small padding so the
   Leaflet canvas sits inside a clean frame. The canvas itself stays
   untouched (its own width/height inline styles win).
   Now lives in the LEFT sidebar (between the filter dropdowns and the
   logos block) on grrfrontendsingleview, so the selector dropped its
   .record-view-details ancestor. The .details-map class is unique
   enough that scoping by view body class is sufficient. */
:is(body[class*="frontendsingleview"], body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) .details-map {
  border: 1px solid var(--gr-slate-200);
  border-radius: var(--gr-radius-md);
  padding: 8px;
  background-color: #ffffff;
  overflow: hidden;
  margin-top: 8px;
}
/* Map height tweak for the sidebar — the inline `height:414px` is fine
   for the old half-width right-column layout but feels stretched in the
   narrower sidebar. Override to a more compact 240px without touching
   the inline style (which would break responsiveness elsewhere). */
:is(body[class*="frontendsingleview"]) .left-sub-menu-holder .details-map #mapSINGLE {
  height: 240px !important;
}

/* ============================================================================
   END SINGLE RECORD VIEW
   ============================================================================ */


/* ============================================================================
   ============================================================================
   LIST VIEWS — main column (grrfrontendlistview + mcrgrrfrontendlistview)
   Both views share the same chrome primitives — white cards on slate-50
   page bg, filter bar above each table, scroll-wrapped table, brand-green
   pill footer button. mcrgrrfrontendlistview adds an inner pill-tab nav
   (#listviewtabs) and a totals stat-grid below the GRR table.
   The :is() group keeps both view scopes in one selector list. The page
   baseline (slate-50 bg, Inter font, sidebar white card) and the modal
   styling already apply via the SINGLE-RECORD + LIST VIEWS block above —
   no need to repeat them here. The legacy .thead-dark-mustard /
   .bg-mustard rules are NOT touched (still used by other unredesigned
   list views and admin tools).
   ============================================================================
   ============================================================================ */

/* ----- Top page tabs (Dashboard / List View) -----
   Shared between the two list views so the chrome looks the same. */
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) ul.nav.nav-tabs.main {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 16px 0 12px 0;
  margin: 0 0 16px 0;
  border: none;
  border-bottom: 1px solid var(--gr-slate-200);
  list-style: none;
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) ul.nav.nav-tabs.main .nav-item {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  background: transparent;
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) ul.nav.nav-tabs.main .nav-link {
  display: inline-block;
  padding: 9px 18px;
  font-family: var(--gr-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--gr-slate-600);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--gr-radius-full);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease,
              border-color 0.15s ease;
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) ul.nav.nav-tabs.main .nav-link span {
  display: inline;
  position: static;
  width: auto;
  height: auto;
  font-family: var(--gr-font-sans);
  font-size: 14px;
  font-weight: 500;
  color: inherit;
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) ul.nav.nav-tabs.main .nav-link:hover {
  background-color: var(--gr-slate-50);
  border-color: var(--gr-slate-200);
  color: var(--gr-slate-900);
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) ul.nav.nav-tabs.main .nav-link.active {
  background-color: var(--gr-green);
  border-color: var(--gr-green);
  color: #ffffff;
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview) ul.nav.nav-tabs.main .nav-link.active:hover {
  background-color: var(--gr-green-dark);
  border-color: var(--gr-green-dark);
  color: #ffffff;
}

/* ----- Main column container -----
   The .bg-grey / pt-4 / pb-5 utility classes were dropped from the markup,
   so the col-lg-9 sits transparently on the slate-50 page bg by default;
   give it a touch of vertical breathing room. */
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .col-lg-9 {
  padding: 8px 0 24px 0;
}

/* ----- Dashboard cards stack ----- */
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .dashboard-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  min-width: 0;            /* let table scroll-wrappers shrink inside */
}

/* ----- One card ----- */
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-card {
  position: relative;      /* anchor for absolute info-trigger */
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-100);
  border-radius: var(--gr-radius-lg);
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04),
              0 4px 12px -2px rgba(15, 23, 42, 0.06);
  padding: 20px 24px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;            /* let inner scroll wrap shrink */
}

/* Card header: title (left) + info-trigger (right) */
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-card__title {
  font-family: var(--gr-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--gr-slate-900);
  margin: 0;
}

/* Inline "i" info-trigger inside the card header.
   The single-record view styles .info-trigger with position: absolute
   top/right; in the list view we want it inline to the right of the
   title, so we reset the absolute positioning. */
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-card .info-trigger {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--gr-slate-200);
  border-radius: var(--gr-radius-full);
  background-color: #ffffff;
  color: var(--gr-slate-600);
  text-decoration: none;
  flex: 0 0 auto;
  transition: color 0.15s ease, border-color 0.15s ease,
              background-color 0.15s ease;
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-card .info-trigger:hover {
  color: var(--gr-green-dark);
  border-color: var(--gr-green-soft-2);
  background-color: var(--gr-slate-50);
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-card .info-trigger h3 {
  margin: 0;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
  color: inherit;
  line-height: 1;
}

/* ----- Filter bar above the table ----- */
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding: 0;
  margin: 0;
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
  flex: 1 1 220px;          /* grow but don't run away */
  max-width: 320px;
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-filter label {
  font-family: var(--gr-font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--gr-slate-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin: 0;
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-filter__select {
  display: block;
  width: 100%;
  padding: 8px 36px 8px 12px;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gr-slate-900);
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-200);
  border-radius: var(--gr-radius-sm);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%2364748b' stroke-width='1.5' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-filter__select:focus {
  outline: none;
  border-color: var(--gr-green);
  box-shadow: 0 0 0 3px var(--gr-green-soft);
}

/* ----- Table scroll wrapper -----
   Negative side margin pulls the scroll edge to the card's edge so the
   shadow-on-scroll feels intentional. Padding inside re-creates the gap. */
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-table-scroll {
  margin: 0 -8px;
  padding: 0 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ----- Table itself ----- */
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table {
  width: 100%;
  margin: 0;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  color: var(--gr-slate-700);
  border-collapse: separate;
  border-spacing: 0;
}
/* Override legacy .thead-dark-mustard (yellow) without !important */
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table thead.thead-dark-mustard,
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table thead {
  background-color: var(--gr-slate-50);
  color: var(--gr-slate-700);
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table thead th {
  padding: 10px 12px;
  font-family: var(--gr-font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--gr-slate-500);
  background-color: var(--gr-slate-50);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  border-top: 1px solid var(--gr-slate-100);
  border-bottom: 1px solid var(--gr-slate-200);
  white-space: nowrap;
  vertical-align: middle;
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table thead th:first-child {
  border-top-left-radius: var(--gr-radius-sm);
  border-left: 1px solid var(--gr-slate-100);
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table thead th:last-child {
  border-top-right-radius: var(--gr-radius-sm);
  border-right: 1px solid var(--gr-slate-100);
}
/* Force cells to stretch to row height — the well-known
   `tr { height: 1px } + td { height: 100% }` trick. Without it,
   `border-collapse: separate` leaves short cells (e.g. an action cell
   whose 36px buttons are dwarfed by a User cell that wraps to 84px)
   with a 49px-tall box; the cell's background colour only covers that
   49px and an empty strip below it shows the tr/tbody behind. With
   the trick, every td's box matches the row height so backgrounds
   (white in rest, transparent letting the tr-hover slate-50 show
   through on hover) stretch uniformly across the row. */
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody tr {
  height: 1px;
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody td {
  height: 100%;
  padding: 12px;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  color: var(--gr-slate-700);
  border-bottom: 1px solid var(--gr-slate-100);
  vertical-align: middle;
  background-color: #ffffff;
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody td:first-child {
  border-left: 1px solid var(--gr-slate-100);
  font-weight: 500;
  color: var(--gr-slate-900);
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody td:last-child {
  border-right: 1px solid var(--gr-slate-100);
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody tr:last-child td {
  border-bottom: 1px solid var(--gr-slate-200);
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--gr-radius-sm);
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--gr-radius-sm);
}
/* Defeat Bootstrap 5's .table-striped row tinting cleanly. Bootstrap
   doesn't just set `background-color: striped` on alternate rows — it
   stacks a `background-image: linear-gradient(--bs-table-bg-type, ...)`
   overlay on EVERY cell and toggles the variable on odd rows. So:
     - my `background-color: #ffffff` only sets the BASE colour
     - the gradient overlay on top still tints odd rows
     - cells whose content has its own bg (e.g. .btn-outline-* in the
       Actions column) cover the gradient, the rest don't → visible
       per-cell inconsistency
   Fix: zero the BS gradient variables on the table itself so the
   overlay resolves to transparent for every row, then my white base
   wins uniformly. ----------------------------------------------- */
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table {
  --bs-table-bg: #ffffff;
  --bs-table-bg-type: transparent;
  --bs-table-color-type: var(--gr-slate-700);
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody td,
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody > tr > * {
  background-image: none;       /* defeat the BS gradient overlay */
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody tr:nth-of-type(odd) > td:first-child {
  color: var(--gr-slate-900);   /* keep the row-label first-cell emphasis */
}
/* Hover state: full row tinted slate-50.
   We put the hover background on the <tr> itself (not the tds) and
   make the tds transparent on hover so the tr's background shows
   through across the FULL row height. Without this trick, cells whose
   content is shorter than the row (e.g. an Actions cell with 36px
   icon-buttons in a row whose User cell wraps to 84px) have a cell box
   that only covers their own 49px content area — leaving a visible
   empty strip below where the hover colour doesn't reach. */
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table.table-hover tbody tr:hover {
  background-color: var(--gr-slate-50);
  cursor: pointer;
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table.table-hover tbody tr:hover > td,
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table.table-hover tbody tr:hover > * {
  background-color: transparent;
  color: var(--gr-slate-900);
}
/* Links inside table cells */
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody td a {
  color: var(--gr-green-dark);
  text-decoration: none;
  font-weight: 500;
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody td a:hover {
  text-decoration: underline;
}

/* ----- Per-row action buttons (Reports table: Edit / Toggle-publish /
   Archive / Delete). Rendered by JS into the trailing .text-end td.
   Bootstrap's `btn-sm` made them undersized for the row; lay them out
   as a tight flex row of square 32×32 icon buttons that fill the row
   height with consistent slate borders. ------------------------------ */
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody td.text-end {
  white-space: nowrap;
  text-align: end;
  padding-top: 6px;
  padding-bottom: 6px;
}
/* Container behaviour: the buttons live as inline siblings with `me-2`
   margin from Bootstrap. Replace that with a clean flex row + gap so
   spacing is uniform and the row right-aligns inside the cell. */
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody td.text-end {
  /* td can't be display:flex without breaking layout; use line-height
     trick + inline-flex on the buttons themselves below. */
  vertical-align: middle;
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody td.text-end .btn-edit-report,
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody td.text-end .btn-toggle-publish,
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody td.text-end .btn-archive-report,
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody td.text-end .btn-delete-report {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0 0 0 4px;       /* small gap between buttons; replaces `me-2` */
  border: 1px solid var(--gr-slate-200);
  border-radius: var(--gr-radius-sm);
  background-color: #ffffff;
  color: var(--gr-slate-700);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease;
}
/* First button doesn't need the leading gap. */
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody td.text-end > .btn:first-child {
  margin-left: 0;
}
/* Per-action accent on hover — green for edit/publish, slate for
   archive, red for delete. */
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody td.text-end .btn-edit-report:hover,
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody td.text-end .btn-toggle-publish:hover {
  color: var(--gr-green-dark);
  border-color: var(--gr-green-soft-2);
  background-color: var(--gr-green-soft);
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody td.text-end .btn-archive-report:hover {
  color: var(--gr-slate-900);
  border-color: var(--gr-slate-300);
  background-color: var(--gr-slate-100);
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-table tbody td.text-end .btn-delete-report:hover {
  color: #b91c1c;
  border-color: #fecaca;
  background-color: #fef2f2;
}

/* ----- Card footer (button row) -----
   Two-zone flex: the optional .gr-doc-toolbar (member-editor only)
   sits on the left; the View More button sits on the right. When
   .gr-doc-toolbar is absent, the View More button is pushed right
   on its own (since it's the only flex item). On narrow viewports
   the row wraps and the toolbar drops above the View More button. */
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 0;
}
/* Push the View More button to the right when the toolbar is also
   present; when the toolbar is absent, the button still sits at the
   right end of the row thanks to space-between's degenerate behaviour. */
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-card__footer > .gr-btn {
  margin-left: auto;
}
/* Brand-green pill button — overrides legacy .btn.btn-primary.bg-mustard */
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-card__footer .gr-btn,
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-card__footer .gr-btn.bg-mustard,
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-card__footer .gr-btn.btn-primary,
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-card__footer .gr-btn.btn-primary.bg-mustard {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
  background-color: var(--gr-green);
  border: 1px solid var(--gr-green);
  border-radius: var(--gr-radius-full);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 1px 2px 0 rgba(34, 197, 94, 0.18);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-card__footer .gr-btn:hover {
  background-color: var(--gr-green-dark);
  border-color: var(--gr-green-dark);
  color: #ffffff;
}
:is(body.view-grrfrontendlistview, body.view-mcrgrrfrontendlistview, body[class*="frontendsingleview"]) .gr-list-card__footer .gr-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--gr-green-soft),
              0 1px 2px 0 rgba(34, 197, 94, 0.18);
}

/* ----- mcrgrrfrontendlistview-only chrome -----
   The MCR list view wraps everything in ONE card; its header contains
   the inner pill-tab nav (#listviewtabs) so it sits visually flush
   with the card edge. The info-trigger floats to the right of the
   tabs. The MCR/GRR tab panes share the .gr-list-card styling above.
   ----------------------------------------------------------------- */

/* Push the .info-trigger to the right of the tabs in the card header,
   and let the tabs take all remaining horizontal space. */
body.view-mcrgrrfrontendlistview .gr-list-card__header {
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: -4px 0 -4px 0;
}
body.view-mcrgrrfrontendlistview .gr-list-card__header > #listviewtabs {
  flex: 1 1 auto;
  min-width: 0;
}

/* Inner pill tabs */
body.view-mcrgrrfrontendlistview #listviewtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  margin: 0;
  border: none;
  list-style: none;
}
body.view-mcrgrrfrontendlistview #listviewtabs .nav-item {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  background: transparent;
}
body.view-mcrgrrfrontendlistview #listviewtabs .nav-link {
  display: inline-block;
  padding: 8px 16px;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--gr-slate-600);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--gr-radius-full);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease,
              border-color 0.15s ease;
}
body.view-mcrgrrfrontendlistview #listviewtabs .nav-link span {
  display: inline;
  position: static;
  width: auto;
  height: auto;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: inherit;
  color: inherit;
}
body.view-mcrgrrfrontendlistview #listviewtabs .nav-link:hover {
  background-color: var(--gr-slate-50);
  border-color: var(--gr-slate-200);
  color: var(--gr-slate-900);
}
body.view-mcrgrrfrontendlistview #listviewtabs .nav-link.active {
  background-color: var(--gr-green);
  border-color: var(--gr-green);
  color: #ffffff;
}
body.view-mcrgrrfrontendlistview #listviewtabs .nav-link.active:hover {
  background-color: var(--gr-green-dark);
  border-color: var(--gr-green-dark);
  color: #ffffff;
}

/* Tab content + panes inside the listview card. Each pane has its own
   filter bar + table + footer button (+ totals on GRR), stacked. */
body.view-mcrgrrfrontendlistview .gr-list-card .tab-content {
  display: flex;
  flex-direction: column;
}
body.view-mcrgrrfrontendlistview .gr-list-card .tab-pane {
  display: none;
  flex-direction: column;
  gap: 16px;
}
body.view-mcrgrrfrontendlistview .gr-list-card .tab-pane.active,
body.view-mcrgrrfrontendlistview .gr-list-card .tab-pane.show.active {
  display: flex;
}

/* The <th> on Modified columns is sortable (.grr-sortable). Show the
   user it's clickable and give the sort arrow a clean Inter look. */
body.view-mcrgrrfrontendlistview .gr-list-table .grr-sortable {
  cursor: pointer;
  user-select: none;
}
body.view-mcrgrrfrontendlistview .gr-list-table .grr-sortable .sort-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  color: var(--gr-slate-400);
  vertical-align: middle;
}
body.view-mcrgrrfrontendlistview .gr-list-table .grr-sortable[data-sort-dir="asc"] .sort-arrow::before  { content: "▲"; color: var(--gr-green-dark); }
body.view-mcrgrrfrontendlistview .gr-list-table .grr-sortable[data-sort-dir="desc"] .sort-arrow::before { content: "▼"; color: var(--gr-green-dark); }
body.view-mcrgrrfrontendlistview .gr-list-table .grr-sortable[data-sort-dir=""]    .sort-arrow::before  { content: "▲▼"; letter-spacing: -1px; opacity: 0.4; }

/* Member-editor checkbox/radio column — leading <th> when $member_editor.
   The legacy template has an unscoped `thead th { width: 15%; }` rule
   that lands a 15% width hint on the empty select <th>, which makes the
   column wider than it should be. Counter it with the standard
   shrink-to-content pattern: width:1% + white-space:nowrap on BOTH the
   header AND the matching tbody first-cell (only applied to the MCR
   table, since GRR has no select column). */
body.view-mcrgrrfrontendlistview #intital_load_mcr .gr-list-table__select-col,
body.view-mcrgrrfrontendlistview #intital_load_mcr.gr-list-table thead th.gr-list-table__select-col,
body.view-mcrgrrfrontendlistview #intital_load_mcr.gr-list-table tbody td:first-child {
  width: 1%;
  white-space: nowrap;
  padding-left: 14px;
  padding-right: 8px;
  text-align: center;
}
/* Reset our generic "first-cell is the row label" styling for the MCR
   table, where the first cell is just a checkbox/radio control. */
body.view-mcrgrrfrontendlistview #intital_load_mcr.gr-list-table tbody td:first-child {
  font-weight: 400;
  color: var(--gr-slate-700);
}

/* ----- Totals stat grid (GRR tab only) ----- */
body.view-mcrgrrfrontendlistview .gr-totals {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 8px 0 0 0;
  padding: 16px 0 0 0;
  border-top: 1px solid var(--gr-slate-100);
}
body.view-mcrgrrfrontendlistview .gr-totals__heading-row {
  margin: 4px 0 0 0;
}
body.view-mcrgrrfrontendlistview .gr-totals__heading {
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gr-slate-500);
  margin: 0 0 4px 0;
}
body.view-mcrgrrfrontendlistview .gr-totals__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
body.view-mcrgrrfrontendlistview .gr-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background-color: var(--gr-slate-50);
  border: 1px solid var(--gr-slate-100);
  border-radius: var(--gr-radius-md);
  min-width: 0;
}
body.view-mcrgrrfrontendlistview .gr-stat__label {
  font-family: var(--gr-font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--gr-slate-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
body.view-mcrgrrfrontendlistview .gr-stat__value {
  font-family: var(--gr-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--gr-slate-900);
  line-height: 1.1;
  letter-spacing: 0;
  word-break: break-word;
}
body.view-mcrgrrfrontendlistview .gr-stat__sub {
  display: flex;
  flex-direction: column;
  font-family: var(--gr-font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--gr-slate-600);
  line-height: 1.3;
}
/* The .total_length wrapper span is hollowed out via display:contents so
   its children (the .m-val + .mi-val emitted by getSum()) become direct
   flex items and stack under the "Total length:" text node above. Keep
   it readable on browsers that don't support display:contents — the
   children would just inline-stack without explicit line breaks. */
body.view-mcrgrrfrontendlistview .gr-stat__sub > span {
  display: contents;
}
body.view-mcrgrrfrontendlistview .gr-stat__sub .m-val {
  display: block;
  color: var(--gr-slate-900);
  font-weight: 600;
}
body.view-mcrgrrfrontendlistview .gr-stat__sub .mi-val {
  display: block;
  color: var(--gr-slate-400);
  font-weight: 500;
}

/* ----- Sitewide doc-toolbar pattern -----
   Reusable "controls in a row" toolbar with primary / danger / disabled
   button variants and a hover-only tooltip on disabled buttons. NOT
   scoped to a body class so it works on any page where design-system.css
   is loaded (the grmdesign system plugin loads it on every frontend
   page).

   Specificity uses the `.gr-doc-toolbar .gr-doc-toolbar__btn` descendant
   pattern so the buttons beat the legacy `.doc-buttons a` rule
   (specificity 0,0,1,1) without needing !important. The companion JS
   click guard at media/plg_system_grmdesign/js/disabled-guard.js makes
   the disabled state actually block clicks (the CSS keeps pointer
   events on so the hover tooltip can still fire). ---------------- */
.gr-doc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.gr-doc-toolbar.d-none {
  /* keep Bootstrap d-none working for tab-switching JS */
  display: none !important;
}
.gr-doc-toolbar .gr-doc-toolbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Reset the legacy `.doc-buttons a` rules that forced these anchors
     into 30×30 SVG-icon-background buttons. We want a normal pill. */
  width: auto;
  height: auto;
  min-width: 0;
  background-image: none;
  padding: 8px 16px;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
  background-color: var(--gr-green);
  border: 1px solid var(--gr-green);
  border-radius: var(--gr-radius-full);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px 0 rgba(34, 197, 94, 0.18);
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease;
}
.gr-doc-toolbar .gr-doc-toolbar__btn:hover {
  background-color: var(--gr-green-dark);
  border-color: var(--gr-green-dark);
  color: #ffffff;
  text-decoration: none;
}
/* Zero out margins. Specifically defeats the legacy
   `.doc-buttons a:first-child { margin-bottom: 5px }` rule (specificity
   0,0,2,1) which was for the old stacked-icon layout — without this
   override the first button's margin-bottom shifts the flex row's
   cross-axis centre and the buttons render misaligned vertically. */
.gr-doc-toolbar .gr-doc-toolbar__btn,
.gr-doc-toolbar .gr-doc-toolbar__btn:first-child,
.gr-doc-toolbar .gr-doc-toolbar__btn:last-child {
  margin: 0;
}
/* Danger variant for delete actions */
.gr-doc-toolbar .gr-doc-toolbar__btn--danger {
  background-color: #ffffff;
  color: #b91c1c;
  border-color: #fecaca;
  box-shadow: none;
}
.gr-doc-toolbar .gr-doc-toolbar__btn--danger:hover {
  background-color: #fef2f2;
  color: #991b1b;
  border-color: #fca5a5;
}
/* Disabled state — applied alongside another modifier (e.g. --danger).
   Source-ordered AFTER --danger so a button with both classes shows
   the muted grey treatment. JS strips this class to "enable" the
   button (e.g. when an MCR row is selected).
   We do NOT use pointer-events: none here because we want :hover to
   fire so the data-tooltip rule below shows the "why disabled" hint.
   Click is blocked by media/plg_system_grmdesign/js/disabled-guard.js. */
.gr-doc-toolbar .gr-doc-toolbar__btn--disabled {
  position: relative;
  background-color: var(--gr-slate-50);
  color: var(--gr-slate-500);
  border-color: var(--gr-slate-200);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.7;
}
.gr-doc-toolbar .gr-doc-toolbar__btn--disabled:hover {
  background-color: var(--gr-slate-50);
  color: var(--gr-slate-500);
  border-color: var(--gr-slate-200);
  opacity: 0.7;
}

/* Tooltip on disabled buttons — uses data-tooltip attribute as content
   so we can keep the native `title` attribute off (avoids the ugly
   delayed browser tooltip showing on top of ours). Slate-900 pill that
   floats above the button with a small caret pointing down to it. */
.gr-doc-toolbar .gr-doc-toolbar__btn--disabled[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--gr-slate-900);
  color: #ffffff;
  font-family: var(--gr-font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 6px 10px;
  border-radius: var(--gr-radius-sm);
  white-space: nowrap;
  pointer-events: none;
  z-index: 100;
  opacity: 1;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.18);
}
.gr-doc-toolbar .gr-doc-toolbar__btn--disabled[data-tooltip]:hover::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--gr-slate-900);
  pointer-events: none;
  z-index: 100;
}

/* ============================================================================
   END LIST VIEW DASHBOARD
   ============================================================================ */


/* ============================================================================
   ============================================================================
   DOC / IMAGE MODALS — Add MCR / Delete MCR / Add image / Delete image
   These modal IDs (#documentAdderModal, #documentDeleterModal,
   #imageDeleterModal, #featured-images-uploader) appear on
   mcrgrrfrontendlistview, grrdocsimagesfrontendsingleview, and
   mcrfrontendlistview. The modal CHROME (header / body / footer / close
   button / inputs.form-control / labels.form-label / footer .btn) is
   already handled by the MODALS block at the top of this file. Rules
   below add design-system polish for the bits the chrome block doesn't
   cover: the bare <select>s in the upload modals, the legacy "Choose a
   file" upload widget (.button-wrap + .new-button + the absolute file
   input), the .progress-wrp progress bar, the .form-row/.form-group
   Bootstrap-4 grid wrappers (Bootstrap 5 dropped .form-row), and the
   danger-styled DELETE confirm button.

   Selectors are ID-scoped to the modals — design-system.css loads
   sitewide so wherever these modal IDs render they pick up these rules
   automatically. ===========================================================
   ============================================================================ */

/* ----- .form-row / .form-group — replace the old Bootstrap 4 grid -----
   Inside our four modals, treat .form-row as a flex row with gap and
   .form-group as a flex item that can hold col-md-X width hints. */
:is(#documentAdderModal, #documentDeleterModal, #imageDeleterModal, #featured-images-uploader) .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 12px;
  margin: 0 0 12px 0;
}
:is(#documentAdderModal, #documentDeleterModal, #imageDeleterModal, #featured-images-uploader) .form-row:last-child {
  margin-bottom: 0;
}
:is(#documentAdderModal, #documentDeleterModal, #imageDeleterModal, #featured-images-uploader) .form-group {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}
/* Honour col-md-X width hints inside our modals (Bootstrap 5 only
   activates these in a real .row > .col grid; here we approximate). */
:is(#documentAdderModal, #documentDeleterModal, #imageDeleterModal, #featured-images-uploader) .form-group.col-md-12 { flex: 1 1 100%; }
:is(#documentAdderModal, #documentDeleterModal, #imageDeleterModal, #featured-images-uploader) .form-group.col-md-8  { flex: 1 1 60%; }
:is(#documentAdderModal, #documentDeleterModal, #imageDeleterModal, #featured-images-uploader) .form-group.col-md-6  { flex: 1 1 calc(50% - 6px); }
:is(#documentAdderModal, #documentDeleterModal, #imageDeleterModal, #featured-images-uploader) .form-group.col-md-4  { flex: 1 1 30%; }

/* Labels — small uppercase slate, matching the chrome label styling */
:is(#documentAdderModal, #documentDeleterModal, #imageDeleterModal, #featured-images-uploader) label:not(.d-none):not(.new-button) {
  display: block;
  font-family: var(--gr-font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--gr-slate-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px 0;
  line-height: 1.2;
}

/* Bare <select>s in upload modals (no .form-control class).
   Helix Ultimate's compiled template.css has
   `select:not(.form-select):not(.form-control) { padding: .5rem .5rem
   !important; ... border-radius: .25rem }` — the !important on padding
   forces us to use !important too (template.css is build-generated, so
   commenting it out would be lost on the next template rebuild). The
   other longhand overrides win on specificity (the :is() with an ID is
   more specific than the bare element selector). */
:is(#documentAdderModal, #featured-images-uploader) .modal-body select {
  display: block;
  width: 100%;
  padding: 8px 36px 8px 12px !important;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gr-slate-900);
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-200);
  border-radius: var(--gr-radius-sm);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%2364748b' stroke-width='1.5' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
:is(#documentAdderModal, #featured-images-uploader) .modal-body select:focus {
  outline: none;
  border-color: var(--gr-green);
  box-shadow: 0 0 0 3px var(--gr-green-soft);
}

/* Disabled "Document Name" / "Image Name" preview input in delete modals.
   This is purely informational — JS fills it with the selected row's name.
   Style it as a subtle read-only display rather than an editable input. */
:is(#documentDeleterModal, #imageDeleterModal) .modal-body input[disabled] {
  background-color: var(--gr-slate-50);
  color: var(--gr-slate-700);
  border-color: var(--gr-slate-200);
  font-weight: 500;
  cursor: default;
}

/* Confirmation input ("Type DELETE...") + DELETE button row. The original
   markup uses col-md-8 + col-md-4. With our flex grid above the input
   stretches and the button hugs its content. */
:is(#documentDeleterModal, #imageDeleterModal) .form-control-holder {
  margin: 0;
  padding: 0;
}

/* DELETE confirm buttons — danger styling. Override the
   `.modal-body .btn-primary` brand-green default from the MODALS chrome
   block. ID-targeted so other modal-body buttons stay green. */
#documentDeleterModal #document_deleter,
#imageDeleterModal #image_deleter {
  background-color: #dc2626 !important;       /* override chrome's !important */
  color: #ffffff !important;
  border-color: #dc2626 !important;
  box-shadow: 0 1px 2px 0 rgba(220, 38, 38, 0.18);
}
#documentDeleterModal #document_deleter:hover,
#imageDeleterModal #image_deleter:hover {
  background-color: #b91c1c !important;
  color: #ffffff !important;
  border-color: #b91c1c !important;
}

/* ----- File upload "Choose a file" widget -----
   Markup: <div class="button-wrap"><label class="new-button"
   for="fileupload">Choose a file</label><input type="file" id="fileupload"></div>
   Override the legacy mustard-yellow .new-button + the absolute-position
   .input#fileupload tricks. Use the modern visually-hidden pattern: the
   <label> looks like a pill button, the <input type="file"> is hidden
   but still clickable via the label's `for` association. */
:is(#documentAdderModal, #featured-images-uploader) .button-wrap {
  position: relative;
  display: inline-block;
  margin: 4px 0 0 0;
}
:is(#documentAdderModal, #featured-images-uploader) .new-button {
  /* Reset the legacy mustard yellow + absolute-positioning hacks */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: static !important;
  padding: 8px 16px !important;
  width: auto !important;
  height: auto !important;
  text-indent: 0 !important;
  z-index: auto;
  /* Design-system secondary pill button */
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--gr-slate-700);
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-200);
  border-radius: var(--gr-radius-full);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease;
}
:is(#documentAdderModal, #featured-images-uploader) .new-button:hover {
  background-color: var(--gr-slate-50);
  color: var(--gr-slate-900);
  border-color: var(--gr-slate-300);
}
/* Hide the actual file input but keep it click-target for the label.
   Visually-hidden pattern instead of the legacy z-index hack. */
:is(#documentAdderModal, #featured-images-uploader) input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  /* Defeat the legacy `top: 6px; left: 0; z-index: 1`. */
  top: auto !important;
  left: auto !important;
  font-size: 0 !important;
  color: transparent !important;
  opacity: 0;
}

/* ----- Progress bar (.progress-wrp) -----
   Override the legacy 30px/grey-border/dark-green-fill styling. Make it
   a slim slate-100 track with a brand-green fill, with the % readout
   centered on top. */
:is(#documentAdderModal, #featured-images-uploader) .modal-footer.progress-part {
  /* The legacy footer had no real action buttons — only the progress
     bar lives in the footer. Hide the empty footer until upload starts;
     show as a single full-width row when it does. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 14px 20px;
  gap: 4px;
}
:is(#documentAdderModal, #featured-images-uploader) .progress-wrp {
  position: relative;
  width: 100%;
  height: 8px;
  margin: 0;
  background-color: var(--gr-slate-100);
  border: none;
  border-radius: var(--gr-radius-full);
  overflow: hidden;
}
:is(#documentAdderModal, #featured-images-uploader) .progress-wrp .progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: var(--gr-green);
  transition: width 0.2s ease;
}
:is(#documentAdderModal, #featured-images-uploader) .progress-wrp .status {
  position: static;
  display: block;
  margin: 4px 0 0 0;
  font-family: var(--gr-font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--gr-slate-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}

/* The Add modal has a NESTED <form id="uploader"> wrapping the file
   input — invalid HTML but pre-existing. Treat it as a transparent
   wrapper that doesn't add spacing of its own. */
:is(#documentAdderModal, #featured-images-uploader) form#uploader {
  display: contents;
}

/* ----- Form spacing tweaks -----
   The form-row/form-group flex grid above gives nice spacing between
   rows; tighten the modal-body's <form> wrapper to match. */
:is(#documentAdderModal, #documentDeleterModal, #imageDeleterModal, #featured-images-uploader) .modal-body > form {
  margin: 0;
}
:is(#documentAdderModal, #documentDeleterModal, #imageDeleterModal, #featured-images-uploader) .modal-body > form > .form-row + .form-row {
  margin-top: 4px;
}

/* ============================================================================
   END DOC / IMAGE MODALS
   ============================================================================ */


/* ============================================================================
   GRMUID display — single inline line "GRMUID: 87" rendered above the
   sidebar map (by _partials/single_map.php) on every single-record
   sub-tab. The "GRMUID:" label and the number share the same large
   bold size; only the colour differs (slate-400 label / slate-900
   number) so the eye lands on the road id. ===================== */
:is(body[class*="frontendsingleview"]) .gr-grmuid {
  display: block;
  margin: 16px 0 16px 0;
  padding: 0;
  font-family: var(--gr-font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--gr-slate-900);
  text-align: left;
}
:is(body[class*="frontendsingleview"]) .gr-grmuid > span {
  display: inline;
  font-family: inherit;
  font-size: inherit;
  font-weight: 300;             /* light weight for the label */
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: var(--gr-slate-400);
  margin: 0 4px 0 0;
}


/* ============================================================================
   ============================================================================
   USER PROFILE EDIT (com_users / view-profile / layout-edit)
   Restyle Joomla's stock profile form (rendered by Helix Ultimate's
   override at plugins/system/helixultimate/overrides/com_users/profile/edit.php)
   without touching the markup — that file gets overwritten on Helix
   updates. CSS-only rules scoped to body:is(.view-profile.layout-edit, .view-login).

   Visual goals: a centered max-width card layout with each form
   <fieldset> as a sub-card section, design-system form controls
   (slate borders, brand-green focus ring), and primary/ghost pill
   buttons in the submit row. ============================================
   ============================================================================ */

body:is(.view-profile.layout-edit, .view-login) {
  background-color: var(--gr-slate-50);
  color: var(--gr-slate-800);
  font-family: var(--gr-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body:is(.view-profile.layout-edit, .view-login) .com-users-profile__edit {
  max-width: 880px;
  margin: 24px auto;
  padding: 0 16px;
}

body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) fieldset {
  margin: 0;
  padding: 20px 24px 16px 24px;
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-100);
  border-radius: var(--gr-radius-lg);
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04),
              0 4px 12px -2px rgba(15, 23, 42, 0.06);
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) fieldset > legend {
  float: none;
  width: auto;
  margin: 0 0 16px 0;
  padding: 0;
  font-family: var(--gr-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--gr-slate-900);
  border: none;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) fieldset > p {
  margin: -12px 0 16px 0;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  color: var(--gr-slate-500);
  line-height: 1.5;
}

/* Joomla field rendering: .control-group > .control-label + .controls.
   Convert from the Bootstrap-2 horizontal pattern (label-left + input-right)
   to a stacked pattern (label above input). */
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .control-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px 0;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .control-group:last-child {
  margin-bottom: 0;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .control-label {
  margin: 0;
  padding: 0;
  width: auto;
  text-align: left;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .control-label label {
  display: block;
  font-family: var(--gr-font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--gr-slate-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin: 0;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .control-label label.required .star {
  color: var(--gr-green-dark);
  margin-left: 2px;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .controls {
  margin: 0;
  padding: 0;
}

/* Helper text under fields. */
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .form-text,
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .controls > small,
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .controls > .text-muted {
  display: block;
  margin: 4px 0 0 0;
  font-family: var(--gr-font-sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--gr-slate-500);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
}

/* Text-like inputs + selects + textareas. */
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .form-control,
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) select.form-select,
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) textarea.form-control {
  display: block;
  width: 100%;
  padding: 9px 12px;
  font-family: var(--gr-font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--gr-slate-900);
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-200);
  border-radius: var(--gr-radius-sm);
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .form-control:focus,
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) select.form-select:focus,
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) textarea.form-control:focus {
  outline: none;
  border-color: var(--gr-green);
  box-shadow: 0 0 0 3px var(--gr-green-soft);
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .form-control[readonly],
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .form-control[disabled] {
  background-color: var(--gr-slate-50);
  color: var(--gr-slate-600);
  cursor: default;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) textarea.form-control {
  resize: vertical;
  min-height: 90px;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) select.form-select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%2364748b' stroke-width='1.5' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

/* Checkboxes and radios (interests etc.). */
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .form-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  margin: 0 16px 6px 0;
  min-height: 0;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .form-check-input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--gr-green);
  cursor: pointer;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .form-check-label {
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gr-slate-700);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  line-height: 1.3;
  cursor: pointer;
}

/* Submit row: green pill primary + outline ghost cancel. */
body:is(.view-profile.layout-edit, .view-login) .com-users-profile__edit-submit {
  margin: 0;
  padding: 16px 24px;
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-100);
  border-radius: var(--gr-radius-lg);
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04),
              0 4px 12px -2px rgba(15, 23, 42, 0.06);
}
body:is(.view-profile.layout-edit, .view-login) .com-users-profile__edit-submit > .mb-3 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
body:is(.view-profile.layout-edit, .view-login) .com-users-profile__edit-submit .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-family: var(--gr-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--gr-radius-full);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  transition: background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, box-shadow 0.15s ease;
}
body:is(.view-profile.layout-edit, .view-login) .com-users-profile__edit-submit .btn-primary {
  background-color: var(--gr-green);
  color: #ffffff;
  border-color: var(--gr-green);
  box-shadow: 0 1px 2px 0 rgba(34, 197, 94, 0.18);
}
body:is(.view-profile.layout-edit, .view-login) .com-users-profile__edit-submit .btn-primary:hover {
  background-color: var(--gr-green-dark);
  border-color: var(--gr-green-dark);
}
body:is(.view-profile.layout-edit, .view-login) .com-users-profile__edit-submit .btn-danger {
  background-color: #ffffff;
  color: var(--gr-slate-700);
  border-color: var(--gr-slate-200);
  box-shadow: none;
}
body:is(.view-profile.layout-edit, .view-login) .com-users-profile__edit-submit .btn-danger:hover {
  background-color: var(--gr-slate-50);
  color: var(--gr-slate-900);
  border-color: var(--gr-slate-300);
}

/* ----- Password input + show/hide toggle.
   Joomla wraps the password input in `.password-group > .input-group`
   with a trailing `<button class="btn btn-secondary input-password-toggle">`
   containing an `<span class="icon-eye">` (the icomoon font isn't loaded
   on this template so the icon span is empty). Lay out the input + button
   as a proper Bootstrap-5 input-group with the button sitting flush on
   the right, and supply an inline-SVG eye icon via the pseudo-element. */
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .password-group {
  width: 100%;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .input-group {
  display: flex;
  width: 100%;
  align-items: stretch;
}
/* Override the base .form-control's display:block; width:100% so it can
   share the row with the toggle button inside the input-group. */
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .input-group > .form-control {
  flex: 1 1 auto;
  min-width: 0;
  width: 1%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .input-group > .form-control:focus {
  /* Keep the focus ring visually contiguous with the toggle button. */
  z-index: 2;
}
/* Show/hide password toggle button. */
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .input-password-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--gr-slate-200);
  border-left: none;
  border-top-right-radius: var(--gr-radius-sm);
  border-bottom-right-radius: var(--gr-radius-sm);
  background-color: var(--gr-slate-50);
  color: var(--gr-slate-500);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .input-password-toggle:hover {
  background-color: var(--gr-slate-100);
  color: var(--gr-slate-700);
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .input-password-toggle:focus-visible {
  outline: none;
  background-color: var(--gr-slate-100);
  color: var(--gr-slate-700);
  box-shadow: 0 0 0 3px var(--gr-green-soft);
  z-index: 2;
  position: relative;
}
/* Hide the empty icomoon spans inside the button. */
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .input-password-toggle .icon-eye,
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .input-password-toggle .icon-eye-slash,
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .input-password-toggle .icon-fw {
  display: none;
}
/* Render an inline-SVG eye icon via the button's ::before. Joomla's JS
   swaps the inner <span>'s class between `icon-eye` and `icon-eye-slash`
   when the user toggles — use :has() to flip the icon accordingly. */
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .input-password-toggle::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/><circle cx='12' cy='12' r='3'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/><circle cx='12' cy='12' r='3'/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .input-password-toggle:has(.icon-eye-slash)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.88 9.88a3 3 0 1 0 4.24 4.24'/><path d='M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68'/><path d='M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61'/><line x1='2' y1='2' x2='22' y2='22'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.88 9.88a3 3 0 1 0 4.24 4.24'/><path d='M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68'/><path d='M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61'/><line x1='2' y1='2' x2='22' y2='22'/></svg>");
}

/* ----- Password-strength meter.
   Joomla's js-password-strength plugin appends an HTML5 <meter> +
   a label <div id="password-0"> after the .input-group. The native
   <meter> styling is browser-specific (Chrome/Webkit + Firefox have
   different pseudo-elements, and the defaults look like old OS
   progress bars). Restyle as a slim slate-100 track with brand-green
   "strong" fill, amber "weak" fill, and red "very weak" fill. */
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .password-group > meter {
  display: block;
  width: 100%;
  height: 6px;
  margin: 6px 0 0 0;
  border: none;
  border-radius: var(--gr-radius-full);
  background: var(--gr-slate-100);
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;          /* mask the inner fill to the rounded track */
}
/* The empty/0 state: hide the meter until it has a value. Joomla
   sets value="0" on initial render — render only the empty track. */
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .password-group > meter:not([value]),
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .password-group > meter[value="0"] {
  /* keep the empty track visible — confirms the meter is there. */
  opacity: 0.5;
}
/* Webkit/Blink track + fill. */
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .password-group > meter::-webkit-meter-bar {
  background: var(--gr-slate-100);
  border: none;
  border-radius: var(--gr-radius-full);
  height: 6px;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .password-group > meter::-webkit-meter-optimum-value {
  background: var(--gr-green);
  border-radius: var(--gr-radius-full);
  transition: width 0.15s ease;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .password-group > meter::-webkit-meter-suboptimum-value {
  background: #f59e0b;       /* amber */
  border-radius: var(--gr-radius-full);
  transition: width 0.15s ease;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .password-group > meter::-webkit-meter-even-less-good-value {
  background: #dc2626;       /* red */
  border-radius: var(--gr-radius-full);
  transition: width 0.15s ease;
}
/* Firefox track + fill. */
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .password-group > meter::-moz-meter-bar {
  background: var(--gr-green);
  border-radius: var(--gr-radius-full);
}
/* Firefox doesn't expose level-specific pseudo-elements, so we use
   attribute selectors to switch the bar colour by value range.
   Joomla's meter has low=40 high=99 optimum=100 by default. */
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .password-group > meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background: #f59e0b;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .password-group > meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: #dc2626;
}

/* The strength-label container. Joomla writes "Weak" / "Medium" /
   "Strong" etc. into it via JS. */
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .password-group > [id^="password-"] {
  margin: 4px 0 0 0;
  font-family: var(--gr-font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--gr-slate-500);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-height: 14px;          /* reserve space so the layout doesn't jump */
}

/* Alerts (e.g. the "You do not have a token yet" notice in the
   Joomla API Token fieldset). Replace the stock Bootstrap alert with
   the design-system look. */
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .alert {
  margin: 0;
  padding: 12px 14px;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  line-height: 1.5;
  border-radius: var(--gr-radius-sm);
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .alert.alert-warning {
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .alert.alert-info {
  background-color: var(--gr-slate-50);
  border: 1px solid var(--gr-slate-200);
  color: var(--gr-slate-700);
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .alert.alert-danger,
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .alert.alert-error {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) .alert.alert-success {
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: var(--gr-green-dark);
}

/* Passkey / WebAuthn plugin section.
   Rendered by plg_system_webauthn inside #plg_system_webauthn-management-interface.
   Style the table + the "Add New Passkey" button consistently with the
   rest of the design system. */
body:is(.view-profile.layout-edit, .view-login) .plg_system_webauthn {
  font-family: var(--gr-font-sans);
}
body:is(.view-profile.layout-edit, .view-login) .plg_system_webauthn .table {
  width: 100%;
  margin: 0 0 12px 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  color: var(--gr-slate-700);
}
body:is(.view-profile.layout-edit, .view-login) .plg_system_webauthn .table thead {
  background-color: var(--gr-slate-50);
}
body:is(.view-profile.layout-edit, .view-login) .plg_system_webauthn .table thead.table-dark {
  /* defeat Bootstrap's dark thead variant — we want slate-50 to match
     the rest of the design system */
  --bs-table-bg: var(--gr-slate-50);
  --bs-table-color: var(--gr-slate-500);
  background-color: var(--gr-slate-50);
}
body:is(.view-profile.layout-edit, .view-login) .plg_system_webauthn .table th,
body:is(.view-profile.layout-edit, .view-login) .plg_system_webauthn .table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--gr-slate-100);
  background-image: none;
}
body:is(.view-profile.layout-edit, .view-login) .plg_system_webauthn .table th {
  font-size: 11px;
  font-weight: 600;
  color: var(--gr-slate-500);
  background-color: var(--gr-slate-50);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom-color: var(--gr-slate-200);
}
body:is(.view-profile.layout-edit, .view-login) .plg_system_webauthn .table td {
  background-color: #ffffff;
}
/* "Add New Passkey" button — green pill (Bootstrap renders it as
   .btn.btn-success.w-100; override the full-width and the BS-green
   palette to match our brand-green pills). */
body:is(.view-profile.layout-edit, .view-login) .plg_system_webauthn .btn,
body:is(.view-profile.layout-edit, .view-login) .plg_system_webauthn .btn.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  width: auto;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  background-color: var(--gr-green);
  color: #ffffff;
  border: 1px solid var(--gr-green);
  border-radius: var(--gr-radius-full);
  text-transform: none;
  text-decoration: none;
  box-shadow: 0 1px 2px 0 rgba(34, 197, 94, 0.18);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
body:is(.view-profile.layout-edit, .view-login) .plg_system_webauthn .btn:hover,
body:is(.view-profile.layout-edit, .view-login) .plg_system_webauthn .btn.btn-success:hover {
  background-color: var(--gr-green-dark);
  border-color: var(--gr-green-dark);
  color: #ffffff;
}

/* ----- 2-column grid layout for the "Fields" custom fieldset -----
   Identify it by content (it contains the first-name field — note
   Joomla converts dashes in field names to underscores in IDs, so
   `jform[com_fields][first-name]` → id="jform_com_fields_first_name").
   Fields inside this fieldset arrange as a 2-column grid; textareas
   and the long address-line / TRFCounties / readonly hash fields
   span both columns. ----- */
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) fieldset:has(#jform_com_fields_first_name) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 14px;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) fieldset:has(#jform_com_fields_first_name) > legend,
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) fieldset:has(#jform_com_fields_first_name) > p {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) fieldset:has(#jform_com_fields_first_name) > .control-group {
  margin: 0;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) fieldset:has(#jform_com_fields_first_name) > .control-group:has(textarea),
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) fieldset:has(#jform_com_fields_first_name) > .control-group:has(select.form-select),
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) fieldset:has(#jform_com_fields_first_name) > .control-group:has(#jform_com_fields_1st_line_of_address),
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) fieldset:has(#jform_com_fields_first_name) > .control-group:has(#jform_com_fields_2nd_line_of_address),
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) fieldset:has(#jform_com_fields_first_name) > .control-group:has(.form-check) {
  grid-column: 1 / -1;
}

/* ----- Interests fieldset — grid layout for the checkbox group.
   The Joomla list-field renders each <input id="..._interests0/1/2/...">
   inside a `.form-check.form-check-inline` div, with NO `.controls`
   wrapper — the divs are direct children of the fieldset. Put the
   grid on the fieldset itself; the <legend> and <p> description are
   styled to span the full grid row. ----- */
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) fieldset:has(#jform_com_fields_interests0) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  column-gap: 16px;
  row-gap: 6px;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) fieldset:has(#jform_com_fields_interests0) > legend,
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) fieldset:has(#jform_com_fields_interests0) > p {
  grid-column: 1 / -1;
}
body:is(.view-profile.layout-edit, .view-login) :is(.com-users-profile__edit-form, .com-users-login__form) fieldset:has(#jform_com_fields_interests0) > .form-check {
  margin: 0;
}

/* ============================================================================
   END USER PROFILE EDIT
   ============================================================================ */


/* ============================================================================
   ============================================================================
   LOGIN PAGE (com_users / view-login)
   Layout: centered narrow card (440px wide) on the slate-50 page bg,
   with "Login" h1 centered above and the form fields stacked.
   Form-control / input-group / password-toggle / password-strength
   chrome is shared with the Profile Edit page (the rules above are
   widened to body:is(.view-profile.layout-edit, .view-login)). Rules
   below only add the login-specific layout + the bespoke pieces
   (Passkey login button, Login submit, login-helper bottom links).
   ============================================================================
   ============================================================================ */

body.view-login {
  background-color: var(--gr-slate-50);
  color: var(--gr-slate-800);
  font-family: var(--gr-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Outer wrapper — narrow centered column. */
body.view-login .com-users-login {
  max-width: 440px;
  margin: 24px auto;
  padding: 0 16px;
}
/* Defeat the Bootstrap `.row .justify-content-center > .col-lg-4`
   that's currently constraining the form to 1/3 of a 12-column grid;
   we want the centered .com-users-login wrapper above to drive width. */
body.view-login .com-users-login > .row {
  margin: 0;
}
body.view-login .com-users-login > .row > [class*="col-"] {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  padding: 0;
}

/* Page heading "Login" */
body.view-login .com-users-login .page-header {
  margin: 0 0 20px 0;
  padding: 0;
  border: none;
  text-align: center;
}
body.view-login .com-users-login .page-header h1 {
  margin: 0;
  font-family: var(--gr-font-display);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--gr-slate-900);
}

/* The form itself = a white card. Selector uses the form's ID so it
   beats the widened profile-form rule above (which is :is(.view-profile,
   .view-login) :is(.com-users-profile__edit-form, .com-users-login__form)
   = 3 classes, and explicitly sets padding:0 because profile-edit
   wants each fieldset to be its own card — not what we want here). */
body.view-login #com-users-login__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 28px 24px 28px;
  margin: 0;
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-100);
  border-radius: var(--gr-radius-lg);
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04),
              0 4px 12px -2px rgba(15, 23, 42, 0.06);
}

/* Labels inside the login form — Joomla uses bare <label> not
   wrapped in .control-label here, and emits each field as a `.mb-3`
   block with the <label> as a direct child. */
body.view-login .com-users-login__form > .mb-3 > label,
body.view-login .com-users-login__form .mb-3 > label {
  display: block;
  margin: 0 0 6px 0;
  font-family: var(--gr-font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--gr-slate-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
body.view-login .com-users-login__form label.required .star {
  color: var(--gr-green-dark);
  margin-left: 2px;
}

/* The Joomla form-horizontal/well shell — strip the inherited
   Bootstrap-2 chrome (already done by the design-system form rules
   but emphasise here for clarity). */
body.view-login .com-users-login__form.form-horizontal,
body.view-login .com-users-login__form.well {
  background: #ffffff;
  border: 1px solid var(--gr-slate-100);
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04),
              0 4px 12px -2px rgba(15, 23, 42, 0.06);
}

/* "Remember me" row. */
body.view-login .com-users-login__remember {
  margin: 4px 0;
}
body.view-login .com-users-login__remember .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
}
body.view-login .com-users-login__remember .form-check-input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--gr-green);
  cursor: pointer;
}
body.view-login .com-users-login__remember .form-check-label {
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gr-slate-700);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  cursor: pointer;
}

/* Submit buttons: the primary "Log in" + the secondary "Sign in
   with a passkey". Joomla emits each in its own .control-group >
   .mb-3 wrapper. */
body.view-login .com-users-login__submit {
  margin: 4px 0 0 0;
}
body.view-login .com-users-login__submit .mb-3 {
  margin: 0;
}
body.view-login .com-users-login__submit + .com-users-login__submit {
  margin-top: 8px;
}
body.view-login .com-users-login__submit .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  width: 100%;
  font-family: var(--gr-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--gr-radius-full);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, box-shadow 0.15s ease;
}
body.view-login .com-users-login__submit .btn-primary {
  background-color: var(--gr-green);
  color: #ffffff;
  border-color: var(--gr-green);
  box-shadow: 0 1px 2px 0 rgba(34, 197, 94, 0.18);
}
body.view-login .com-users-login__submit .btn-primary:hover {
  background-color: var(--gr-green-dark);
  border-color: var(--gr-green-dark);
}
/* Passkey button — outline ghost style with the passkey SVG icon
   sized properly. */
body.view-login .com-users-login__submit .plg_system_webauthn_login_button,
body.view-login .com-users-login__submit .btn-secondary {
  background-color: #ffffff;
  color: var(--gr-slate-700);
  border-color: var(--gr-slate-200);
  box-shadow: none;
}
body.view-login .com-users-login__submit .plg_system_webauthn_login_button:hover,
body.view-login .com-users-login__submit .btn-secondary:hover {
  background-color: var(--gr-slate-50);
  color: var(--gr-slate-900);
  border-color: var(--gr-slate-300);
}
body.view-login .com-users-login__submit .plg_system_webauthn_login_button svg {
  width: 18px;
  height: 18px;
  min-height: 18px;     /* defeat any inherited line-height-driven stretch */
  max-height: 18px;
  fill: currentColor;
  flex: 0 0 18px;
  align-self: center;
  display: inline-block;
}
/* The plugin's CSS sets `fill: white` on the inner <g> and shape
   children to suit its default coloured button. Override with
   currentColor so the icon takes the button's text colour
   (slate-700 on the outline-ghost variant). */
body.view-login .com-users-login__submit .plg_system_webauthn_login_button svg g,
body.view-login .com-users-login__submit .plg_system_webauthn_login_button svg circle,
body.view-login .com-users-login__submit .plg_system_webauthn_login_button svg path {
  fill: currentColor;
}

/* Reverse the visual order so "Sign in with a passkey" sits below
   the primary "Log in" button (the markup renders passkey FIRST). */
body.view-login .com-users-login__form {
  /* The form is already display:flex / column. Reorder via flex order. */
}
body.view-login .com-users-login__form .com-users-login__submit:has(.btn-primary) {
  order: 10;
}
body.view-login .com-users-login__form .com-users-login__submit:has(.plg_system_webauthn_login_button) {
  order: 20;
}

/* Helper "Forgot your username / password? · Don't have an account?"
   list — Joomla renders these as a <ul class="com-users-login__options
   list-group"> with each <li><a class="...__reset/__remind/__register
   list-group-item"></li>. Strip the BS list-group chrome and stack
   them centered below the form. */
body.view-login .com-users-login__options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 16px 0 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 0;
}
body.view-login .com-users-login__options > li,
body.view-login .com-users-login__options .list-group-item {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  list-style: none;
  text-align: center;
}
body.view-login .com-users-login__options a {
  display: inline;
  color: var(--gr-green-dark);
  text-decoration: none;
  font-weight: 500;
  background: transparent;
  padding: 0;
}
body.view-login .com-users-login__options a:hover {
  text-decoration: underline;
}

/* ============================================================================
   END LOGIN PAGE
   ============================================================================ */


/* ============================================================================
   ============================================================================
   TILES MANAGEMENT DASHBOARD (mapboxfrontendlistview)
   --------------------------------------------------------------------------
   The markup in components/com_trfgrn/views/mapboxfrontendlistview/tmpl/
   markup.php is Bootstrap-5 native (.card / .nav-tabs / .btn / .alert /
   .list-group). The JS hooks off those class names so we don't rewrite the
   markup — we re-skin BS5 inside body.view-mapboxfrontendlistview only.
   ============================================================================
   ============================================================================ */

body.view-mapboxfrontendlistview #tiles_admin_dashboard {
  margin-top: 1.5rem !important;
  margin-bottom: 2rem !important;
}

/* Card shell */
body.view-mapboxfrontendlistview #tiles_admin_dashboard .card {
  background: #fff;
  border: 1px solid var(--gr-slate-200);
  border-radius: var(--gr-radius-lg);
  box-shadow: var(--gr-shadow-glass);
  overflow: hidden;
}

/* Card header */
body.view-mapboxfrontendlistview #tiles_admin_dashboard .card-header {
  background: var(--gr-slate-50) !important;
  border-bottom: 1px solid var(--gr-slate-200);
  padding: 1.25rem 1.5rem;
}
body.view-mapboxfrontendlistview #tiles_admin_dashboard .card-header h4 {
  color: var(--gr-slate-900);
  font-size: 1.5rem;
  margin: 0;
  line-height: 1.2;
}
body.view-mapboxfrontendlistview #tiles_admin_dashboard .card-header .text-muted {
  color: var(--gr-slate-500) !important;
  font-family: var(--gr-font-sans);
}

/* Limbo-status badge in card-header */
body.view-mapboxfrontendlistview #tiles_admin_dashboard .card-header .badge.bg-secondary {
  background: var(--gr-green-soft) !important;
  color: var(--gr-green-dark) !important;
  border: 1px solid var(--gr-green-soft-2);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.4em 0.85em;
  border-radius: var(--gr-radius-full);
  font-family: var(--gr-font-sans);
}

/* Tabs strip */
body.view-mapboxfrontendlistview #tileTabs.nav-tabs {
  border-bottom: 1px solid var(--gr-slate-200);
  padding: 0.5rem 1.5rem 0;
  margin: 0;
  gap: 0.25rem;
}
body.view-mapboxfrontendlistview #tileTabs .nav-link {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--gr-slate-500);
  font-family: var(--gr-font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
  border-radius: 0;
  margin-bottom: -1px;
  transition: color 0.12s ease, border-color 0.12s ease;
}
body.view-mapboxfrontendlistview #tileTabs .nav-link:hover {
  color: var(--gr-green-dark);
  border-bottom-color: var(--gr-green-soft-2);
}
body.view-mapboxfrontendlistview #tileTabs .nav-link.active {
  color: var(--gr-green-dark);
  background: transparent;
  border-bottom-color: var(--gr-green);
}
body.view-mapboxfrontendlistview #tileTabs .nav-link i {
  color: inherit;
}

/* Tab content body */
body.view-mapboxfrontendlistview .tab-content {
  padding: 1.75rem !important;
}
body.view-mapboxfrontendlistview .tab-content h5 {
  color: var(--gr-slate-900);
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}
body.view-mapboxfrontendlistview .tab-content p.text-muted {
  color: var(--gr-slate-600) !important;
  font-family: var(--gr-font-sans);
}

/* Status alert (#tiles_rebuild_status) */
body.view-mapboxfrontendlistview #tiles_rebuild_status {
  border: 1px solid;
  border-radius: var(--gr-radius-md);
  padding: 1rem 1.25rem;
  box-shadow: none !important;
  font-family: var(--gr-font-sans);
}
body.view-mapboxfrontendlistview #tiles_rebuild_status.alert-info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}
body.view-mapboxfrontendlistview #tiles_rebuild_status.alert-success {
  background: var(--gr-green-soft);
  border-color: var(--gr-green-soft-2);
  color: var(--gr-green-dark);
}
body.view-mapboxfrontendlistview #tiles_rebuild_status.alert-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
body.view-mapboxfrontendlistview #tiles_rebuild_status .spinner-border {
  color: currentColor;
}
body.view-mapboxfrontendlistview #tiles_rebuild_status .badge {
  background: rgba(255, 255, 255, 0.6) !important;
  color: inherit !important;
  border: 1px solid currentColor;
  font-family: var(--gr-font-sans);
}
body.view-mapboxfrontendlistview #tiles_rebuild_status .text-muted {
  color: currentColor !important;
  opacity: 0.7;
}

/* "Start Full Rebuild" primary button */
body.view-mapboxfrontendlistview #tiles_rebuild_btn.btn-primary {
  background: var(--gr-green);
  border: 1px solid var(--gr-green);
  color: #fff;
  font-family: var(--gr-font-sans);
  font-weight: 600;
  border-radius: var(--gr-radius-full);
  padding: 0.8rem 1.75rem !important;
  font-size: 1rem !important;
  box-shadow: var(--gr-shadow-sm);
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}
body.view-mapboxfrontendlistview #tiles_rebuild_btn.btn-primary:hover:not(:disabled) {
  background: var(--gr-green-dark);
  border-color: var(--gr-green-dark);
  box-shadow: 0 4px 12px var(--gr-green-soft-2);
  transform: translateY(-1px);
}
body.view-mapboxfrontendlistview #tiles_rebuild_btn.btn-primary:disabled {
  background: var(--gr-slate-300);
  border-color: var(--gr-slate-300);
  cursor: not-allowed;
  opacity: 0.8;
  transform: none;
  box-shadow: none;
}
body.view-mapboxfrontendlistview #tiles_rebuild_btn.btn-primary:focus-visible {
  outline: 3px solid var(--gr-green-soft-2);
  outline-offset: 2px;
}

/* Details sidebar (.bg-light box) */
body.view-mapboxfrontendlistview .tab-pane .bg-light {
  background: var(--gr-slate-50) !important;
  border: 1px solid var(--gr-slate-200) !important;
  border-radius: var(--gr-radius-md) !important;
  padding: 1.25rem !important;
}
body.view-mapboxfrontendlistview .tab-pane .bg-light h6 {
  color: var(--gr-slate-700);
  font-family: var(--gr-font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
  font-weight: 600;
}
body.view-mapboxfrontendlistview .tab-pane .bg-light ul li {
  font-size: 0.9rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--gr-slate-200);
}
body.view-mapboxfrontendlistview .tab-pane .bg-light ul li:last-child {
  border-bottom: 0;
}
body.view-mapboxfrontendlistview .tab-pane .bg-light .text-muted {
  color: var(--gr-slate-500) !important;
}
body.view-mapboxfrontendlistview .tab-pane .bg-light .fw-bold {
  color: var(--gr-slate-800);
  font-variant-numeric: tabular-nums;
}

/* History list (#tiles_rebuild_history) */
body.view-mapboxfrontendlistview #tiles_rebuild_history_wrap {
  border: 1px solid var(--gr-slate-200) !important;
  border-radius: var(--gr-radius-md) !important;
  box-shadow: none !important;
  overflow: hidden;
}
body.view-mapboxfrontendlistview #tiles_rebuild_history .list-group-item {
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--gr-slate-200);
  padding: 1rem 1.25rem;
}
body.view-mapboxfrontendlistview #tiles_rebuild_history .list-group-item:last-child {
  border-bottom: 0;
}
body.view-mapboxfrontendlistview #tiles_rebuild_history .list-group-item:hover {
  background: var(--gr-slate-50);
}
body.view-mapboxfrontendlistview #tiles_rebuild_history .fw-bold {
  color: var(--gr-slate-800);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.95rem;
  font-weight: 600;
}
body.view-mapboxfrontendlistview #tiles_rebuild_history .text-muted {
  color: var(--gr-slate-500) !important;
  font-family: var(--gr-font-sans);
}

/* Rollback button */
body.view-mapboxfrontendlistview .tiles_rollback_btn.btn-outline-warning {
  background: #fff;
  border: 1px solid #fcd34d;
  color: #92400e;
  font-family: var(--gr-font-sans);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--gr-radius-full);
  box-shadow: none !important;
  transition: background 0.12s ease, color 0.12s ease;
}
body.view-mapboxfrontendlistview .tiles_rollback_btn.btn-outline-warning:hover {
  background: #fef3c7;
  color: #78350f;
  border-color: #f59e0b;
}
body.view-mapboxfrontendlistview #tiles_rebuild_history .p-4.text-center {
  color: var(--gr-slate-500);
  padding: 1.5rem !important;
}

/* Card footer */
body.view-mapboxfrontendlistview #tiles_admin_dashboard .card-footer {
  background: var(--gr-slate-50) !important;
  border-top: 1px solid var(--gr-slate-200);
  color: var(--gr-slate-500) !important;
  font-family: var(--gr-font-sans);
  padding: 1rem 1.5rem;
  font-size: 0.85rem;
}

/* Bootstrap tooltip — use design-system look */
body.view-mapboxfrontendlistview ~ .tooltip .tooltip-inner,
body.view-mapboxfrontendlistview .tooltip .tooltip-inner {
  background: var(--gr-slate-900);
  font-family: var(--gr-font-sans);
  font-size: 0.82rem;
  border-radius: var(--gr-radius-sm);
  max-width: 360px;
  padding: 0.6rem 0.8rem;
  line-height: 1.45;
}

/* Limbo Table tab — Bootstrap 5 .table sat inside a wrapper
   div.border.rounded.bg-white.shadow-sm. Reskin both to use the
   design-system tokens. */
body.view-mapboxfrontendlistview #limbo .border.rounded {
  border: 1px solid var(--gr-slate-200) !important;
  border-radius: var(--gr-radius-md) !important;
  box-shadow: var(--gr-shadow-sm) !important;
  background: #ffffff !important;
}
body.view-mapboxfrontendlistview #limbo .table {
  margin: 0;
  font-family: var(--gr-font-sans);
  font-size: 0.92rem;
  color: var(--gr-slate-700);
  border-collapse: separate;
  border-spacing: 0;
}
body.view-mapboxfrontendlistview #limbo .table thead.table-light th {
  background: var(--gr-slate-100);
  color: var(--gr-slate-700);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 0;
  border-bottom: 1px solid var(--gr-slate-200);
  padding: 10px 14px;
  vertical-align: middle;
}
body.view-mapboxfrontendlistview #limbo .table tbody td {
  background: #ffffff;
  border: 0;
  border-bottom: 1px solid var(--gr-slate-200);
  padding: 10px 14px;
  font-size: 0.92rem;
  color: var(--gr-slate-700);
  vertical-align: middle;
}
body.view-mapboxfrontendlistview #limbo .table tbody tr:last-child td {
  border-bottom: 0;
}
/* Defeat Bootstrap's table-striped overlay if it's ever toggled on. */
body.view-mapboxfrontendlistview #limbo .table.table-striped tbody tr:nth-of-type(odd) td,
body.view-mapboxfrontendlistview #limbo .table.table-hover tbody tr:hover td {
  --bs-table-bg-type: transparent;
  background-image: none;
}
body.view-mapboxfrontendlistview #limbo .table.table-hover tbody tr:hover td {
  background: var(--gr-green-soft);
  color: var(--gr-slate-900);
}
/* GRMUID column — monospace + brand-green anchor for the link */
body.view-mapboxfrontendlistview #limbo .table tbody td:first-child {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-weight: 600;
}
/* Anchor links in cells carry Bootstrap utility classes `fw-bold
   text-primary` which use !important — we have to match. */
body.view-mapboxfrontendlistview #limbo .table tbody td a,
body.view-mapboxfrontendlistview #limbo .table tbody td a.text-primary {
  color: var(--gr-green-dark) !important;
  text-decoration: none;
  font-weight: 600 !important;
  transition: color 0.12s ease;
}
body.view-mapboxfrontendlistview #limbo .table tbody td a:hover,
body.view-mapboxfrontendlistview #limbo .table tbody td a.text-primary:hover {
  color: var(--gr-green) !important;
  text-decoration: underline;
}
/* Numeric / date columns get tabular-nums so they line up cleanly. */
body.view-mapboxfrontendlistview #limbo .table tbody td:last-child {
  font-variant-numeric: tabular-nums;
  color: var(--gr-slate-500);
  font-size: 0.86rem;
  white-space: nowrap;
}

/* ============================================================================
   END TILES MANAGEMENT DASHBOARD
   ============================================================================ */


/* ============================================================================
   ============================================================================
   PER-PAGE OVERRIDES
   --------------------------------------------------------------------------
   Page-specific tweaks scoped via Joomla's body classes. Joomla adds an
   `itemid-N` class to <body> for every page; we use that to scope rules to
   a single menu item without touching its template. Add new pages as their
   own block below the homepage.
   ============================================================================
   ============================================================================ */

/* ----- Page-builder pages with members-only gating ------------------------
   Itemid=1925 (page id=42), Itemid=2010 (page id=49),
   Itemid=2011 (page id=48). Behind login so we can't live-inspect from
   a guest session; rule is broad: every button-like element gets the
   rounded-full pill radius that's now the canonical look across the site. */
body.itemid-1925 button,
body.itemid-1925 .btn,
body.itemid-1925 .sppb-btn,
body.itemid-1925 input[type="button"],
body.itemid-1925 input[type="submit"],
body.itemid-2010 button,
body.itemid-2010 .btn,
body.itemid-2010 .sppb-btn,
body.itemid-2010 input[type="button"],
body.itemid-2010 input[type="submit"],
body.itemid-2011 button,
body.itemid-2011 .btn,
body.itemid-2011 .sppb-btn,
body.itemid-2011 input[type="button"],
body.itemid-2011 input[type="submit"] {
  border-radius: var(--gr-radius-full);
}


/* ----- com_trfgrn admin/utility views: tilesusage / gpx-tool / mapbox -----
   All three were styled into design-system cards earlier. Round their
   buttons to the canonical pill shape too. Targets every BEM-named
   action button on those views plus generic .btn / button. */
body.view-tilesusagefrontendlistview button,
body.view-tilesusagefrontendlistview .btn,
body.view-tilesusagefrontendlistview .sppb-btn,
body.view-tilesusagefrontendlistview .trfgrn-tiles-usage__submit,
body.view-tilesusagefrontendlistview input[type="button"],
body.view-tilesusagefrontendlistview input[type="submit"],
body.view-gpxtoolfrontendview button,
body.view-gpxtoolfrontendview .btn,
body.view-gpxtoolfrontendview .sppb-btn,
body.view-gpxtoolfrontendview .trfgrn-gpx-tool__extract-btn,
body.view-gpxtoolfrontendview .trfgrn-gpx-tool__copy-btn,
body.view-gpxtoolfrontendview input[type="button"],
body.view-gpxtoolfrontendview input[type="submit"],
body.view-mapboxfrontendlistview button,
body.view-mapboxfrontendlistview .btn,
body.view-mapboxfrontendlistview .sppb-btn,
body.view-mapboxfrontendlistview input[type="button"],
body.view-mapboxfrontendlistview input[type="submit"] {
  border-radius: var(--gr-radius-full);
}
/* Exception: the JSON/WKT/CSV segmented toggle on the GPX tool is
   a tight 3-button pill group inside a single track — fully round
   would split the segments visually. Keep the small inner radius. */
body.view-gpxtoolfrontendview .trfgrn-gpx-tool__display-btn {
  border-radius: calc(var(--gr-radius-sm) - 2px);
}
/* Same logic for the GPX tool's file-input dashed dropzone — it's
   a container, not a button. Restore its design-token radius. */
body.view-gpxtoolfrontendview .trfgrn-gpx-tool__file-input {
  border-radius: var(--gr-radius-sm);
}
/* And the mapbox dashboard's tab nav-links — they live under
   .nav-tabs and have a bottom-border underline indicator, not a pill
   shape. Keep them rectangular. */
body.view-mapboxfrontendlistview #tileTabs .nav-link {
  border-radius: 0;
}


/* ----- Homepage (Itemid=101) ------------------------------------------------ */

/* All buttons on the homepage use the rounded-full pill radius — matches
   the brand "Register" header pill the user wants as the canonical look. */
body.itemid-101 button,
body.itemid-101 .btn,
body.itemid-101 .sppb-btn,
body.itemid-101 input[type="button"],
body.itemid-101 input[type="submit"] {
  border-radius: var(--gr-radius-full);
}

/* The green "The Project" / section-label pills used as inline headings.
   The legacy rule renders these as `display: inline`, so the border-radius
   wouldn't visibly round the corners — bump to inline-block for it to land. */
body.itemid-101 .reversed-boxed {
  display: inline-block;
  border-radius: 10px;
}

/* ----- TRF Registration (Itemid=1493 / com_rsform / formId=3) -------------
   Mirrors the com_users login page treatment: slate-50 page bg, centred
   Arvo heading, fields packaged into a white card with slate-100 border
   and a subtle shadow. The form has TWO sections (TRF Members + Guest
   Members), each with its own H4 and submit — so each section gets its
   own card stacked vertically. */

/* Page chrome */
body.itemid-1493 {
  background-color: var(--gr-slate-50);
  color: var(--gr-slate-800);
  font-family: var(--gr-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* "Register to start" page heading */
body.itemid-1493 #userForm > h2 {
  font-family: var(--gr-font-display);
  font-weight: 700;
  text-align: center;
  margin: 0 0 24px 0;
  color: var(--gr-slate-900);
}

/* Section heading "TRF Members" / "Guest Members" — emits inside the card */
body.itemid-1493 #userForm h4 {
  font-family: var(--gr-font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: var(--gr-slate-900);
}

/* Constrain + centre the form. The legacy markup nests inside
   .sppb-row-container.registration-members → .row → .sppb-col-md-12
   → .sppb-column.max-900 — we keep that as our centred wrapper but
   tighten its max-width. */
body.itemid-1493 #userForm .registration-members {
  max-width: 720px;
  margin: 0 auto;
}
body.itemid-1493 #userForm .registration-members .max-900 {
  max-width: 100%;
}

/* Each "section" of the form lives inside an sppb-addon-wrapper that
   contains a chain of .form-row blocks. We make THAT the white card,
   so the H4 + fields + submit for one user type sit together. */
body.itemid-1493 #userForm .sppb-addon-wrapper {
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-100);
  border-radius: var(--gr-radius-lg);
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04),
              0 4px 12px -2px rgba(15, 23, 42, 0.06);
  padding: 28px 28px 24px 28px;
  margin: 0 0 24px 0;
}

/* Stack ALL field rows as a single column (the legacy markup pairs
   First Name + Surname / Email + Confirm Email into col-md-6 cells,
   which doesn't match the login form's stacked look the user asked
   for). Force every column to full width so each label+input lives
   on its own row. */
body.itemid-1493 #userForm .form-row {
  display: block;
  margin: 0 0 4px 0;
  padding: 0;
}
body.itemid-1493 #userForm .form-row > [class*="col-"],
body.itemid-1493 #userForm .form-row > .col-md-6,
body.itemid-1493 #userForm .form-row > .col-md-12 {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  padding: 0;
}

/* Vertical breathing room between each label+input block. Uses
   .rsform-block.form-group (Joomla emits both classes on the same
   element) so the rule's specificity beats anything keyed off either
   class alone. */
body.itemid-1493 #userForm .rsform-block.form-group {
  margin: 0 0 16px 0;
}
/* Section "title" rows (the H4 holders) take a slightly larger gap. */
body.itemid-1493 #userForm .rsform-block-title-member-form.form-group,
body.itemid-1493 #userForm .rsform-block-title-guest-form.form-group {
  margin-bottom: 18px;
}
/* The submit row sits at the end of each card — no extra bottom gap. */
body.itemid-1493 #userForm .rsform-block-register.form-group,
body.itemid-1493 #userForm .rsform-block-greg.form-group {
  margin: 6px 0 0 0;
}

/* Labels — 11px uppercase Inter, slate-500. Identical to login. */
body.itemid-1493 #userForm .formControlLabel {
  display: block;
  flex: none;
  max-width: none;
  width: auto;
  margin: 0 0 6px 0;
  padding: 0;
  font-family: var(--gr-font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--gr-slate-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: left;
}
/* The label sits inside a `.row .col-sm-3` — defeat the Bootstrap
   col-sm-3 width so the label sits ABOVE the input, not beside it. */
body.itemid-1493 #userForm .form-group.row > .formControlLabel {
  flex: 0 0 100%;
  max-width: 100%;
}
body.itemid-1493 #userForm .form-group.row > .formControls,
body.itemid-1493 #userForm .form-group.row > [class*="col-sm-"] {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0;
}

/* Inputs / passwords / selects / textareas — same chrome as
   profile-edit/login. Overrides the Guest section's white-on-light
   invisible border too. */
body.itemid-1493 #userForm .rsform-input-box,
body.itemid-1493 #userForm .rsform-password-box,
body.itemid-1493 #userForm .rsform-select-box,
body.itemid-1493 #userForm input.form-control,
body.itemid-1493 #userForm select.form-control,
body.itemid-1493 #userForm textarea.form-control {
  display: block;
  width: 100%;
  height: auto;
  padding: 9px 12px;
  margin: 0;
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-200);
  border-radius: var(--gr-radius-sm);
  font-family: var(--gr-font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gr-slate-900);
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
              background-color 0.15s ease;
}
body.itemid-1493 #userForm input.form-control:focus,
body.itemid-1493 #userForm select.form-control:focus,
body.itemid-1493 #userForm textarea.form-control:focus,
body.itemid-1493 #userForm .rsform-input-box:focus,
body.itemid-1493 #userForm .rsform-password-box:focus,
body.itemid-1493 #userForm .rsform-select-box:focus {
  outline: none;
  border-color: var(--gr-green);
  box-shadow: 0 0 0 3px var(--gr-green-soft);
}
body.itemid-1493 #userForm input.form-control::placeholder,
body.itemid-1493 #userForm textarea.form-control::placeholder {
  color: var(--gr-slate-400);
  opacity: 1;
}

/* Checkboxes (T&Cs / cookies) */
body.itemid-1493 #userForm .form-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0;
  margin: 6px 0;
}
body.itemid-1493 #userForm .form-check-input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 2px 0 0 0;
  border-radius: 4px;
  accent-color: var(--gr-green);
  cursor: pointer;
}
body.itemid-1493 #userForm .form-check-label {
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gr-slate-700);
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.5;
  cursor: pointer;
}

/* Validation message — hide the inert "Invalid Input" placeholder
   until rsform flips it to .formError on submit. */
body.itemid-1493 #userForm .formValidation .formNoError {
  display: none;
}
body.itemid-1493 #userForm .formValidation .formError {
  display: inline-block;
  font-family: var(--gr-font-sans);
  font-size: 12px;
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 4px 10px;
  margin-top: 6px;
}

/* Every button on the page gets the rounded-full pill radius — submit,
   sppb-btn, anchor-as-button, native button. Matches the "Register"
   header pill the user wants as the canonical button look. */
body.itemid-1493 button,
body.itemid-1493 .btn,
body.itemid-1493 .sppb-btn,
body.itemid-1493 input[type="button"],
body.itemid-1493 input[type="submit"] {
  border-radius: var(--gr-radius-full);
}

/* Submit "Register" — full-width green pill matching login.
   (The register column wrapper is widened via the general "every
   col-md-* in the form-row becomes 100%" rule above.) */
body.itemid-1493 #userForm .rsform-submit-button.btn.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 11px 18px;
  margin-top: 4px;
  background-color: var(--gr-green);
  border: 1px solid var(--gr-green);
  color: #ffffff;
  font-family: var(--gr-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--gr-radius-full);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: 0 1px 2px 0 rgba(34, 197, 94, 0.18);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
body.itemid-1493 #userForm .rsform-submit-button.btn.btn-primary:hover {
  background-color: var(--gr-green-dark);
  border-color: var(--gr-green-dark);
  color: #ffffff;
}
body.itemid-1493 #userForm .rsform-submit-button.btn.btn-primary:focus-visible {
  outline: 3px solid var(--gr-green-soft-2);
  outline-offset: 2px;
}

/* "Public vs Members" comparison list-group (#sppb-addon-1607136640862).
   It's a <ul.list-group> of <li> rows with 3 columns inside (Feature /
   Public / Members). We turn the whole list into a single rounded card
   with zebra rows and a typed-table feel — keeping the existing mustard
   header colour as the brand cue. */
body.itemid-1493 #sppb-addon-1607136640862 .list-group {
  list-style: none;
  margin: 0 0 16px 0;
  padding: 0;
  border: 1px solid var(--gr-slate-200);
  border-radius: var(--gr-radius-md);
  overflow: hidden;
  box-shadow: var(--gr-shadow-sm);
  background: #ffffff;
}
body.itemid-1493 #sppb-addon-1607136640862 .list-group-item {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--gr-slate-200);
  padding: 12px 16px;
  font-family: var(--gr-font-sans);
  font-size: 14px;
  color: var(--gr-slate-800);
}
body.itemid-1493 #sppb-addon-1607136640862 .list-group-item:last-child {
  border-bottom: 0;
}
/* Header row "Feature / Public / Members" */
body.itemid-1493 #sppb-addon-1607136640862 .list-group-item-mustard {
  background-color: #e7a753;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Zebra rows — keep grey alternating but soften to slate-50 */
body.itemid-1493 #sppb-addon-1607136640862 .list-group-item-secondary {
  background-color: var(--gr-slate-50);
  color: var(--gr-slate-800);
}
/* The inner container/row inherits Bootstrap container padding which
   adds horizontal gutters that misalign the columns. Flatten. */
body.itemid-1493 #sppb-addon-1607136640862 .list-group-item > .container {
  padding: 0;
  margin: 0;
  max-width: none;
}
body.itemid-1493 #sppb-addon-1607136640862 .list-group-item .row {
  margin: 0;
  align-items: center;
}
body.itemid-1493 #sppb-addon-1607136640862 .list-group-item [class*="col-"] {
  padding: 0 6px;
}
/* X marks (the only content in the Public / Members columns) — centred
   and slightly emphasized so they read as ticks. */
body.itemid-1493 #sppb-addon-1607136640862 .list-group-item .col-3 {
  text-align: center;
  font-weight: 600;
  color: var(--gr-green-dark);
}
body.itemid-1493 #sppb-addon-1607136640862 .list-group-item-mustard .col-3 {
  color: #ffffff;
}


/* FAQ accordion (section-id-1599767691379) — design-system polish, brand
   green retained. The legacy look was a flat green box with a 1px grey
   border, cramped 5px header padding, no radius, Roboto bold 14px text,
   and a static chevron that never rotated. */
body.itemid-101 #section-id-1599767691379 .sppb-panel.sppb-panel-modern {
  border: 0;
  border-radius: 10px;
  margin: 0 0 12px;
  overflow: hidden;                 /* clip the button hover bg to the radius */
  box-shadow: var(--gr-shadow-sm);
  transition: box-shadow 0.15s ease;
}
body.itemid-101 #section-id-1599767691379 .sppb-panel.sppb-panel-modern:hover {
  box-shadow: var(--gr-shadow-glass);
}

/* Question button */
body.itemid-101 #section-id-1599767691379 .sppb-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  font-family: var(--gr-font-sans);
  background: transparent;          /* parent panel carries the colour */
  border: 0;
  border-radius: 0;                 /* defer corners to the parent panel */
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease;
}
body.itemid-101 #section-id-1599767691379 .sppb-panel-heading:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
body.itemid-101 #section-id-1599767691379 .sppb-panel-heading:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: -2px;
}

/* Question text */
body.itemid-101 #section-id-1599767691379 .sppb-panel-title {
  font-family: var(--gr-font-sans);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  padding: 0;
  color: #ffffff;
}

/* Chevron — rotates 90° when the panel is open */
body.itemid-101 #section-id-1599767691379 .sppb-toggle-direction {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  opacity: 0.85;
  transition: transform 0.25s ease;
}
body.itemid-101 #section-id-1599767691379 .sppb-panel-heading[aria-expanded="true"] .sppb-toggle-direction {
  transform: rotate(90deg);
}

/* Answer body — soft top divider so the boundary reads when expanded.
   Background stays inherited (green) so the existing white answer text
   continues to render on brand colour as before. */
body.itemid-101 #section-id-1599767691379 .sppb-panel-body {
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--gr-font-sans);
  font-size: 0.95rem;
  line-height: 1.6;
}
body.itemid-101 #section-id-1599767691379 .sppb-panel-body p,
body.itemid-101 #section-id-1599767691379 .sppb-panel-body .sppb-addon-content {
  font-family: var(--gr-font-sans);
}

/* ============================================================================
   END PER-PAGE OVERRIDES
   ============================================================================ */


/* ============================================================================
   UNIFIED MAP SEARCH
   ----------------------------------------------------------------------------
   #map-search lives inside the #search-modal-new modal on both map views.
   One input + a segmented mode control (Location / GRMUID / USRN). The
   guest map renders no mode control — location-only. Driven by mapSearch.js.
   ============================================================================ */

#map-search {
  max-width: 420px;
  margin: 0 auto;
  font-family: var(--gr-font-sans);
}

/* Segmented mode control */
#map-search .map-search__modes {
  display: flex;
  margin-bottom: 10px;
  background: #ffffff;
  border: 1px solid var(--gr-slate-200);
  border-radius: var(--gr-radius-md);
  overflow: hidden;
}

#map-search .map-search__mode {
  flex: 1;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  font-family: var(--gr-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gr-slate-500);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

#map-search .map-search__mode + .map-search__mode {
  border-left: 1px solid var(--gr-slate-200);
}

#map-search .map-search__mode:hover {
  background: var(--gr-slate-50);
}

#map-search .map-search__mode.is-active {
  background: var(--gr-green);
  color: #ffffff;
}

/* Input */
#map-search .map-search__input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid var(--gr-slate-200);
  border-radius: var(--gr-radius-md);
  font-family: var(--gr-font-sans);
  font-size: 15px;
  color: var(--gr-slate-700);
}

#map-search .map-search__input::placeholder {
  color: var(--gr-slate-400);
}

#map-search .map-search__input:focus {
  outline: none;
  border-color: var(--gr-green);
  box-shadow: 0 0 0 3px var(--gr-green-soft-2);
}

/* Results list */
#map-search .map-search__results {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid var(--gr-slate-200);
  border-radius: var(--gr-radius-md);
}

#map-search .map-search__results[hidden] {
  display: none;
}

#map-search .map-search__result {
  padding: 9px 12px;
  font-size: 14px;
  color: var(--gr-slate-700);
  cursor: pointer;
  border-top: 1px solid var(--gr-slate-100);
}

#map-search .map-search__result:first-child {
  border-top: 0;
}

#map-search .map-search__result:hover,
#map-search .map-search__result.is-highlighted {
  background: var(--gr-green);
  color: #ffffff;
}

#map-search .map-search__msg {
  padding: 9px 12px;
  font-size: 13px;
  color: var(--gr-slate-400);
}


/* ============================================================================
   GUEST MAP SEARCH MODAL
   ----------------------------------------------------------------------------
   The shared modal block above is scoped to the member / single-record /
   list views — not the guest map. This block gives the guest map's
   #search-modal-new the same design-system white-card look, so the guest
   and member search modals match. Scoped to that one modal (and high
   enough specificity to beat the guest map's legacy grey rules) so other
   guest-map modals are untouched.
   ============================================================================ */

body.view-grrfrontendguestmapview #search-modal-new .modal-dialog {
  width: auto;
  max-width: 460px;
}

body.view-grrfrontendguestmapview #search-modal-new .modal-content {
  background-color: #ffffff;
  border: 1px solid var(--gr-slate-100);
  border-radius: var(--gr-radius-lg);
  box-shadow: 0 12px 32px -6px rgba(15, 23, 42, 0.18),
              0 4px 12px -2px rgba(15, 23, 42, 0.08);
  font-family: var(--gr-font-sans);
  color: var(--gr-slate-700);
  overflow: hidden;
}

body.view-grrfrontendguestmapview #search-modal-new .modal-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--gr-slate-100);
  background-color: #ffffff;
}

body.view-grrfrontendguestmapview #search-modal-new .modal-title {
  font-family: var(--gr-font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--gr-slate-900);
  margin: 0;
}

body.view-grrfrontendguestmapview #search-modal-new .modal-title i {
  margin-right: 6px;
  color: var(--gr-green-dark);
  font-size: 13px;
}

body.view-grrfrontendguestmapview #search-modal-new .modal-header .close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: -4px -4px -4px auto;
  border: none;
  border-radius: var(--gr-radius-sm);
  background-color: transparent;
  color: var(--gr-slate-500);
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  opacity: 1;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

body.view-grrfrontendguestmapview #search-modal-new .modal-header .close:hover {
  color: var(--gr-slate-900);
  background-color: var(--gr-slate-100);
}

body.view-grrfrontendguestmapview #search-modal-new .modal-header .close span {
  display: block;
  line-height: 1;
}

body.view-grrfrontendguestmapview #search-modal-new .modal-body {
  padding: 20px;
}