a.hyperlink {
  position: relative;
  color: #1279c6;
  text-decoration: none;
}

a.hyperlink:hover {
  color: #2b75ac;
}

/* Deep-link (?view=<id>) target: a brief highlight pulse so the row you were sent to is obvious.
   Applied by window.dtFlashRow() (includes/bottom.php) after scrolling the row into view. */
@keyframes dtDeeplinkFlash {
  0%   { background: rgba(255, 214, 51, .55); }
  60%  { background: rgba(255, 214, 51, .30); }
  100% { background: transparent; }
}
tr.dt-deeplink-flash > td { animation: dtDeeplinkFlash 2.2s ease-out; }

.ui.table tbody td {
    white-space: nowrap;
}

/* Free-text columns opt out of the single-line rule above with class="dt-wrap" (or
   "dt-wrap-2" for a tighter 2-line cap) on the <th>. Why this exists: a long, unwrappable
   cell (e.g. a message Subject) can't shrink, so in the inner-scroll tier — where DataTables
   renders a SEPARATE header table from the body — it forces the body wider than the header,
   the columns drift, and the table bleeds past its container. Letting these columns wrap
   (and break anywhere) collapses their min-width so the table fits and head/body realign.
   Normal-length text wraps fully; very long text clamps to a few lines with an ellipsis so
   rows never blow up. The override out-specifies line 11 (.ui.table tbody td.dt-wrap), so no
   !important is needed. The full text stays in the DOM — search, sort and screen readers see
   it all; only the visual is clipped (the engine adds a hover title when actually clamped). */
.ui.table tbody td.dt-wrap,
.ui.table tbody td.dt-wrap-2 {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* The clamp must sit on an inner box: a <td> is display:table-cell and can't become the
   -webkit-box that -webkit-line-clamp requires without collapsing out of the table layout.
   The engine wraps each dt-wrap cell's contents in this .dt-clamp span on draw. */
.ui.table tbody td.dt-wrap .dt-clamp,
.ui.table tbody td.dt-wrap-2 .dt-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
.ui.table tbody td.dt-wrap-2 .dt-clamp {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
/* Per-cell variant — for a free-text fragment that SHARES a cell with an inline widget (a URL
   copy box, a manage button) that must NOT wrap/clamp. Tagging the whole <th> dt-wrap would clamp
   the widget too; instead wrap ONLY the free-text fragment in <... class="dt-clamp-inline">. It is
   self-contained (does NOT need the <td> to carry dt-wrap) and block-level, so the sibling widget
   keeps its own line. Clamps to 2 lines like dt-wrap-2; full text stays in the DOM (engine adds a
   hover title when actually clamped). */
.ui.table tbody td .dt-clamp-inline {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Inside a Responsive collapsed child row there is no width pressure, so never clamp there —
   the value (copied into the child row markup) must show in full. */
.dtr-details .dt-clamp,
.dtr-details .dt-clamp-inline,
tr.child .dt-clamp,
tr.child .dt-clamp-inline {
    display: inline !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    overflow: visible !important;
}

a.hyperlink::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #1279c6;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.25s ease-in-out 0s;
}

a.hyperlink:hover::before {
  visibility: visible;
  transform: scaleX(1);
}

/* .ui.input input[type="file"] {
	display: none;
} */

.grecaptcha-badge {
	display: none;
}

/* Cloudflare Turnstile (interaction-only): the wrapper reserves NO space while the widget is invisible
   (the normal case for real visitors). Add breathing room only when Cloudflare actually renders a
   challenge iframe — i.e. for a suspected bot. */
.cf-turnstile-field iframe {
	margin-top: 0.75rem;
}

html {
  scroll-behavior: smooth;
}

body {
  cursor: default;
}

.ui.disabled.button.activation {
	pointer-events: auto !important;
}

div.dt-buttons {
	clear: both;
}

.hiddenoverride {
  display: none !important;
  visibility: hidden!important;
}

.ui.form textarea.plain-text,
.ui.form input:not([type]).plain-text,
.ui.form input[type="date"].plain-text,
.ui.form input[type="datetime-local"].plain-text,
.ui.form input[type="email"].plain-text,
.ui.form input[type="number"].plain-text,
.ui.form input[type="password"].plain-text,
.ui.form input[type="search"].plain-text,
.ui.form input[type="tel"].plain-text,
.ui.form input[type="time"].plain-text,
.ui.form input[type="text"].plain-text,
.ui.form input[type="file"].plain-text,
.ui.form input[type="url"].plain-text {
  border-color: transparent !important;
  background-color: transparent !important;
  padding-left: 0em !important;
  padding-right: 0em !important;
  box-shadow: none !important;
  border-radius: 0px !important;
}

.site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.site-content {
  flex: 1;
  padding-bottom: 2rem; /* always keep a little breathing room above the footer */
}

/* Full-width (fluid) content pages — page_fluid=1 renders the body WITHOUT the .ui.container wrapper
   (index.php). The navbar carries no bottom margin, so any gap under it is the first content element's
   own top margin; on a full-bleed page that reads as an unwanted gap. Drop the top margin of the fluid
   wrapper and its first element so the content (a hero image/section/heading) sits flush under the
   navbar. Scoped to .cms-page-fluid — contained pages keep their comfortable spacing, and custom-navbar
   orgs (e.g. Everlast) never hit this branch. */
main.site-content > .cms-page-fluid { margin-top: 0; }
main.site-content > .cms-page-fluid > :first-child { margin-top: 0; }
/* The last piece of that gap is Fomantic's own margin-bottom:1rem on the bottom-attached site
   navbar. Zero it only when the page being served is full-width (:has the fluid wrapper in the
   adjacent <main>), so contained pages keep the stock spacing. The active tab's pointing caret
   still renders — it's absolutely positioned with z-index:2, so it paints on top of the hero
   instead of being swallowed the way a negative content margin swallows it. */
.ui.bottom.attached.menu:has(+ main.site-content > .cms-page-fluid) { margin-bottom: 0; }

.footerlink {
		  color: #888 !important;
}
.footerlink:hover {
		  color: #ccc !important;
}
	.everlastbutton {
		  border: 2px solid #9b0e2e !important;
		  color: #9b0e2e !important;
	}
	.everlastbutton:hover {
		  border: 2px solid #ad1035 !important;
		  background-color: #e1b6c0 !important;
	}
	.everlastbutton:active {
		  border: 2px solid #9b0e2e !important;
		  background-color: #cd8696 !important;

	}

  .olivebutton {
      border: 2px solid #908f57 !important;
      color: #6d9057 !important;
  }
  .olivebutton:hover {
      border: 2px solid #a9a875 !important;
      background-color: #bbd5ab !important;
  }
  .olivebutton:active {
      border: 2px solid #7f7e48 !important;
      background-color: #a8ba9d !important;

  }

  .sagebutton {
      border: 2px solid #486833 !important;
      background-color: #6d9057 !important;
      color: #bbd5ab !important;
  }
  .sagebutton:hover {
      border: 2px solid #648c4a !important;
      background-color: #83a66d !important;
  }
  .sagebutton:active {
      border: 2px solid #223f0e !important;
      background-color: #63834e !important;

  }




.ui[class*="top attached"].segment{
	margin: 0;
}

/* Mobile */
@media only screen and (max-width: 767px) {
  [class*="mobile hidden"],
  [class*="tablet only"]:not(.mobile),
  [class*="computer only"]:not(.mobile),
  [class*="large screen only"]:not(.mobile),
  [class*="widescreen only"]:not(.mobile),
  [class*="or lower hidden"] {
    display: none !important;
  }
}

/* Tablet / iPad Portrait */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  [class*="mobile only"]:not(.tablet),
  [class*="tablet hidden"],
  [class*="computer only"]:not(.tablet),
  [class*="large screen only"]:not(.tablet),
  [class*="widescreen only"]:not(.tablet),
  [class*="or lower hidden"]:not(.mobile) {
    display: none !important;
  }
}

/* Computer / Desktop / iPad Landscape */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  [class*="mobile only"]:not(.computer),
  [class*="tablet only"]:not(.computer),
  [class*="computer hidden"],
  [class*="large screen only"]:not(.computer),
  [class*="widescreen only"]:not(.computer),
  [class*="or lower hidden"]:not(.tablet):not(.mobile) {
    display: none !important;
  }
}

/* Large Monitor */
@media only screen and (min-width: 1200px) and (max-width: 1919px) {
  [class*="mobile only"]:not([class*="large screen"]),
  [class*="tablet only"]:not([class*="large screen"]),
  [class*="computer only"]:not([class*="large screen"]),
  [class*="large screen hidden"],
  [class*="widescreen only"]:not([class*="large screen"]),
  [class*="or lower hidden"]:not(.computer):not(.tablet):not(.mobile) {
    display: none !important;
  }
}

/* Widescreen Monitor */
@media only screen and (min-width: 1920px) {
  [class*="mobile only"]:not([class*="widescreen"]),
  [class*="tablet only"]:not([class*="widescreen"]),
  [class*="computer only"]:not([class*="widescreen"]),
  [class*="large screen only"]:not([class*="widescreen"]),
  [class*="widescreen hidden"],
  [class*="widescreen or lower hidden"] {
    display: none !important;
  }
}

.ui.vertical.stripe {
	padding: 8em 0em;
}
.ui.vertical.stripe h3 {
	font-size: 2em;
}
.ui.vertical.stripe .button + h3,
.ui.vertical.stripe p + h3 {
	margin-top: 3em;
}
.ui.vertical.stripe .floated.image {
	clear: both;
}
.ui.vertical.stripe p {
	font-size: 1.33em;
}
.ui.vertical.stripe .horizontal.divider {
	margin: 3em 0em;
}

.quote.stripe.segment {
	padding: 0em;
}
.quote.stripe.segment .grid .column {
	padding-top: 5em;
	padding-bottom: 5em;
}

.footer.segment {
	padding: 5em 0em;
}





    .hidden.menu {
      display: none;
    }

    .ui.vertical.stripe {
      padding: 8em 0em;
    }
    .ui.vertical.stripe h3 {
      font-size: 2em;
    }
    .ui.vertical.stripe .button + h3,
    .ui.vertical.stripe p + h3 {
      margin-top: 3em;
    }
    .ui.vertical.stripe .floated.image {
      clear: both;
    }
    .ui.vertical.stripe p {
      font-size: 1.33em;
    }
    .ui.vertical.stripe .horizontal.divider {
      margin: 3em 0em;
    }

    .quote.stripe.segment {
      padding: 0em;
    }
    .quote.stripe.segment .grid .column {
      padding-top: 5em;
      padding-bottom: 5em;
    }

    .footer.segment {
      padding: 5em 0em;
    }

    .secondary.pointing.menu .toc.item {
      display: none;
    }

    @media only screen and (max-width: 700px) {
      .ui.fixed.menu {
        display: none !important;
      }
      .secondary.pointing.menu .item,
      .secondary.pointing.menu .menu {
        display: none;
      }
      .secondary.pointing.menu .toc.item {
        display: block;
      }

    }

.cardlabel > input{
    visibility: hidden;
    position: absolute;
}
.cardlabel > input + div{
    cursor:pointer;
    border: 3px solid #eee !important;
		border-radius: 8px !important;
}
.cardlabel > input:checked + div{
    background-color: #d8edff !important;
    border: 3px solid #137aca !important;
}

/* Cart's Stripe **Payment Element** mount. This was styled for the legacy single-line
   Card Element (fixed height:44px + its own border/padding); the multi-row Payment
   Element needs flexible height and draws its own inputs via the Fomantic appearance,
   so the fixed height clipped it and the box overlapped the Pay button. Spacing only
   now — matches the working #payment-element on the invoice pay screen. */
#card-element {
  margin: .5rem 0 1rem;
  min-height: 42px;
  width: 100%;
}

kbd {
	background-color: white !important;
	color: #40c757 !important;
	border-color: transparent;
  padding: 3px;
  border-radius: 3px;
}

.reversekbd {
	background-color: whitesmoke !important;
	color: #559cd0 !important;
	border-color: transparent;
  padding: 3px;
  border-radius: 3px;
}

.dz-drag-hover {

	   background-color: #d8edff !important;
}

/* new-report.php floating Next/Submit — fixed bottom-center on desktop, full-width bottom
   bar on mobile (replaces the old sidebar overlay-visibility placement). */
/* Fomantic CSS tooltips (::before/::after) default to a low z-index, so hovering an icon near
   the top of the page drew the tooltip BEHIND the fixed top nav (.ui.menu.fixed = z-index 101)
   and any sticky toolbars (.ui.sticky = 800) — it read as a clipped/"glitched" tooltip. Lift
   every tooltip above those layers. Scoped global (not just .ui.table) because the same clipping
   hit labels, chips and standalone icons everywhere. Modal tooltips keep their higher z-index
   via the more-specific `.ui.modal [data-tooltip]` rule in header.php (1002), so this won't
   punch tooltips through an open modal's dimmer. */
[data-tooltip]:hover::before, [data-tooltip]:hover::after { z-index: 900 !important; }
/* The real fix for "tooltips clip behind headers/overflow": upgradeTooltips() (bottom.php) converts
   every [data-tooltip] on the page to a body-appended Fomantic popup tagged .dt-tip. Appended to
   <body> (the top layer) it escapes any overflow/stacking-context clip; this z-index keeps it above
   ALL page chrome (fixed nav 101, sticky 800, modals ~1001). Global (not datatable-only) so it
   works on every page, not just ones with a DataTable. */
body > .ui.popup.dt-tip { z-index: 100000 !important; }
/* Once an element is upgraded to a body-appended popup it KEEPS its data-tooltip attribute (so a
   re-created node can be re-upgraded). Suppress the now-duplicate CSS pseudo-tooltip on it — the
   popup is the one that shows. */
.tip-upgraded[data-tooltip]:hover::before, .tip-upgraded[data-tooltip]:hover::after,
.tip-upgraded[data-tooltip]::before, .tip-upgraded[data-tooltip]::after { display: none !important; content: none !important; }

/* Admin sub-page navigation (renderAdminSubnav) — an attached, fluid segmented button bar. Desktop:
   every tab shows icon + label, equal width. Phones: it stays one attached row, inactive tabs collapse
   to just their icon, and only the ACTIVE tab shows its name (it grows to fit). Mobile-friendly
   replacement for scattered corner buttons / extra sidebar items. */
/* Full-width fluid bar — `ui fluid buttons` already spans 100%; no width cap, so it stretches the whole
   content area on every hub (the earlier centered cap made the buttons feel un-fluid). */
.admin-subnav.ui.buttons{ margin:0 0 1.25rem 0; }
/* Equal-width tabs: flex:1 1 0 (zero basis) so a longer label doesn't make its tab wider. */
.admin-subnav.ui.buttons > .button{ flex:1 1 0; }
.admin-subnav.ui.buttons > .button > .label-text{ margin-left:.45rem; }
@media (max-width: 600px){
	/* Icon-only on phones: every tab is an equal-width icon button (no labels) so 4-5 tabs never
	   squish. The active tab keeps its highlight to show where you are; the page heading under the
	   bar names the current section. */
	.admin-subnav.ui.buttons{ display:flex; max-width:none; }
	.admin-subnav.ui.buttons > .button{ flex:1 1 0; min-width:0; padding-left:0; padding-right:0; }
	.admin-subnav.ui.buttons > .button > i.icon{ margin:0 auto; }
	.admin-subnav.ui.buttons > .button > .label-text{ display:none; }
}

/* ── Tab bars (.ui.tabular.menu) scroll instead of clipping on phones ──────────
   Fomantic tab menus are inline-flex and never wrap, so a 4-6 tab bar (the Bookings
   admin hub #bookTabs, the Relay12 report-detail tabs) ran its later tabs off the
   right edge where they were clipped and untappable (Permissions / All appointments
   were unreachable). Let the bar scroll horizontally so every tab is reachable; the
   partially-visible next tab hints there's more to swipe to. */
@media only screen and (max-width:767px){
	.ui.tabular.menu{ flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
	.ui.tabular.menu > .item{ flex:0 0 auto; }
	.ui.tabular.menu::-webkit-scrollbar{ height:4px; }
	.ui.tabular.menu::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.2); border-radius:2px; }
}

/* ── Stacked responsive tables: show the per-cell data-label as a card ──────────
   Some hand-built admin tables (Scheduled Tasks, the invoice builder line items) are
   `.ui.stackable.table` AND tag every <td> with data-label="Task" etc., intending a
   labeled card layout on phones. Fomantic's stackable only stacks the cells — it never
   shows those labels and leaves the <thead> as a detached block of column names above a
   wall of unlabeled values. Render each cell's data-label above its value and hide the
   now-redundant header. Scoped with :has() to ONLY tables that actually use data-label,
   so plain stackable tables (which rely on their header) are untouched. */
@media only screen and (max-width:767px){
	.ui.stackable.table:has(> tbody > tr > td[data-label]) > thead{ display:none !important; }
	.ui.stackable.table > tbody > tr > td[data-label]::before{
		content: attr(data-label);
		display:block;
		font-weight:600;
		color:#767676;
		font-size:.82em;
		margin-bottom:.15rem;
	}
}

/* Mobile "Stats" toggle (bottom.php injects .admin-stats-toggle before the KPI grid). Desktop shows
   the KPIs and hides the button; phones hide the KPI grid until the button reveals it (slideToggle
   sets an inline display that overrides the collapsed rule). */
/* !important is required: the button carries Fomantic's `.ui.fluid.button{display:block}` (specificity
   0,3,0) which would otherwise beat this plain-class hide and show it on desktop. The mobile rule below
   also uses !important and is later in source order, so it wins ≤767px. */
.admin-stats-toggle{ display:none !important; }
.admin-stats-toggle.active > i.icon{ color:#2185d0; }
@media (max-width: 767px){
	.admin-stats-toggle{ display:block !important; margin:0 0 1rem 0; }
	/* Hidden by default on phones. !important + triple-class is REQUIRED to beat Fomantic's
	   `.ui.stackable.cards{display:block!important}` (the KPI grid is a .ui.cards variant). The Stats
	   button toggles .kpi-revealed to show it — we can't use jQuery slideToggle here, since its inline
	   display can't override an !important stylesheet rule. */
	.kpi-collapsed-mobile.kpi-collapsed-mobile.kpi-collapsed-mobile{ display:none !important; }
	.kpi-collapsed-mobile.kpi-collapsed-mobile.kpi-revealed{ display:block !important; }
	/* Don't let the grid's negative top margin ride up over the Stats button (fixes the overlap). */
	.kpi-collapsed-mobile{ margin-top:0 !important; }
}

/* Shared page-picker dropdown (renderPageSelect) — consistent everywhere a page is chosen. Each menu
   item: optional page icon + name, an optional sub-line (page title), and the slug floated right in a
   grey monospace "console" style. data-text on each item keeps the collapsed field showing just the
   name (clean), while the menu shows the rich layout. */
.page-select-dd .menu > .item .page-sel-slug{ float:right; margin-left:1.25rem; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.8em; color:#8a9099; }
.page-select-dd .menu > .item .page-sel-name{ font-weight:500; }
.page-select-dd .menu > .item .page-sel-sub{ display:block; font-size:.8em; color:#8a9099; line-height:1.2; margin-top:.1rem; }
.page-select-dd .menu > .item > i.icon{ opacity:.7; }

/* Compact toasts (showToast): one tight line — inline status icon + text, no header. We render the
   icon inside the message (showIcon:false) so it never stacks on its own line; hide the empty header
   Fomantic still emits when no title is passed. */
.ui.toast-box .compact-toast .header:empty{ display:none !important; }
.ui.toast-box .compact-toast .content{ padding-top:.5em; padding-bottom:.5em; }
.ui.toast-box .compact-toast i.icon{ display:inline-block; width:auto; height:auto; vertical-align:baseline; }
/* Drop top-anchored toasts BELOW the fixed top nav (~5em, same offset the page content uses) so they
   never overlap/hide behind the header. Bottom-anchored toasts (if ever used) are unaffected. */
.ui.toast-container.top{ top: 5em !important; }

.report-next-float{ position:fixed; left:50%; bottom:3rem; transform:translateX(-50%); z-index:101; width:340px; max-width:92vw; }
.report-next-float .segment{ margin:0 !important; box-shadow:0 6px 22px rgba(0,0,0,.28) !important; }
@media (max-width:767px){
	.report-next-float{ left:0; right:0; bottom:0; width:auto; max-width:none; transform:none; }
	.report-next-float .segment{ border-radius:0 !important; }
	form.app100.form{ padding-bottom:5.5rem; }
}

.dz-clickable{
	cursor: pointer;
}

/* ── Mobile: stack multi-column form field groups (all forms) ──────────────────────
   Fomantic does NOT stack `.ui.form .fields` on phones, so `.two/three/four fields`
   and `.inline fields` stay side-by-side and cramp (City+State, ZIP+Country, name
   pairs, etc.). Stack them to one column and zero the gutter padding so stacked fields
   sit flush. This is the app's convention everywhere — admin AND the public forms
   (cart checkout, account, register, signup, tickets, booking) — so it's applied
   globally. Forms without multi-column groups (e.g. login) are unaffected, and card
   entry is a single Stripe Element (not `.ui.form .fields`), so nothing that should
   legitimately stay side-by-side on a phone is disturbed. */
@media only screen and (max-width:767px){
	.ui.form .fields{ flex-direction:column; margin-left:0; margin-right:0; }
	.ui.form .fields > .field{ width:100% !important; margin-bottom:1em; padding-left:0; padding-right:0; }
}

/* ── Navbar notifications panel on phones ──────────────────────────────────────
   The envelope dropdown (#messages-dropdown) is Fomantic-positioned via `left`, so a
   350px-wide panel hung ~17px off the left edge, and with no max-height a full unread
   list ran off the bottom of the screen (the "View All Messages" link + lower items
   became unreachable on shorter phones). Anchor it to the viewport as a near-full-width
   sheet just below the fixed top bar (bottom edge at 4rem) and cap its height so the
   list scrolls inside the panel instead. */
@media only screen and (max-width:767px){
	#messages-dropdown .menu{
		position:fixed !important;
		top:64px !important; left:.4rem !important; right:.4rem !important;
		width:auto !important; min-width:0 !important; max-width:none !important;
		max-height:calc(100vh - 76px) !important; overflow-y:auto !important;
		-webkit-overflow-scrolling:touch;
	}
	/* The account/avatar menu (top-right) positions fine but has ~20 items incl. Log Out;
	   with no cap it runs off the bottom on short phones. Cap + scroll so all items reach. */
	.ui.auto.dropdown > .menu{
		max-height:calc(100vh - 76px) !important; overflow-y:auto !important;
		-webkit-overflow-scrolling:touch;
	}
}

/* ── Loader spinner fix ───────────────────────────────────────────────────────
   This Fomantic build renders the spinning part of every loader (.ui.loader and the
   .ui.loading.button spinner) with all four border sides the SAME color
   (border:.2em solid <color>), so the rotation is invisible and it reads as a solid
   "black dot" instead of a spinning arc. Make the other three sides transparent so a
   single colored arc shows and visibly spins. We only touch the moving ::after part —
   the ::before track ring stays — and we leave border-top-color alone, so each variant
   (default grey, inverted white, primary, basic-button currentColor) keeps its color. */
.ui.loader::after,
.ui.loading.button::after {
	border-right-color: transparent !important;
	border-bottom-color: transparent !important;
	border-left-color: transparent !important;
}

/* DataTables export buttons (copy/excel/pdf/print) flash a `.processing` spinner whose default
   border is a chunky near-black two-arc (border:2px solid rgb(40,40,40), only left/right
   transparent) — it reads as a "weird black circle" on mousedown. Make it a clean, thin single
   grey arc (faint track + one visible arc), matching the loader fix above. */
.dt-buttons .button.processing:after,
div.dt-buttons .button.processing:after,
div.dt-buttons a.button.processing:after,
div.dt-buttons div.button.processing:after {
	border-color: rgba(0,0,0,.12) !important;
	border-top-color: rgba(0,0,0,.5) !important;
}

/* ── Shared color picker (renderColorPicker / initColorPickers) ───────────────── */
/* Swatch dot shown beside each color in the menu + the dropdown's current value. */
.color-picker-wrap .cp-dot,
.color-picker-dd .cp-dot {
	display: inline-block; width: 12px; height: 12px; border-radius: 50%;
	margin-right: 7px; vertical-align: middle; border: 1px solid rgba(0,0,0,.15);
}
/* Two-column palette menu. column-count (not flex) so Fomantic's open/close display
   toggle on .menu keeps working; min-width keeps both columns readable in narrow fields. */
.color-picker-dd .menu { column-count: 2; min-width: 19rem; }
.color-picker-dd .menu > .item { break-inside: avoid; }

/* ── Standard user picker (renderUserPicker / initUserPickers) ────────────────── */
.user-picker .menu > .item .up-row,
.user-picker > .text .up-row { display: inline-flex; align-items: center; gap: .5rem; width: 100%; }
.up-row .up-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.up-row .up-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-row .up-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8a9099; font-size: .82em; }
.up-row .up-email-none { font-style: italic; }
.up-row .up-contact { flex: 0 0 auto; display: inline-flex; gap: .15rem; }
.up-row .up-contact .icon { margin: 0; opacity: .9; }
.up-row .up-groups { flex: 0 0 auto; margin-left: auto; display: inline-flex; gap: .1rem; align-items: center; }
.up-row .up-groups .up-gicon { margin: 0; opacity: .85; }
/* The email is for browsing/searching the menu — keep it out of the selected single pill AND the
   multiple-select chips, so a chosen person reads as just their name. */
.user-picker > .text .up-email,
.user-picker > a.ui.label .up-email { display: none; }
/* In the multiple-select label chips, the contact/group icons add noise — show just the name. */
.user-picker > a.ui.label .up-contact, .user-picker > a.ui.label .up-groups { display: none; }

/* ── Login / Register split layout ────────────────────────────────────────────
   When an org adds editable intro content beside the sign-in / registration box,
   the box must never be pushed below the fold (or visually covered) by that
   content on phones. On mobile we force the grid to stack with the module FIRST,
   regardless of source order, and constrain the custom content so it can't
   overflow or overlap the module. */
.login-intro-content, .register-intro-content { max-width: 100%; overflow-wrap: break-word; word-wrap: break-word; }
.login-intro-content img, .register-intro-content img,
.login-intro-content video, .register-intro-content video { max-width: 100%; height: auto; }
.login-intro-content table, .register-intro-content table { max-width: 100%; }
@media only screen and (max-width: 767px) {
  .login-split-grid.ui.grid { display: flex !important; flex-direction: column; }
  .login-split-grid .login-module-col { order: 0; }
  .login-split-grid .login-intro-col  { order: 1; margin-top: 1.5rem; }
}

/* ── Header icon must never stack above its title (durable, context-aware) ─────
   "The icon ends up ABOVE the heading" kept recurring because the two header
   contexts have OPPOSITE markup needs — so a fix copied from one breaks the other:

     • .ui.header (h2/h3/div.ui.header): Fomantic makes the icon `table-cell`, so
       the title must ALSO be a table-cell — i.e. wrapped in `.content` — to sit
       beside it. Bare text, or a trailing inline-block (e.g. a #id chip / label),
       leaves the icon as a lone table-cell that wraps ABOVE the title.
     • .ui.modal > .header: the icon is inline, so wrapping the title in a
       block-level `.content` <div> (the .ui.header habit!) drops it to the next
       line, BELOW the icon.

   The authored norm stays: .ui.header → wrap the title in `.content`; a modal
   `.header` → bare `<i icon> Title`. These two rules are a SAFETY NET so that if
   either markup ever lands in the wrong context (a copy-paste, a new page), the
   icon still sits inline beside the title and can't stack. So we never chase this
   bug again. Convention + canonical examples: docs/UI-COMPONENTS.md. ──────────── */

/* Modal header: if a `.content` wrapper is ever used (the .ui.header habit), pull
   it up beside the inline icon instead of letting the block <div> fall below it.
   The bare `<i icon> Title` norm already lays out inline and is left untouched. */
.ui.modal > .header > i.icon + .content {
	display: inline-block;
	vertical-align: middle;
	padding-left: .5rem;
}

/* .ui.header with a BARE icon and no `.content` sibling: render the icon
   inline-block so it can't become a lone table-cell that wraps above the title
   (or above a trailing chip/label). The compliant `.content`-wrapped form keeps
   Fomantic's table-cell layout; `.ui.icon.header` (the intentional big-icon-
   above-title block) and a lone icon (`:only-child`) are both excluded. */
.ui.header:not(.icon):not(:has(> .content)) > i.icon:not(:only-child) {
	display: inline-block;
	vertical-align: middle;
	margin-right: .5rem;
}

/* Coupon box (cart): the `.ui.action.input` lives inside the cart `.ui.form`, where Fomantic's
   `.ui.form input { width:100% }` rule (plus flex-shrink:0) makes the code input claim the whole
   group width and shove the Apply button OUT past the segment's right border ("coupon escapes the
   segment"). Let the input grow/shrink within the group — min-width:0 is the flexbox escape hatch
   that allows a flex item to shrink below its content/declared width — so the button stays inside. */
#cart-coupon-box .ui.action.input { width: 100%; }
#cart-coupon-box .ui.action.input > input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

/* ── Consistent "secret is already saved" badge ──────────────────────────────
   One indicator for every write-only key/token/secret field site-wide (see
   secretSetBadge()/renderSecretField() in functions.php + window.markSecretSet
   in global.js). A small green pill with a check, sitting beside the field
   label, so a saved key reads the same everywhere instead of three ad-hoc
   inline-text variants. */
.secret-set-badge {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	margin-left: .45em;
	padding: .14em .55em;
	border-radius: 999px;
	background: #e8f6ec;
	color: #1a7f37;
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	vertical-align: middle;
	line-height: 1;
}
.secret-set-badge .icon { margin: 0; font-size: .9em; line-height: 1; }
/* Orange counterpart — only for secrets where a MISSING value is a problem (e.g. Stripe webhook
   signing secrets, without which payments stay pending). Most keys show nothing when unset. */
.secret-unset-badge {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	margin-left: .45em;
	padding: .14em .55em;
	border-radius: 999px;
	background: #fdf0e3;
	color: #b35900;
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	vertical-align: middle;
	line-height: 1;
}
.secret-unset-badge .icon { margin: 0; font-size: .9em; line-height: 1; }
/* Inside a Fomantic .ui.form label (which can force display:block on children) keep it inline. */
.ui.form .field > label .secret-set-badge,
.ui.form .field > label .secret-unset-badge { float: none; }