/* -------------------------------------------------------------------------------------------------

It's *strongly* suggested that you don't modify this file.  Instead, load a new stylesheet after
this one in your layouts (eg formtastic_changes.css) and override the styles to suit your needs.
This will allow you to update formtastic.css with new releases without clobbering your own changes.

This stylesheet forms part of the Formtastic Rails gem
(c) Justin French

--------------------------------------------------------------------------------------------------*/

/* NORMALIZE AND RESET - obviously inspired by Yahoo's reset.css, but scoped to just .formtastic
--------------------------------------------------------------------------------------------------*/
.formtastic,
.formtastic ul,
.formtastic ol,
.formtastic li,
.formtastic fieldset,
.formtastic legend,
.formtastic input,
.formtastic button,
.formtastic textarea,
.formtastic select,
.formtastic p {
  margin:0;
  padding:0;
}

.formtastic fieldset {
  border:0;
}

.formtastic em,
.formtastic strong {
  font-style:normal;
  font-weight:normal;
}

.formtastic ol,
.formtastic ul {
  list-style:none;
}

.formtastic abbr,
.formtastic acronym {
  border:0;
  font-variant:normal;
}

.formtastic input,
.formtastic button,
.formtastic textarea {
  font-family:sans-serif;
  font-size:inherit;
  font-weight:inherit;
}

.formtastic input,
.formtastic textarea,
.formtastic select {
  font-size:100%;
}

.formtastic legend {
  white-space:normal;
  color:#000;
}


/* SEMANTIC ERRORS
--------------------------------------------------------------------------------------------------*/
.formtastic .errors {
  color:#cc0000;
  margin:0.5em 0 1.5em 25%;
  list-style:square;
}

.formtastic .errors li {
  padding:0;
  border:none;
  display:list-item;
}


/* BUTTONS & ACTIONS
--------------------------------------------------------------------------------------------------*/
.formtastic .buttons,
.formtastic .actions {
  overflow:hidden; /* clear containing floats */
  padding-left:25%;
}

.formtastic .button,
.formtastic .action {
  float:left;
  padding-right:0.5em;
}

.formtastic .button_action button {
  padding:3px 8px;
}

.formtastic .link_action a {
  display:block;
  padding:3px 0;
}


/* INPUTS
--------------------------------------------------------------------------------------------------*/
.formtastic .inputs {
  overflow:hidden; /* clear containing floats */
}

.formtastic .input {
  overflow:hidden; /* clear containing floats */
  padding:0.5em 0; /* padding and negative margin juggling is for Firefox */
  margin-top:-0.5em;
  margin-bottom:1em;
}


/* LEFT ALIGNED LABELS
--------------------------------------------------------------------------------------------------*/
.formtastic .input .label {
  display:block;
  width:25%;
  float:left;
  padding-top:.2em;
}

.formtastic .fragments .label,
.formtastic .choices .label {
  position:absolute;
  width:95%;
  left:0px;
}

.formtastic .fragments .label label,
.formtastic .choices .label label {
  position:absolute;
}

/* NESTED FIELDSETS AND LEGENDS (radio, check boxes and date/time inputs use nested fieldsets)
--------------------------------------------------------------------------------------------------*/
.formtastic .choices {
  position:relative;
}

.formtastic .choices-group {
  float:left;
  width:74%;
  margin:0;
  padding:0 0 0 25%;
}

.formtastic .choice {
  padding:0;
  border:0;
}


/* INLINE HINTS
--------------------------------------------------------------------------------------------------*/
.formtastic .input .inline-hints {
  color:#666;
  margin:0.5em 0 0 25%;
}


/* INLINE ERRORS
--------------------------------------------------------------------------------------------------*/
.formtastic .inline-errors {
  color:#cc0000;
  margin:0.5em 0 0 25%;
}

.formtastic .errors {
  color:#cc0000;
  margin:0.5em 0 0 25%;
  list-style:square;
}

.formtastic .errors li {
  padding:0;
  border:none;
  display:list-item;
}


/* STRING, NUMERIC, PASSWORD, EMAIL, URL, PHONE, SEARCH (ETC) OVERRIDES
--------------------------------------------------------------------------------------------------*/
.formtastic .stringish input {
  width:72%;
}

.formtastic .stringish input[size],
.formtastic .stringish input[max] {
  width:auto;
  max-width:72%;
}


/* TEXTAREA OVERRIDES
--------------------------------------------------------------------------------------------------*/
.formtastic .text textarea {
  width:72%;
}

.formtastic .text textarea[cols] {
  width:auto;
  max-width:72%;
}


/* HIDDEN OVERRIDES
--------------------------------------------------------------------------------------------------*/
.formtastic .hidden {
  display:none;
}


/* BOOLEAN LABELS
--------------------------------------------------------------------------------------------------*/
.formtastic .boolean label {
  margin-left:25%;
  display:block;
}


/* CHOICE GROUPS
--------------------------------------------------------------------------------------------------*/
.formtastic .choices-group {
  margin-bottom:-0.5em;
}

.formtastic .choice {
  margin:0.1em 0 0.5em 0;
}

.formtastic .choice label {
  float:none;
  width:100%;
  line-height:100%;
  padding-top:0;
  margin-bottom:0.6em;
}


/* ADJUSTMENTS FOR INPUTS INSIDE LABELS (boolean input, radio input, check_boxes input)
--------------------------------------------------------------------------------------------------*/
.formtastic .choice label input,
.formtastic .boolean label input {
  margin:0 0.3em 0 0.1em;
  line-height:100%;
}


/* FRAGMENTED INPUTS (DATE/TIME/DATETIME)
--------------------------------------------------------------------------------------------------*/
.formtastic .fragments {
  position:relative;
}

.formtastic .fragments-group {
  float:left;
  width:74%;
  margin:0;
  padding:0 0 0 25%;
}

.formtastic .fragment {
  float:left;
  width:auto;
  margin:0 .3em 0 0;
  padding:0;
  border:0;
}

.formtastic .fragment label {
  display:none;
}

.formtastic .fragment label input {
  display:inline;
  margin:0;
  padding:0;
}

/*
 * Shared staff design tokens.
 *
 * The palette/type custom properties live on :root, so they're available
 * everywhere at no visual cost (a custom property does nothing until a rule
 * references it). Components that actually change appearance are scoped
 * behind a class - either `.tpf-modern` (a full opt-in reset for a page's
 * content, e.g. app/views/staff/customers) or a standalone `.tpf-*` class
 * like `.tpf-sidebar` that can be dropped into shared chrome (the layout's
 * left nav) without requiring the rest of the page to opt in.
 *
 * Palette and type are drawn from the TPF wordmark (black/chalk, angled
 * bolt-cut) - see /tpf-menu-logo.png.
 */

:root {
  --tpf-ink: #15171a;
  --tpf-ink-soft: #2b2e33;
  --tpf-chalk: #f1efea;
  --tpf-surface: #ffffff;
  --tpf-line: #e3e0d9;
  --tpf-steel: #6b6f76;
  --tpf-steel-soft: #e4e5e7;
  --tpf-signal: #e14a2b;
  --tpf-signal-soft: #fbe4dc;
  --tpf-turf: #2e774d;
  --tpf-turf-soft: #e1f0e6;
  /* Darkened from #c6841a: amber-on-amber-soft was 2.59:1, the worst
     contrast in the pill family, on the pill that means "payment failed" -
     see .tpf-pill-amber below. */
  --tpf-amber: #8f5c0f;
  --tpf-amber-soft: #f6e8d1;
  --tpf-slate: #355d86;
  --tpf-slate-soft: #e2eaf3;

  --tpf-font-display: 'Anton', 'Arial Narrow', sans-serif;
  --tpf-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --tpf-font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.tpf-modern {
  font-family: var(--tpf-font-body);
  color: var(--tpf-ink);
  /* Breathing room at the foot of the page. The layout gives its content
     column a top margin but no bottom one, so without this the last element -
     typically a submit button - sits flush against the bottom of the viewport
     with nothing under it. */
  padding-bottom: 3rem;
}

.tpf-modern .tpf-label {
  font-family: var(--tpf-font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tpf-steel);
}

/* ---------- Hero ---------- */

.tpf-modern .tpf-hero {
  background: var(--tpf-ink);
  color: var(--tpf-chalk);
  border-radius: 0.5rem;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.tpf-modern .tpf-avatar {
  flex: 0 0 auto;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--tpf-signal);
  color: var(--tpf-ink);
  font-family: var(--tpf-font-display);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}

.tpf-modern .tpf-hero-body {
  flex: 1 1 auto;
  min-width: 0;
}

.tpf-modern .tpf-hero-name {
  font-family: var(--tpf-font-display);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 0.4rem;
  color: #ffffff;
}

.tpf-modern .tpf-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tpf-modern .tpf-hero-actions {
  /* May shrink to the page's width so its buttons wrap on a phone instead of
     running off the right edge (Waiver Not Signed + Gym Check-In + the menu
     are wider than a phone together). */
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tpf-modern .tpf-hero-actions .btn {
  --bs-btn-color: var(--tpf-chalk);
  --bs-btn-border-color: rgba(241, 239, 234, 0.35);
  --bs-btn-hover-bg: rgba(241, 239, 234, 0.12);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-border-color: rgba(241, 239, 234, 0.6);
  font-size: 0.8rem;
}

.tpf-modern .tpf-hero-actions .btn.tpf-btn-warn {
  --bs-btn-color: #ffd9c6;
  --bs-btn-border-color: rgba(225, 74, 43, 0.7);
  --bs-btn-hover-bg: var(--tpf-signal);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-border-color: var(--tpf-signal);
}

/* Client page variant (staff/customers/_details_block): a light tile with
   no initials circle, name and actions on top, and the status badges on a
   black stripe along the bottom edge so they still stand out. The member
   dashboard keeps the dark tile above. */
.tpf-modern .tpf-hero.tpf-hero-client {
  background: var(--tpf-surface);
  color: var(--tpf-ink);
  border: 1px solid var(--tpf-line);
  padding-bottom: 0;
  row-gap: 1rem;
}

.tpf-modern .tpf-hero-client .tpf-hero-name {
  color: var(--tpf-ink);
  margin: 0;
}

.tpf-modern .tpf-hero-client .tpf-hero-subtitle {
  color: var(--tpf-steel);
  font-size: 0.9rem;
  margin: 0.2rem 0 0;
}

.tpf-modern .tpf-hero-client .tpf-hero-stripe {
  flex: 1 0 100%;
  background: var(--tpf-ink);
  margin: 0 -1.75rem;
  padding: 0.7rem 1.75rem;
  /* Rounded here, not with overflow: hidden on the tile - that would clip
     the actions menu, which drops down over the stripe. */
  border-radius: 0 0 calc(0.5rem - 1px) calc(0.5rem - 1px);
}

.tpf-modern .tpf-hero-client .tpf-hero-actions .btn {
  --bs-btn-color: var(--tpf-ink-soft);
  --bs-btn-border-color: var(--tpf-line);
  --bs-btn-hover-bg: var(--tpf-chalk);
  --bs-btn-hover-color: var(--tpf-ink);
  --bs-btn-hover-border-color: var(--tpf-steel);
  --bs-btn-active-bg: var(--tpf-chalk);
  --bs-btn-active-color: var(--tpf-ink);
}

.tpf-modern .tpf-hero-client .tpf-hero-actions .btn.tpf-btn-warn {
  --bs-btn-color: var(--tpf-signal);
  --bs-btn-border-color: var(--tpf-signal);
  --bs-btn-hover-bg: var(--tpf-signal);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-border-color: var(--tpf-signal);
}

/* ---------- Pills ---------- */

.tpf-modern .tpf-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.6;
}

.tpf-modern .tpf-pill-turf {
  background: var(--tpf-turf-soft);
  color: var(--tpf-turf);
}

.tpf-modern .tpf-pill-amber {
  background: var(--tpf-amber-soft);
  color: var(--tpf-amber);
}

/* This pill only ever renders on the light `--tpf-chalk`/white surfaces this
 * app actually has - there is no dark surface here for it to sit on. The
 * previous values (near-white text on a 12%-opacity near-white fill) were
 * copied from a dark-surface design and were effectively invisible on every
 * real usage. --tpf-steel-soft is a filled, borderless pill (like
 * -turf/-amber) - do not revert to the rgba(chalk) values above.
 *
 * Text is #55595f rather than --tpf-ink-soft: steel is the *muted* pill
 * (Draft/Inactive/No Active Membership/Refunded), so it must read quieter
 * than the amber "failure" pill and the turf "success" pill, not louder -
 * --tpf-ink-soft measured 10.8:1 here, heavier than either. #55595f is a
 * one-off, not a --tpf-steel-muted token: --tpf-steel already exists and is
 * used all over this file, so a second, near-identical gray token would
 * invite exactly the "which gray do I use" confusion the outline/steel pill
 * split above is trying to avoid.
 */
.tpf-modern .tpf-pill-steel {
  background: var(--tpf-steel-soft);
  color: #55595f;
}

/* color is a local override, not --tpf-steel itself: that token is reused
   for plain body/icon text in dozens of places across this file where the
   contrast bar is different (or moot, e.g. borders), so darkening it
   globally to fix this one pill's 4.39:1 would be a much wider change than
   this pill needs. */
.tpf-modern .tpf-pill-outline {
  background: var(--tpf-chalk);
  color: #676b72;
  border: 1px solid var(--tpf-line);
}

/* ---------- Alert banner (customer-level manager alert) ---------- */

.tpf-modern .tpf-alert-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.92rem;
}

.tpf-modern .tpf-alert-banner i {
  margin-top: 0.15rem;
}

.tpf-modern .tpf-alert-banner-warning {
  background: var(--tpf-amber-soft);
  color: var(--tpf-ink);
  border: 1px solid var(--tpf-amber);
}

.tpf-modern .tpf-alert-banner-warning i {
  color: var(--tpf-amber);
}

.tpf-modern .tpf-alert-banner-danger {
  background: var(--tpf-signal-soft);
  color: var(--tpf-ink);
  border: 1px solid var(--tpf-signal);
}

.tpf-modern .tpf-alert-banner-danger i {
  color: var(--tpf-signal);
}

/* Neutral "confirming, not yet known to be debt" variant - same chalk/steel/
   line language as .tpf-pill-outline, so it can never be mistaken for the
   amber/danger "you owe money" variants above. */
.tpf-modern .tpf-alert-banner-info {
  background: var(--tpf-chalk);
  color: var(--tpf-ink);
  border: 1px solid var(--tpf-line);
}

.tpf-modern .tpf-alert-banner-info i {
  color: var(--tpf-steel);
}

.tpf-modern .tpf-alert-banner-label {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  margin-bottom: 0.15rem;
}

/* The client's own unpaid balance - deliberately the loudest thing on the
   client page: solid signal red, a large amount, and first in the stack. */
.tpf-modern .tpf-owes-banner {
  border-width: 2px;
  flex-wrap: wrap;
}

.tpf-modern .tpf-owes-banner .tpf-owes-amount {
  display: block;
  font-family: var(--tpf-font-display);
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--tpf-signal);
  font-variant-numeric: tabular-nums;
}

.tpf-modern .tpf-owes-banner .tpf-owes-parts {
  display: block;
  font-size: 0.85rem;
}

.tpf-modern .tpf-owes-banner > i {
  font-size: 1.5rem;
}

.tpf-modern .tpf-unpaid-bill {
  border: 1px solid var(--tpf-line);
  border-left: 4px solid var(--tpf-signal);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

/* ---------- Cards ---------- */

.tpf-modern .tpf-card {
  background: var(--tpf-surface);
  border: 1px solid var(--tpf-line);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(21, 23, 26, 0.04);
  margin-bottom: 1.5rem;
}

.tpf-modern .tpf-card-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--tpf-line);
}

/* Signature: a small angled flag echoing the bolt-cut in the TPF wordmark,
   used once per section header rather than as a repeated decoration. */
.tpf-modern .tpf-card-header::before {
  content: '';
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.9rem;
  background: var(--tpf-signal);
  clip-path: polygon(60% 0, 100% 0, 40% 100%, 0 100%);
}

.tpf-modern .tpf-card-header h2 {
  font-family: var(--tpf-font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tpf-ink);
  margin: 0;
}

.tpf-modern .tpf-card-body {
  padding: 1.25rem;
}

/* Client page (staff/customers/_customer): every section header is blue
   with an icon chip, so the sections are easy to pick out. The red flag
   above gives way to the icon here. */
.tpf-modern.tpf-client-page .tpf-card-header {
  background: var(--tpf-slate-soft);
  border-bottom-color: #c9d6e5;
  border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0;
}

.tpf-modern.tpf-client-page .tpf-card-header::before {
  content: none;
}

.tpf-modern.tpf-client-page .tpf-card-header h2 {
  color: var(--tpf-slate);
}

.tpf-modern.tpf-client-page .tpf-card-icon {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.375rem;
  background: var(--tpf-slate);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

/* ---------- Details grid ---------- */

.tpf-modern .tpf-detail-value {
  font-size: 0.95rem;
}

.tpf-modern .tpf-detail-value.tpf-mono {
  font-family: var(--tpf-font-mono);
  font-size: 0.85rem;
}

/* ---------- List rows (memberships / relationships) ---------- */

.tpf-modern .tpf-row-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tpf-modern .tpf-row-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--tpf-line);
}

.tpf-modern .tpf-row-list li:last-child {
  border-bottom: 0;
}

.tpf-modern .tpf-row-active {
  border-left: 3px solid var(--tpf-turf);
  padding-left: 0.65rem !important;
}

/* A family member's contract row on Terminate Contracts - amber instead
   of the primary client's turf green, so it's visually obvious before
   reading any text that this is someone else's billing. */
.tpf-modern .tpf-row-family {
  border-left: 3px solid var(--tpf-amber);
  padding-left: 0.65rem !important;
}

.tpf-modern .tpf-empty {
  color: var(--tpf-steel);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.tpf-modern .tpf-row-list li a.tpf-purchase-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: var(--tpf-ink);
  text-decoration: none;
}

/* The items bought, between the date and the amount: takes the spare
   width and trims with an ellipsis rather than wrapping the row. */
.tpf-modern .tpf-row-list li a.tpf-purchase-row .tpf-purchase-items {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tpf-steel);
}

.tpf-modern .tpf-row-list li a.tpf-purchase-row:hover {
  color: var(--tpf-signal);
}

/* ---------- Stat (gym checkins) ---------- */

.tpf-modern .tpf-stat-value {
  font-family: var(--tpf-font-mono);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  color: var(--tpf-ink);
}

.tpf-modern .tpf-stat-label {
  font-family: var(--tpf-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tpf-steel);
}

.tpf-modern .tpf-checkin-time {
  font-family: var(--tpf-font-mono);
  font-size: 0.85rem;
}

/* ---------- List page header (index-style pages) ---------- */

.tpf-modern .tpf-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.tpf-modern .tpf-page-title {
  font-family: var(--tpf-font-display);
  font-weight: 400;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--tpf-ink);
  margin: 0;
}

.tpf-modern .tpf-page-header .btn-tpf-add {
  background: var(--tpf-signal);
  border-color: var(--tpf-signal);
  color: #ffffff;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

.tpf-modern .tpf-page-header .btn-tpf-add:hover {
  background: var(--tpf-ink);
  border-color: var(--tpf-ink);
  color: #ffffff;
}

/* ---------- Data table ---------- */

.tpf-modern table.tpf-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--tpf-surface);
}

.tpf-modern table.tpf-table > thead > tr > th {
  font-family: var(--tpf-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tpf-steel);
  border-bottom: 1px solid var(--tpf-line);
  border-top: none;
  padding: 0.75rem 0.9rem;
  background: var(--tpf-surface);
}

.tpf-modern table.tpf-table > tbody > tr > td {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--tpf-line);
  vertical-align: middle;
  font-size: 0.9rem;
}

.tpf-modern table.tpf-table.table-striped > tbody > tr:nth-of-type(odd) > td {
  background: transparent;
}

.tpf-modern table.tpf-table > tbody > tr:hover > td {
  background: var(--tpf-chalk);
}

/* Flags a customer appearing on both the in_house and Mindbody payments-due
   tables on the same date (Staff::ReportsController#payments_due) - not
   expected in steady state, worth standing out rather than blending in. */
.tpf-modern table.tpf-table > tbody > tr.tpf-overlap-row > td {
  background: #fff3cd;
}

.tpf-modern table.tpf-table > tbody > tr.tpf-overlap-row:hover > td {
  background: #ffe8a1;
}

.tpf-modern table.tpf-payroll-table {
  table-layout: fixed;
}

.tpf-modern table.tpf-table > tfoot > tr > td {
  padding: 0.65rem 0.9rem;
  border-top: 2px solid var(--tpf-line);
  border-bottom: none;
  vertical-align: middle;
  font-size: 0.9rem;
}

.tpf-modern .tpf-name-cell {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.tpf-modern .tpf-name-chip {
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: var(--tpf-ink);
  color: var(--tpf-chalk);
  font-family: var(--tpf-font-display);
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tpf-modern .tpf-name-text {
  font-weight: 600;
}

.tpf-modern .tpf-mono-cell {
  font-family: var(--tpf-font-mono);
  font-size: 0.82rem;
  color: var(--tpf-ink-soft);
}

.tpf-modern .tpf-cell-muted {
  color: var(--tpf-steel);
}

.tpf-modern .tpf-icon-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.tpf-modern .tpf-icon-actions a,
.tpf-modern .tpf-icon-actions button {
  color: var(--tpf-steel);
  transition: color 0.12s ease;
}

.tpf-modern .tpf-icon-actions button {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  line-height: 1;
}

.tpf-modern .tpf-icon-actions a.tpf-icon-edit:hover,
.tpf-modern .tpf-icon-actions button.tpf-icon-edit:hover {
  color: var(--tpf-signal);
}

.tpf-modern .tpf-icon-actions a.tpf-icon-view:hover {
  color: var(--tpf-ink);
}

.tpf-modern .tpf-icon-actions a.tpf-icon-delete:hover,
.tpf-modern .tpf-icon-actions button.tpf-icon-delete:hover {
  color: var(--tpf-amber);
}

.tpf-modern .tpf-icon-actions a.tpf-icon-duplicate:hover,
.tpf-modern .tpf-icon-actions button.tpf-icon-duplicate:hover {
  color: var(--tpf-turf);
}

/* Amber by default (not just on hover) - flags something that needs
   attention, like an unsigned contract, rather than a routine action. */
.tpf-modern .tpf-icon-actions a.tpf-icon-warn {
  color: var(--tpf-amber);
}

.tpf-modern .tpf-icon-actions a.tpf-icon-warn:hover {
  color: var(--tpf-signal);
}

.tpf-modern .tpf-page-subtitle {
  font-family: var(--tpf-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--tpf-ink);
  margin-bottom: 0.5rem;
}

.tpf-modern .tpf-inline-form-panel {
  background: var(--tpf-surface);
  border: 1px solid var(--tpf-line);
  border-radius: 0.5rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
}

/* ---------- DataTables chrome ---------- */

.tpf-modern .dataTables_wrapper {
  font-family: var(--tpf-font-body);
}

.tpf-modern .dataTables_filter input,
.tpf-modern .dataTables_length select {
  border: 1px solid var(--tpf-line);
  border-radius: 0.35rem;
  padding: 0.3rem 0.6rem;
  font-family: var(--tpf-font-body);
}

/* A plain <select> (not Bootstrap's .form-select), so nothing else reserves
   room for the browser's native dropdown arrow - without this the arrow
   overlaps the row-count number. */
.tpf-modern .dataTables_length select {
  padding-right: 1.75rem;
}

.tpf-modern .dataTables_filter input:focus,
.tpf-modern .dataTables_length select:focus {
  outline: none;
  border-color: var(--tpf-ink);
  box-shadow: 0 0 0 3px rgba(21, 23, 26, 0.08);
}

.tpf-modern .dataTables_info {
  color: var(--tpf-steel);
  font-size: 0.82rem;
}

.tpf-modern .dataTables_paginate .paginate_button {
  border-radius: 0.35rem !important;
  border: 1px solid transparent !important;
  color: var(--tpf-ink) !important;
  background: transparent !important;
  margin-left: 0.15rem !important;
}

.tpf-modern .dataTables_paginate .paginate_button.current {
  background: var(--tpf-ink) !important;
  border-color: var(--tpf-ink) !important;
  color: #ffffff !important;
}

.tpf-modern .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
  background: var(--tpf-chalk) !important;
  border-color: var(--tpf-line) !important;
  color: var(--tpf-ink) !important;
}

.tpf-modern .dataTables_paginate .paginate_button.disabled {
  color: var(--tpf-steel) !important;
}

/* ---------- Left staff nav ----------
 * Standalone (not gated behind .tpf-modern) since it's shared chrome
 * rendered by the layout on every /staff page, including ones that
 * haven't adopted the token layer for their own content yet. */

.tpf-sidebar {
  background: var(--tpf-surface);
  border: 1px solid var(--tpf-line);
  border-radius: 0.5rem;
  padding: 0.6rem;
  font-family: var(--tpf-font-body);
}

.tpf-sidebar .nav-link {
  display: block;
  color: var(--tpf-steel);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.3rem 0.75rem;
  border-radius: 0.35rem;
  border-left: 3px solid transparent;
  margin-bottom: 0;
  line-height: 1.4;
  transition: background 0.12s ease, color 0.12s ease;
}

.tpf-sidebar .nav-link:hover {
  background: var(--tpf-chalk);
  color: var(--tpf-ink);
}

.tpf-sidebar .nav-link.active {
  background: var(--tpf-chalk);
  color: var(--tpf-signal);
  border-left-color: var(--tpf-signal);
  font-weight: 600;
}

/* ---------- Phone layout ----------
 * Below tablet width the layout's 240px sidebar column (.menu-sidebar in
 * application.css) plus the empty spacer columns left the content too
 * narrow, and wide rows pushed the page sideways. On phones the sidebar
 * becomes one row of links above the content, scrolling sideways, and the
 * spacers go, so the content gets the full width. */
@media (max-width: 767.98px) {
  /* The row's negative side margin sits against a padding-less container,
     which pushed content flush to the screen edges. */
  .full-height {
    margin-left: 0;
    margin-right: 0;
  }

  .full-height > .col-1.menu-sidebar {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
  }

  .full-height > .col-1:not(.menu-sidebar) {
    display: none;
  }

  .tpf-sidebar {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    white-space: nowrap;
    height: auto !important; /* the partial's h-100 */
    margin: 0.5rem 0 0 !important;
    -webkit-overflow-scrolling: touch;
  }

  .tpf-sidebar .nav-link {
    flex: 0 0 auto;
    border-left: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0.35rem 0.35rem 0 0;
  }

  .tpf-sidebar .nav-link.active {
    border-bottom-color: var(--tpf-signal);
  }

  /* A wide DataTable (e.g. the Clients list's nine columns) scrolls inside
     its own box instead of dragging the whole page sideways. Phones only:
     elsewhere this would clip dropdowns that open past the table. */
  .dataTables_wrapper {
    overflow-x: auto;
  }
}

/* ---------- Top navbar ----------
 * Standalone, like .tpf-sidebar - this bar is shared chrome rendered on
 * every page (staff, kiosk, checkins, and the logged-out login screen). */

.tpf-navbar {
  border-bottom: 2px solid var(--tpf-signal);
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.tpf-navbar .tpf-search-form {
  max-width: 320px;
  width: 100%;
  position: relative;
}

.tpf-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  background: var(--tpf-surface);
  border: 1px solid var(--tpf-line);
  border-radius: 0.5rem;
  box-shadow: 0 10px 24px rgba(21, 23, 26, 0.18);
  max-height: 22rem;
  overflow-y: auto;
  z-index: 1050;
  text-align: left;
}

.tpf-search-results a.tpf-search-result {
  display: block;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--tpf-line);
  color: var(--tpf-ink);
  font-family: var(--tpf-font-body);
  text-decoration: none;
}

.tpf-search-results a.tpf-search-result:last-child {
  border-bottom: none;
}

.tpf-search-results a.tpf-search-result:hover {
  background: var(--tpf-chalk);
  color: var(--tpf-ink);
}

.tpf-search-results .tpf-search-result-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tpf-search-results .tpf-search-result-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.tpf-search-results .tpf-search-result-meta {
  font-size: 0.78rem;
  color: var(--tpf-steel);
}

.tpf-badge {
  display: inline-block;
  font-family: var(--tpf-font-body);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  line-height: 1.4;
}

.tpf-badge-gym {
  background: var(--tpf-turf-soft);
  color: var(--tpf-turf);
}

.tpf-badge-bjj {
  background: var(--tpf-amber-soft);
  color: var(--tpf-amber);
}

.tpf-badge-owes {
  background: var(--tpf-signal-soft);
  color: var(--tpf-signal);
}

/* Same neutral "outline" language as .tpf-pill-outline (chalk/steel/line) -
   deliberately not signal (that means debt/collect) and not steel-on-dark
   (illegible here, .tpf-search-results has a white background). Means the
   opposite of tpf-badge-owes: do not collect. */
.tpf-badge-confirming {
  background: var(--tpf-chalk);
  color: var(--tpf-steel);
  border: 1px solid var(--tpf-line);
}

.tpf-badge-no-sales {
  background: var(--tpf-signal);
  color: #ffffff;
}

.tpf-search-results .tpf-search-empty {
  padding: 0.6rem 0.9rem;
  color: var(--tpf-steel);
  font-size: 0.85rem;
}

.tpf-search-results .tpf-search-section-label {
  padding: 0.5rem 0.9rem 0.25rem;
  color: var(--tpf-steel);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tpf-navbar .tpf-search-input {
  background: var(--tpf-chalk);
  border: 1px solid rgba(241, 239, 234, 0.2);
  color: var(--tpf-ink);
  font-family: var(--tpf-font-body);
  font-size: 0.85rem;
}

.tpf-navbar .tpf-search-input::placeholder {
  color: var(--tpf-steel);
}

.tpf-navbar .tpf-search-input:focus {
  background: #ffffff;
  border-color: var(--tpf-signal);
  box-shadow: 0 0 0 3px rgba(225, 74, 43, 0.25);
  color: var(--tpf-ink);
}

.tpf-navbar .tpf-nav-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.4rem;
  color: rgba(241, 239, 234, 0.75);
  font-family: var(--tpf-font-body);
  font-weight: 500;
  font-size: 0.85rem;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.tpf-navbar .tpf-nav-link i {
  font-size: 1rem;
  width: 1.1rem;
  text-align: center;
}

/* Nav badge. Deliberately not Bootstrap's .badge: the indicator variant below
 * has to override display, position and padding, and fighting .badge's own
 * declarations for that is more fragile than owning the whole element. */
.tpf-navbar .tpf-nav-badge {
  background: #dc3545;
  color: #ffffff;
  font-size: 0.7em;
  font-weight: 700;
  line-height: 1;
  padding: 0.35em 0.6em;
  border-radius: 50rem;
  margin-left: 0.25rem;
}

/* Billing Inbox is an alert about work waiting, not a destination, so on the
 * desktop bar it drops its label, takes a larger glyph, and pins its count to
 * the icon's top-right corner.
 *
 * Scoped to min-width 992px (Bootstrap's lg, where navbar-expand-lg stops
 * collapsing) because below that the nav is a stacked list: the label comes
 * back, and an overlay badge on a full-width row would float in open space.
 */
@media (min-width: 992px) {
  .tpf-navbar .tpf-nav-link-indicator {
    position: relative;
  }

  .tpf-navbar .tpf-nav-link-indicator i {
    font-size: 1.55rem;
    width: 1.7rem;
  }

  /* Offsets are measured from the item's padding box (0.5rem 0.9rem), which
   * puts the glyph's right edge 0.9rem in from the item's right edge. A closed
   * envelope fills its box, so the pill clips the corner rather than sitting in
   * empty space - the ring below is what keeps it legible where they meet. */
  .tpf-navbar .tpf-nav-link-indicator .tpf-nav-badge {
    position: absolute;
    top: 0;
    right: 0.08rem;
    margin-left: 0;
    min-width: 1.05rem;
    padding: 0.2rem 0.28rem;
    font-size: 0.62rem;
    text-align: center;
    /* Matches the navbar's bg-dark so the pill reads as lifted off the icon. */
    box-shadow: 0 0 0 2px #212529;
  }
}

.tpf-navbar .tpf-nav-link:hover,
.tpf-navbar .tpf-nav-link:focus-visible {
  background: rgba(241, 239, 234, 0.18);
  color: #ffffff;
  transform: translateY(-1px);
}

.tpf-navbar .tpf-nav-link.active {
  background: rgba(225, 74, 43, 0.16);
  color: var(--tpf-signal);
  font-weight: 600;
}

.tpf-navbar .tpf-nav-link.active:hover,
.tpf-navbar .tpf-nav-link.active:focus-visible {
  background: rgba(225, 74, 43, 0.3);
  color: var(--tpf-signal);
}

/* ---------- Generic primitives ----------
 * Baseline restyling for common Bootstrap/Formtastic elements so a page
 * only has to add the .tpf-modern wrapper (plus the specific .tpf-page-header
 * / .tpf-table treatment where it applies) to read as part of the same
 * system, without rewriting every field's markup by hand. */

.tpf-modern h1 {
  font-family: var(--tpf-font-display);
  font-weight: 400;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--tpf-ink);
}

.tpf-modern .card {
  border: 1px solid var(--tpf-line);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(21, 23, 26, 0.04);
}

.tpf-modern .card-header {
  background: var(--tpf-surface);
  border-bottom: 1px solid var(--tpf-line);
}

.tpf-modern table:not(.tpf-table) {
  --bs-table-striped-bg: var(--tpf-chalk);
}

.tpf-modern table:not(.tpf-table) > thead > tr > th {
  font-family: var(--tpf-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tpf-steel);
  border-bottom: 1px solid var(--tpf-line);
}

.tpf-modern .btn-primary {
  background-color: var(--tpf-signal);
  border-color: var(--tpf-signal);
}

.tpf-modern .btn-primary:hover,
.tpf-modern .btn-primary:focus {
  background-color: var(--tpf-ink);
  border-color: var(--tpf-ink);
}

.tpf-modern .btn-outline-danger {
  color: var(--tpf-signal);
  border-color: var(--tpf-signal);
}

.tpf-modern .btn-outline-danger:hover {
  background-color: var(--tpf-signal);
  border-color: var(--tpf-signal);
}

.tpf-modern .form-control:focus,
.tpf-modern .form-select:focus {
  border-color: var(--tpf-ink);
  box-shadow: 0 0 0 3px rgba(21, 23, 26, 0.08);
}

/* Bootstrap's .form-check floats the checkbox left with a negative margin
   into its own padding-left - text-align: center (this layout's default,
   see "Everything is centered by default" in CLAUDE.md) centers the label
   text but never moves a float, so under a centered page the checkbox
   drifts to the far-left edge while its label sits centered on its own,
   nowhere near it. Some pages have patched this per-instance with
   `d-flex align-items-center gap-2` on the .form-check div (see
   staff/customers/_alert_form_block.html.erb); this makes that the
   default everywhere under .tpf-modern instead - a flex item ignores
   float, and gap replaces the padding/negative-margin trick, so the
   checkbox and its label move and center together as one unit. */
.tpf-modern .form-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0;
}

.tpf-modern .form-check .form-check-input {
  float: none;
  margin-left: 0;
}

.tpf-modern .formtastic label {
  font-family: var(--tpf-font-body);
  font-weight: 600;
  color: var(--tpf-ink-soft);
}

.tpf-modern .formtastic .inputs > legend,
.tpf-modern .formtastic legend {
  font-family: var(--tpf-font-display);
  text-transform: uppercase;
  font-size: 1rem;
  color: var(--tpf-ink);
  border-bottom: 1px solid var(--tpf-line);
}

.tpf-modern a:not(.btn) {
  color: var(--tpf-ink);
}

.tpf-modern a:not(.btn):hover {
  color: var(--tpf-signal);
}

/* ---------- Store: search + product tiles ---------- */

.tpf-modern .tpf-store-search {
  border: 1px solid var(--tpf-line);
  border-radius: 0.4rem;
  padding: 0.55rem 0.9rem;
  font-family: var(--tpf-font-body);
}

.tpf-modern .tpf-cart-column {
  position: sticky;
  top: 1rem;
  align-self: flex-start;
}

.tpf-modern #payment_type_id.is-invalid {
  border-color: var(--tpf-signal);
  box-shadow: 0 0 0 3px rgba(225, 74, 43, 0.15);
}

.tpf-modern .tpf-field-error {
  color: var(--tpf-signal);
  font-size: 0.8rem;
  margin-top: 0.3rem;
}

.tpf-modern .tpf-store-search:focus {
  border-color: var(--tpf-ink);
  box-shadow: 0 0 0 3px rgba(21, 23, 26, 0.08);
}

.tpf-modern .tpf-product-card {
  background: var(--tpf-surface);
  border: 1px solid var(--tpf-line);
  border-radius: 0.65rem;
  padding: 0.9rem 0.9rem 1.1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.tpf-modern .tpf-product-card:hover {
  box-shadow: 0 10px 24px rgba(21, 23, 26, 0.1);
  transform: translateY(-2px);
}

.tpf-modern .tpf-product-card.sc-added-item {
  border-color: var(--tpf-turf);
}

.tpf-modern .tpf-product-card.sc-added-item:before,
.tpf-modern .tpf-product-card.sc-added-item:after {
  border-color: rgba(255, 255, 255, 0) var(--tpf-turf) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
}

.tpf-modern .tpf-product-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tpf-chalk);
  border-radius: 0.5rem;
  height: 140px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.tpf-modern .tpf-product-image-wrap img {
  max-height: 120px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  margin-right: 0;
}

.tpf-modern .tpf-product-eyebrow {
  font-family: var(--tpf-font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tpf-steel);
  min-height: 1.1em;
}

.tpf-modern .tpf-product-name {
  font-weight: 600;
  color: var(--tpf-ink);
  line-height: 1.3;
  margin-bottom: 0.1rem;
}

.tpf-modern .tpf-product-variant {
  font-size: 0.8rem;
  color: var(--tpf-steel);
  min-height: 1.2em;
  margin-bottom: 0.4rem;
}

.tpf-modern .tpf-product-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.6rem;
  border-top: 1px solid var(--tpf-line);
}

.tpf-modern .tpf-product-price {
  font-family: var(--tpf-font-mono);
  font-weight: 600;
  font-size: 1rem;
  color: var(--tpf-ink);
}

.tpf-modern .tpf-add-to-cart {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: none;
  flex: 0 0 auto;
  background: var(--tpf-signal);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, transform 0.12s ease;
}

.tpf-modern .tpf-add-to-cart:hover {
  background: var(--tpf-ink);
  transform: scale(1.07);
}

.tpf-modern .tpf-favorite-star {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 1;
  color: var(--tpf-line);
  background: var(--tpf-surface);
  border-radius: 50%;
  width: 1.8rem;
  height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(21, 23, 26, 0.12);
  border: none;
}

.tpf-modern .tpf-favorite-star.favorited {
  color: var(--tpf-amber);
}

/* ---------- Store: cart summary panel ----------
 * #smartcart's internal markup (.sc-cart-heading, .sc-cart-item, .sc-toolbar,
 * etc.) is generated at runtime by the vendored jquery.smartCart.js plugin -
 * these rules restyle its stable class names rather than the plugin itself. */

.tpf-modern #smartcart {
  background: var(--tpf-surface);
  border: 1px solid var(--tpf-line);
  border-radius: 0.65rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(21, 23, 26, 0.04);
}

.tpf-modern #smartcart .sc-cart-heading {
  background: var(--tpf-ink);
  color: var(--tpf-chalk);
  font-family: var(--tpf-font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 0.95rem;
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: auto;
}

.tpf-modern #smartcart .sc-cart-heading a {
  color: rgba(241, 239, 234, 0.7);
}

.tpf-modern #smartcart .sc-cart-heading a:hover {
  color: #ffffff;
}

.tpf-modern #smartcart .sc-cart-clear {
  background: transparent;
  border: 1px solid rgba(241, 239, 234, 0.35);
  color: rgba(241, 239, 234, 0.85);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.6rem;
}

.tpf-modern #smartcart .sc-cart-clear:hover {
  background: var(--tpf-signal);
  border-color: var(--tpf-signal);
  color: #ffffff;
}

.tpf-modern #smartcart .sc-cart-item-list {
  padding: 0.2rem 1rem;
  min-height: 40px;
}

.tpf-modern #smartcart .sc-cart-item {
  border: none !important;
  border-bottom: 1px solid var(--tpf-line) !important;
  padding: 0.75rem 0;
  position: relative;
}

.tpf-modern #smartcart .sc-cart-item:last-child {
  border-bottom: none !important;
}

.tpf-modern #smartcart .sc-cart-item-summary {
  font-family: var(--tpf-font-mono);
  font-size: 0.85rem;
  color: var(--tpf-ink-soft);
}

.tpf-modern #smartcart .sc-cart-item-price,
.tpf-modern #smartcart .sc-cart-item-amount {
  font-weight: 600;
  color: var(--tpf-ink);
}

.tpf-modern #smartcart .sc-cart-item-discount {
  color: var(--tpf-turf);
}

.tpf-modern #smartcart .sc-cart-remove {
  color: var(--tpf-steel);
  font-size: 1.1rem;
  top: 0.7rem;
}

.tpf-modern #smartcart .sc-cart-remove:hover {
  color: var(--tpf-amber);
}

.tpf-modern #smartcart .sc-cart-item-qty {
  font-family: var(--tpf-font-mono);
  border-color: var(--tpf-line);
}

.tpf-modern #smartcart .sc-toolbar {
  background: var(--tpf-chalk);
  padding: 0.9rem 1rem;
  border-top: 1px solid var(--tpf-line);
}

.tpf-modern #smartcart .sc-cart-summary {
  font-family: var(--tpf-font-mono);
}

.tpf-modern #smartcart .sc-cart-summary-total {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--tpf-signal);
}

.tpf-modern #smartcart .sc-cart-toolbar {
  margin-top: 0.6rem;
}

.tpf-modern #smartcart .sc-cart-checkout {
  width: 100%;
  background: var(--tpf-signal);
  border-color: var(--tpf-signal);
  color: #ffffff;
  font-weight: 600;
  padding: 0.6rem;
}

.tpf-modern #smartcart .sc-cart-checkout:hover,
.tpf-modern #smartcart .sc-cart-checkout:focus {
  background: var(--tpf-ink);
  border-color: var(--tpf-ink);
  color: #ffffff;
}

.tpf-modern #smartcart .sc-cart-empty-msg {
  color: var(--tpf-steel);
  padding: 2.5rem 1rem;
  font-size: 0.9rem;
}

/* ---------- Calendar ---------- */

.tpf-modern .tpf-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.tpf-modern .tpf-calendar-title {
  font-family: var(--tpf-font-display);
  font-weight: 400;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--tpf-ink);
  margin: 0;
  text-align: center;
}

.tpf-modern .tpf-calendar-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--tpf-line);
  border-radius: 0.4rem;
  color: var(--tpf-ink);
  font-family: var(--tpf-font-body);
  font-weight: 500;
  font-size: 0.85rem;
  background: var(--tpf-surface);
  transition: background 0.12s ease, border-color 0.12s ease;
}

.tpf-modern .tpf-calendar-nav-btn:hover {
  background: var(--tpf-chalk);
  border-color: var(--tpf-steel);
  color: var(--tpf-ink);
}

.tpf-modern .tpf-calendar-today-btn {
  display: inline-block;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  background: var(--tpf-signal);
  color: #ffffff;
  font-family: var(--tpf-font-body);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tpf-modern .tpf-calendar-today-btn:hover {
  background: var(--tpf-ink);
  color: #ffffff;
}

.tpf-modern table.tpf-calendar-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
  background: var(--tpf-surface);
  border: 1px solid var(--tpf-line);
  border-radius: 0.5rem;
  overflow: hidden;
}

.tpf-modern table.tpf-calendar-table th {
  font-family: var(--tpf-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tpf-steel);
  background: var(--tpf-chalk);
  border-bottom: 1px solid var(--tpf-line);
  padding: 0.6rem 0.4rem;
  text-align: center;
}

.tpf-modern table.tpf-calendar-table td.tpf-calendar-day {
  vertical-align: top;
  height: 7.5rem;
  width: 14.28%;
  padding: 0.4rem;
  border: 1px solid var(--tpf-line);
}

.tpf-modern table.tpf-calendar-table td.tpf-calendar-day-outside {
  background: var(--tpf-chalk);
}

.tpf-modern table.tpf-calendar-table td.tpf-calendar-day-today {
  background: var(--tpf-signal-soft);
  box-shadow: inset 0 0 0 2px var(--tpf-signal);
}

.tpf-modern .tpf-calendar-day-number {
  text-align: right;
  font-family: var(--tpf-font-mono);
  font-size: 0.9rem;
  color: var(--tpf-ink);
  margin-bottom: 0.25rem;
}

.tpf-modern .tpf-calendar-day-outside .tpf-calendar-day-number {
  color: var(--tpf-steel);
}

.tpf-modern .tpf-calendar-day-today .tpf-calendar-day-number {
  color: var(--tpf-signal);
  font-weight: 700;
}

.tpf-modern .tpf-calendar-class {
  background: var(--tpf-surface);
  border: 1px solid var(--tpf-line);
  border-left: 3px solid var(--tpf-turf);
  border-radius: 0.3rem;
  padding: 0.25rem 0.45rem;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
  line-height: 1.35;
}

.tpf-modern .tpf-calendar-class-name {
  font-weight: 600;
  color: var(--tpf-ink);
  display: block;
}

.tpf-modern .tpf-calendar-class-time {
  font-family: var(--tpf-font-mono);
  color: var(--tpf-steel);
  font-size: 0.78rem;
}

/* Shifts - week view and default-schedule template editor share this grid */

.tpf-modern .tpf-shift-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.tpf-modern .tpf-shift-day {
  background: var(--tpf-surface);
  border: 1px solid var(--tpf-line);
  border-radius: 0.5rem;
  padding: 0.6rem;
  min-height: 10rem;
}

.tpf-modern .tpf-shift-day-today {
  box-shadow: inset 0 0 0 2px var(--tpf-signal);
}

.tpf-modern .tpf-shift-day-header {
  font-family: var(--tpf-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tpf-steel);
  margin-bottom: 0.5rem;
  text-align: center;
}

.tpf-modern .tpf-shift-day-date {
  display: block;
  font-family: var(--tpf-font-mono);
  font-size: 0.85rem;
  color: var(--tpf-ink);
  font-weight: 400;
  margin-top: 0.1rem;
}

.tpf-modern .tpf-shift-block {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--tpf-chalk);
  border: 1px solid var(--tpf-line);
  border-left: 3px solid var(--tpf-steel);
  border-radius: 0.3rem;
  padding: 0.35rem 0.5rem;
  margin-bottom: 0.4rem;
  font-family: var(--tpf-font-body);
  font-size: 0.82rem;
  line-height: 1.3;
  cursor: pointer;
}

.tpf-modern button.tpf-shift-block:hover {
  filter: brightness(0.97);
}

/* Non-interactive usage (e.g. the read-only My Shifts list) - same look,
   no pointer cursor implying it's clickable like the grid's buttons. */
.tpf-modern .tpf-shift-block-static {
  cursor: default;
}

/* Role colors - add a rule here for each new entry in Shift::ROLES */
.tpf-modern .tpf-shift-block-role-front-desk {
  background: var(--tpf-turf-soft);
  border-left-color: var(--tpf-turf);
}

.tpf-modern .tpf-shift-block-role-cleaner {
  background: var(--tpf-signal-soft);
  border-left-color: var(--tpf-signal);
}

.tpf-modern .tpf-shift-block-time {
  display: block;
  font-family: var(--tpf-font-mono);
  color: var(--tpf-steel);
  font-size: 0.76rem;
}

.tpf-modern .tpf-shift-block-role {
  display: block;
  font-weight: 600;
  color: var(--tpf-ink);
}

.tpf-modern .tpf-shift-block-staff {
  display: block;
  color: var(--tpf-steel);
  font-size: 0.78rem;
}

.tpf-modern button.tpf-shift-add-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.35rem;
  border: 1px dashed var(--tpf-line);
  border-radius: 0.3rem;
  background: transparent;
  color: var(--tpf-steel);
  font-family: var(--tpf-font-body);
  font-size: 0.78rem;
}

.tpf-modern button.tpf-shift-add-btn:hover {
  border-color: var(--tpf-signal);
  color: var(--tpf-signal);
}

/* Reports */

.tpf-modern .tpf-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.tpf-modern .tpf-report-group {
  text-align: left;
  scroll-margin-top: 1rem;
}

.tpf-modern .tpf-report-group-title {
  display: flex;
  align-items: center;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--tpf-ink);
  margin: 0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--tpf-line);
}

.tpf-modern .tpf-report-group-title > i {
  color: var(--tpf-signal);
}

.tpf-modern .tpf-report-tile {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--tpf-surface);
  border: 1px solid var(--tpf-line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.tpf-modern .tpf-report-tile:hover {
  border-color: var(--tpf-signal);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.tpf-modern .tpf-report-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  background: var(--tpf-chalk);
  color: var(--tpf-signal);
  font-size: 1.15rem;
  flex-shrink: 0;
}

.tpf-modern .tpf-report-tile-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.tpf-modern .tpf-report-tile-title {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--tpf-ink);
  text-decoration: none;
}

.tpf-modern .tpf-report-tile-title:hover {
  color: var(--tpf-signal);
}

.tpf-modern .tpf-report-tile-desc {
  color: var(--tpf-steel);
  font-size: 0.85rem;
}

.tpf-modern .tpf-report-tile-arrow {
  margin-left: auto;
  color: var(--tpf-steel);
}

.tpf-modern .tpf-amount-negative {
  color: var(--tpf-signal);
}

.tpf-modern .tpf-amount-positive {
  color: var(--tpf-turf);
}

.tpf-modern .tpf-checkins-chart-axis {
  stroke: var(--tpf-line);
}

.tpf-modern .tpf-checkins-chart-bar {
  fill: var(--tpf-signal);
}

.tpf-modern .tpf-checkins-chart-label {
  fill: var(--tpf-steel);
  font-family: var(--tpf-font-mono);
}

/*
 * Donut chart categorical colors - the dataviz skill's validated default
 * 8-hue palette rather than the brand's own signal/turf/amber, which
 * includes a red/green pair that risks CVD confusion. Named wedges show
 * every membership type at >=1% of active memberships (up to these 8 slots);
 * the rest fold into "Other" on the existing neutral --tpf-steel token
 * rather than a competing 9th hue. Past 3 wedges this palette can no longer
 * guarantee every pair is distinguishable by color alone under CVD simulation
 * (a pie is an "all-pairs" form - any two wedges get compared, not just
 * neighbors) - the legend and the full breakdown table below are what keep
 * every value readable regardless of color.
 */
.tpf-modern .tpf-viz-slice-1 {
  stroke: #2a78d6;
}

.tpf-modern .tpf-viz-slice-2 {
  stroke: #eb6834;
}

.tpf-modern .tpf-viz-slice-3 {
  stroke: #1baf7a;
}

.tpf-modern .tpf-viz-slice-4 {
  stroke: #eda100;
}

.tpf-modern .tpf-viz-slice-5 {
  stroke: #e87ba4;
}

.tpf-modern .tpf-viz-slice-6 {
  stroke: #008300;
}

.tpf-modern .tpf-viz-slice-7 {
  stroke: #4a3aa7;
}

.tpf-modern .tpf-viz-slice-8 {
  stroke: #e34948;
}

.tpf-modern .tpf-viz-slice-other {
  stroke: var(--tpf-steel);
}

.tpf-modern .tpf-viz-total {
  font-family: var(--tpf-font-mono);
  color: var(--tpf-steel);
  margin-bottom: 1rem;
}

.tpf-modern .tpf-viz-donut-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.tpf-modern .tpf-viz-slice-label {
  fill: #ffffff;
  font-family: var(--tpf-font-mono);
  font-size: 12px;
  font-weight: 600;
}

/* Aqua, yellow, and magenta are light enough that white text loses too much contrast - dark ink reads better on those slices. */
.tpf-modern .tpf-viz-slice-label.tpf-viz-slice-3,
.tpf-modern .tpf-viz-slice-label.tpf-viz-slice-4,
.tpf-modern .tpf-viz-slice-label.tpf-viz-slice-5 {
  fill: var(--tpf-ink);
}

.tpf-modern .tpf-viz-donut-center {
  fill: var(--tpf-ink);
  font-family: var(--tpf-font-display);
  font-size: 32px;
}

.tpf-modern .tpf-viz-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 220px;
}

.tpf-modern .tpf-viz-legend li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.tpf-modern .tpf-viz-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: currentColor;
  flex-shrink: 0;
}

.tpf-modern .tpf-viz-legend-swatch.tpf-viz-slice-1 { color: #2a78d6; }
.tpf-modern .tpf-viz-legend-swatch.tpf-viz-slice-2 { color: #eb6834; }
.tpf-modern .tpf-viz-legend-swatch.tpf-viz-slice-3 { color: #1baf7a; }
.tpf-modern .tpf-viz-legend-swatch.tpf-viz-slice-4 { color: #eda100; }
.tpf-modern .tpf-viz-legend-swatch.tpf-viz-slice-5 { color: #e87ba4; }
.tpf-modern .tpf-viz-legend-swatch.tpf-viz-slice-6 { color: #008300; }
.tpf-modern .tpf-viz-legend-swatch.tpf-viz-slice-7 { color: #4a3aa7; }
.tpf-modern .tpf-viz-legend-swatch.tpf-viz-slice-8 { color: #e34948; }
.tpf-modern .tpf-viz-legend-swatch.tpf-viz-slice-other { color: var(--tpf-steel); }

.tpf-modern .tpf-viz-legend-name {
  color: var(--tpf-ink);
}

.tpf-modern .tpf-viz-legend-value {
  margin-left: auto;
  color: var(--tpf-steel);
  font-size: 0.85rem;
}

/* Action Text / Trix.
 *
 * The application layout wraps every page's yield in
 * `<div class="col text-center mt-4">`, so text is centered app-wide and pages
 * opt out individually. A rich-text editor must never inherit that: staff
 * compose an email body in it, and Trix has no alignment control of its own,
 * so the centering is display-only - it is never written into the stored HTML.
 * The result is a WYSIWYG that lies, showing a centered draft that arrives
 * left-aligned in the member's inbox. Force left alignment on the editor, its
 * toolbar, and rendered Action Text content so what staff see is what is sent.
 */
trix-editor,
trix-toolbar,
.trix-content {
  text-align: left;
}

trix-editor {
  min-height: 12rem;
}

/* Pills rendered as links.
 *
 * `.tpf-modern a:not(.btn)` above is more specific than the pill variant
 * classes, so wrapping a pill in a link repaints its text ink-dark and loses
 * the variant color entirely. These restore it per variant, at a specificity
 * that wins.
 *
 * At rest a linked pill is visually identical to a plain one - it is a badge
 * first. The link only announces itself on hover, via an underline and the
 * pointer cursor the anchor gives us for free; the color deliberately stays
 * put, since the app-wide hover color would repaint a steel pill signal-red.
 */
.tpf-modern a.tpf-pill:not(.btn),
.tpf-modern a.tpf-pill:not(.btn):hover {
  text-decoration: none;
}

/* Match the span variants exactly (#55595f on --tpf-steel-soft, 5.59:1) -
   these two anchor rules were left behind when the pill family was
   rebalanced to >=4.5:1: -steel here previously resolved to --tpf-ink-soft
   (10.81:1, the "loudest pill on screen" value the span rule deliberately
   rejected) and -outline to --tpf-steel (4.39:1, the exact value the span
   rule was raised off). See .tpf-pill-steel/.tpf-pill-outline above for the
   full rationale - it applies here unchanged. */
.tpf-modern a.tpf-pill-steel:not(.btn),
.tpf-modern a.tpf-pill-steel:not(.btn):hover {
  color: #55595f;
}

.tpf-modern a.tpf-pill-turf:not(.btn),
.tpf-modern a.tpf-pill-turf:not(.btn):hover {
  color: var(--tpf-turf);
}

.tpf-modern a.tpf-pill-amber:not(.btn),
.tpf-modern a.tpf-pill-amber:not(.btn):hover {
  color: var(--tpf-amber);
}

/* Solid, not soft like the other pills: it sits on the dark hero, where a
   pale fill would read as just another status. */
.tpf-modern .tpf-pill-owes,
.tpf-modern a.tpf-pill-owes:not(.btn),
.tpf-modern a.tpf-pill-owes:not(.btn):hover {
  background: var(--tpf-signal);
  color: #ffffff;
}

/* #676b72 on --tpf-chalk, 4.66:1 - matches .tpf-pill-outline's span color
   above; see the steel comment just above for why this rule needed the
   same fix. */
.tpf-modern a.tpf-pill-outline:not(.btn),
.tpf-modern a.tpf-pill-outline:not(.btn):hover {
  color: #676b72;
}

.tpf-modern a.tpf-pill:not(.btn):hover {
  text-decoration: underline;
}

/* Formtastic selects.
 *
 * formtastic.css sizes text fields and textareas to 72% of the field column
 * (`.formtastic .stringish input`, `.formtastic .text textarea`) but ships no
 * equivalent rule for selects. A select therefore falls back to whatever its
 * class says: Bootstrap's .form-select is width:100%, so it overshoots the
 * text fields and breaks the column's alignment.
 *
 * Match them to the text fields. Deliberately narrow inline selects opt out
 * via .inline-medium, whose `width: auto !important` outranks this.
 */
.formtastic .select select,
.formtastic .select .form-select {
  width: 72%;
  /* formtastic.css's reset sets `.formtastic select { padding: 0 }`, which
     outranks Bootstrap's .form-select and strips its padding entirely - the
     text ends up flush against the border, with no room reserved for the
     arrow. Restore Bootstrap's vertical spacing and arrow gutter, with the
     0.5rem left padding this app uses on text inputs (see application.css). */
  padding: 0.375rem 2.25rem 0.375rem 0.5rem;
}

/*
 * Any Bootstrap dropdown in a Formtastic form keeps its arrow room, even one
 * written without a sizing class (formtastic.css's `.formtastic select
 * { padding: 0 }` reset otherwise lets the text run into the arrow - the
 * Business Settings bug, 2026-10-19). The crawl in
 * test/system/content_security_policy_test.rb measures every dropdown.
 */
.formtastic select.form-select {
  padding: 0.375rem 2.25rem 0.375rem 0.5rem;
}

/* Settings-nav attention dot (currently only Devices, for certificate
 * expiry). Sits inside the .nav-link so it inherits the item's spacing
 * and cannot knock the sidebar's alignment about.
 *
 * Colour is never the only signal - the anchor carries a title and
 * aria-label saying the same thing in words, because amber-vs-red is
 * exactly the distinction a red-green colour-blind manager cannot make.
 * Both tokens are the ones already used by .tpf-pill-amber and the
 * signal palette, so this introduces no new colours. */
.tpf-nav-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin-left: 0.4rem;
  vertical-align: 0.08rem;
  flex: 0 0 auto;
}

.tpf-nav-dot-expiring {
  background: var(--tpf-amber);
  box-shadow: 0 0 0 2px var(--tpf-amber-soft);
}

.tpf-nav-dot-expired {
  background: var(--tpf-signal);
  box-shadow: 0 0 0 2px var(--tpf-signal-soft);
}

/* Staff help guides - see docs/help/README.md. Not scoped to .tpf-modern:
   the Help drawer sits outside the page's content column. */

/* The Help button: a round button fixed in the bottom-right corner, on
   pages that have a guide. Below dropdowns (1000), the help panel and
   modals, so it never hides a menu opened near the corner; above the page
   itself. The page gets room at its foot (tpf-has-help-fab) so its last
   row can always be scrolled clear of the button. */
.tpf-help-fab {
  position: fixed;
  right: calc(1.25rem + env(safe-area-inset-right, 0px));
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 999;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--tpf-slate);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(21, 23, 26, 0.28);
  transition: background 0.12s ease, transform 0.12s ease;
}

.tpf-help-fab:hover,
.tpf-help-fab:focus-visible {
  background: #274868;
  color: #ffffff;
}

.tpf-help-fab:focus-visible {
  outline: 3px solid var(--tpf-signal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .tpf-help-fab:hover { transform: scale(1.06); }
}

.tpf-has-help-fab {
  padding-bottom: 5rem;
}

.tpf-help-drawer {
  --bs-offcanvas-width: min(440px, 100vw);
  background: var(--tpf-chalk);
  color: var(--tpf-ink);
  box-shadow: -8px 0 24px rgba(21, 23, 26, 0.12);
}

/* Reopened on arrival at a new page (help stayed open across pages - see
   _help_drawer): appear in place rather than slide in again. */
.tpf-help-drawer.tpf-help-no-slide {
  transition: none !important;
}

/* Help open on a wide screen: the page moves over to sit beside the panel
   instead of under it, so every step can be followed in the page. On
   tablets and phones the panel overlays the right side instead, with the
   rest of the page still usable (no backdrop - see _help_drawer). */
@media (min-width: 1200px) {
  body.tpf-help-open .fullpage {
    padding-right: min(440px, 100vw);
  }
}

.tpf-help-drawer .offcanvas-header {
  background: var(--tpf-surface);
  border-bottom: 1px solid var(--tpf-line);
}

.tpf-help-drawer .offcanvas-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
}

.tpf-help-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.tpf-help-summary {
  color: var(--tpf-steel);
  max-width: 70ch;
}

.tpf-help-page .tpf-help-topic {
  max-width: 76ch;
}

.tpf-help-topic {
  line-height: 1.55;
}

.tpf-help-section {
  margin-bottom: 1.4rem;
}

.tpf-help-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tpf-steel);
  margin: 0 0 0.5rem;
}

.tpf-help-list,
.tpf-help-steps,
.tpf-help-checklist {
  padding-left: 1.3rem;
  margin-bottom: 0.75rem;
}

.tpf-help-list li,
.tpf-help-steps > li,
.tpf-help-checklist > li {
  margin-bottom: 0.45rem;
}

.tpf-help-steps > li::marker {
  font-weight: 700;
  color: var(--tpf-signal);
}

.tpf-help-checklist {
  list-style: none;
  padding-left: 0;
}

.tpf-help-checklist > li {
  position: relative;
  padding-left: 1.7rem;
}

.tpf-help-checklist > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--tpf-steel);
  border-radius: 3px;
}

/* An on-screen label, styled like the control it names. */
.tpf-help-ui {
  display: inline-block;
  padding: 0 0.4em;
  border: 1px solid var(--tpf-line);
  border-radius: 4px;
  background: var(--tpf-surface);
  font-weight: 600;
  font-size: 0.92em;
  white-space: normal;
}

.tpf-help-message {
  font-style: italic;
}

.tpf-help-link {
  color: var(--tpf-signal);
  font-weight: 600;
}

.tpf-help-manager-only {
  font-size: 0.75em;
  font-weight: 600;
  color: var(--tpf-amber);
  background: var(--tpf-amber-soft);
  border-radius: 3px;
  padding: 0 0.35em;
  white-space: nowrap;
}

.tpf-help-state {
  display: inline-block;
  font-size: 0.8em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 3px;
  padding: 0 0.4em;
}

.tpf-help-state-on {
  color: #fff;
  background: var(--tpf-turf);
}

.tpf-help-state-off {
  color: var(--tpf-steel);
  background: var(--tpf-line);
}

.tpf-help-callout {
  border: 1px solid var(--tpf-line);
  border-left: 4px solid var(--tpf-steel);
  border-radius: 6px;
  background: var(--tpf-surface);
  padding: 0.7rem 0.9rem;
  margin: 0.75rem 0;
}

.tpf-help-callout-warning {
  border-left-color: var(--tpf-signal);
}

.tpf-help-callout-tip {
  border-left-color: var(--tpf-turf);
}

.tpf-help-callout-title {
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.tpf-help-callout-warning .tpf-help-callout-title {
  color: var(--tpf-signal);
}

.tpf-help-problems dt {
  font-weight: 600;
  margin-top: 0.7rem;
}

.tpf-help-problems dd {
  margin: 0.2rem 0 0 1rem;
  color: var(--tpf-ink);
}

.tpf-help-more {
  border-top: 1px solid var(--tpf-line);
  padding: 0.7rem 0;
}

.tpf-help-more > summary {
  font-weight: 600;
  cursor: pointer;
}

.tpf-help-footer {
  border-top: 1px solid var(--tpf-line);
  padding-top: 0.9rem;
  margin-top: 1rem;
}

.tpf-help-index {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.8rem;
}

/* Client photos (owner, 2026-10-22) - staff/shared/_client_photo: the photo,
   or the client's initials on a plain tile when there's none yet, the same
   size either way so nothing shifts. */
.tpf-client-photo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 10px;
  object-fit: cover;
  background: var(--tpf-line, #dee2e6);
}
.tpf-client-photo-lg { width: 96px; height: 96px; font-size: 1.9rem; }
.tpf-client-photo-md { width: 72px; height: 72px; font-size: 1.4rem; }
.tpf-client-photo-sm { width: 48px; height: 48px; font-size: 1rem; }
.tpf-client-photo-none {
  background: #e9ecef;
  color: #495057;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid #dee2e6;
}
.tpf-modern .tpf-hero-photo {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.tpf-modern .tpf-client-photo-panel {
  flex: 1 0 100%;
  border: 1px solid var(--tpf-line, #dee2e6);
  border-radius: 10px;
  padding: 1rem;
  background: #ffffff;
}
.tpf-client-photo-panel video,
.tpf-client-photo-panel canvas {
  width: 240px;
  height: 240px;
  border-radius: 10px;
  background: #212529;
  object-fit: cover;
}
/* The store: photos in the customer picker and the cart's heading. */
#store-customer-results .tpf-store-pick {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
}
#store-customer-results .tpf-store-pick-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
#store-customer-results .list-group-item.active .tpf-client-photo { box-shadow: 0 0 0 3px #ffffff; }
.tpf-cart-customer {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-align: left;
}
.tpf-cart-customer-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.tpf-cart-customer-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #5c636a; font-weight: 600; }
.tpf-cart-customer-name { font-size: 1.15rem; font-weight: 700; }
.tpf-cart-customer-meta { font-size: 0.85rem; color: #5c636a; }
/* A client photo is a button that opens it large. */
.tpf-client-photo-zoom {
  display: inline-flex;
  padding: 0;
  border: none;
  background: none;
  border-radius: 10px;
  cursor: zoom-in;
}
.tpf-client-photo-zoom:focus-visible { outline: 3px solid #0d6efd; outline-offset: 2px; }
#tpf-photo-zoom::backdrop { background: rgba(0, 0, 0, 0.6); }

/* Problems on the client page (owner, 2026-10-22): a purchase charged to
   account or failed, and a check-in that turned the member away, sit on a
   light red background with a label saying why. */
.tpf-modern .tpf-row-list li.tpf-row-problem {
  background: #fdecea;
  border-radius: 6px;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  border-bottom-color: #f5c2c7;
}
.tpf-modern .tpf-pill-problem {
  background: #f8d7da;
  color: #842029;
  border: 1px solid #f1aeb5;
}
.tpf-modern .tpf-row-list li a.tpf-checkin-row { justify-content: flex-start; gap: 0.75rem; }
.tpf-modern .tpf-checkin-problem {
  color: #842029;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The same light red on a striped table row (Payment History); Bootstrap
   paints stripes as an inset shadow, so the red goes on the same way. */
.tpf-modern table tr.tpf-row-problem > * {
  box-shadow: inset 0 0 0 9999px #fdecea !important;
}
.tpf-modern .tpf-table .tpf-pill-problem,
.tpf-modern .tpf-pill.tpf-pill-problem {
  background: #f8d7da;
  color: #842029;
  border: 1px solid #f1aeb5;
}

trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none;
}

trix-toolbar * {
  box-sizing: border-box;
}
trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto;
}
trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px;
}
trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 1.5vw;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
}
trix-toolbar .trix-button-group-spacer {
  flex-grow: 1;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button-group-spacer {
    display: none;
  }
}
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent;
}
trix-toolbar .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}
trix-toolbar .trix-button.trix-active {
  background: #cbeefa;
  color: rgb(0, 0, 0);
}
trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-toolbar .trix-button:disabled {
  color: rgba(0, 0, 0, 0.125);
}
@media (max-width: 768px) {
  trix-toolbar .trix-button {
    letter-spacing: -0.01em;
    padding: 0 0.3em;
  }
}
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button--icon {
    height: 2em;
    max-width: calc(0.8em + 3.5vw);
  }
}
trix-toolbar .trix-button--icon::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.6;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button--icon::before {
    right: 6%;
    left: 6%;
  }
}
trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}
trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.125;
}
trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%;
}
trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-dialogs {
  position: relative;
}
trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5;
}
trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-toolbar .trix-input--dialog.validate:invalid {
  box-shadow: #F00 0px 0px 1.5px 1px;
}
trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none;
}
trix-toolbar .trix-dialog--link {
  max-width: 600px;
}
trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline;
}
trix-toolbar .trix-dialog__link-fields .trix-input {
  flex: 1;
}
trix-toolbar .trix-dialog__link-fields .trix-button-group {
  flex: 0 0 content;
  margin: 0;
}

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

trix-editor [data-trix-mutable] ::-moz-selection, trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection {
  background: none;
}
trix-editor [data-trix-mutable] ::selection, trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection {
  background: none;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight;
}
trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent;
}
trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight;
}
trix-editor .attachment {
  position: relative;
}
trix-editor .attachment:hover {
  cursor: default;
}
trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text;
}
trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in;
}
trix-editor .attachment__progress[value="100"] {
  opacity: 0;
}
trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center;
}
trix-editor .trix-button-group {
  display: inline-flex;
}
trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}
trix-editor .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}
trix-editor .trix-button.trix-active {
  background: #cbeefa;
}
trix-editor .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}
trix-editor .trix-button--remove::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.7;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
}
trix-editor .trix-button--remove:hover {
  border-color: #333;
}
trix-editor .trix-button--remove:hover::before {
  opacity: 1;
}
trix-editor .attachment__metadata-container {
  position: relative;
}
trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
}
trix-editor .attachment__metadata .attachment__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
trix-editor .attachment__metadata .attachment__size {
  margin-left: 0.2em;
  white-space: nowrap;
}

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}
.trix-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}
.trix-content blockquote {
  border: 0 solid #ccc;
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}
.trix-content [dir=rtl] blockquote,
.trix-content blockquote[dir=rtl] {
  border-width: 0;
  border-right-width: 0.3em;
  margin-right: 0.3em;
  padding-right: 0.6em;
}
.trix-content li {
  margin-left: 1em;
}
.trix-content [dir=rtl] li {
  margin-right: 1em;
}
.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.5em;
  white-space: pre;
  background-color: #eee;
  overflow-x: auto;
}
.trix-content img {
  max-width: 100%;
  height: auto;
}
.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}
.trix-content .attachment a {
  color: inherit;
  text-decoration: none;
}
.trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
  color: inherit;
}
.trix-content .attachment__caption {
  text-align: center;
}
.trix-content .attachment__caption .attachment__name + .attachment__size::before {
  content: " •";
}
.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
}
.trix-content .attachment--preview .attachment__caption {
  color: #666;
  font-size: 0.9em;
  line-height: 1.2;
}
.trix-content .attachment--file {
  color: #333;
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: 1px solid #bbb;
  border-radius: 5px;
}
.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.trix-content .attachment-gallery .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}
.trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}
/*
 * Default Trix editor styles. See Action Text overwrites below.
*/

trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none; }

trix-toolbar * {
  box-sizing: border-box; }

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto; }

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px; }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 1.5vw; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button-group:not(:first-child) {
        margin-left: 0; } }

trix-toolbar .trix-button-group-spacer {
  flex-grow: 1; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button-group-spacer {
      display: none; } }

trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent; }
  trix-toolbar .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-toolbar .trix-button.trix-active {
    background: #cbeefa;
    color: black; }
  trix-toolbar .trix-button:not(:disabled) {
    cursor: pointer; }
  trix-toolbar .trix-button:disabled {
    color: rgba(0, 0, 0, 0.125); }
  @media (max-width: 768px) {
    trix-toolbar .trix-button {
      letter-spacing: -0.01em;
      padding: 0 0.3em; } }

trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button--icon {
      height: 2em;
      max-width: calc(0.8em + 3.5vw); } }
  trix-toolbar .trix-button--icon::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button--icon::before {
        right: 6%;
        left: 6%; } }
  trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 1; }
  trix-toolbar .trix-button--icon:disabled::before {
    opacity: 0.125; }

trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%; }

trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-dialogs {
  position: relative; }

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5; }

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
  trix-toolbar .trix-input--dialog.validate:invalid {
    box-shadow: #F00 0px 0px 1.5px 1px; }

trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none; }

trix-toolbar .trix-dialog--link {
  max-width: 600px; }

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline; }
  trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1; }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0; }

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none; }

trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::-moz-selection {
  background: highlight; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::selection {
  background: highlight; }

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent; }

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight; }

trix-editor .attachment {
  position: relative; }
  trix-editor .attachment:hover {
    cursor: default; }

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text; }

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in; }
  trix-editor .attachment__progress[value="100"] {
    opacity: 0; }

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center; }

trix-editor .trix-button-group {
  display: inline-flex; }

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent; }
  trix-editor .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-editor .trix-button.trix-active {
    background: #cbeefa; }
  trix-editor .trix-button:not(:disabled) {
    cursor: pointer; }

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
  trix-editor .trix-button--remove::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%; }
  trix-editor .trix-button--remove:hover {
    border-color: #333; }
    trix-editor .trix-button--remove:hover::before {
      opacity: 1; }

trix-editor .attachment__metadata-container {
  position: relative; }

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px; }
  trix-editor .attachment__metadata .attachment__name {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  trix-editor .attachment__metadata .attachment__size {
    margin-left: 0.2em;
    white-space: nowrap; }

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word; }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  .trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2; }
  .trix-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .trix-content [dir=rtl] blockquote,
  .trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .trix-content li {
    margin-left: 1em; }
  .trix-content [dir=rtl] li {
    margin-right: 1em; }
  .trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto; }
  .trix-content img {
    max-width: 100%;
    height: auto; }
  .trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .trix-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
        color: inherit; }
  .trix-content .attachment__caption {
    text-align: center; }
    .trix-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' \2022 '; }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .trix-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px; }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .trix-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}
/*
 * Member Workout Log (docs/superpowers/specs/2026-10-15-workout-log-design.md).
 * Phone-first: big tap targets, nothing global - scoped under .workout-log.
 */
.workout-log .btn-lg,
.workout-log .form-control-lg {
  min-height: 44px;
}
.workout-log .btn {
  margin-right: 0;
}

/* Routine checklist (workout_log/routines/checklist): each row is a
   <details>; its <summary> is the row header, so hide the browser's marker. */
.workout-log .checklist-toggle::-webkit-details-marker {
  display: none;
}
/* The exercise being worked on is the open row (one at a time): the whole
   row gets a green border and its status circle shows "selected", like a
   radio button. Not done yet: an empty circle. Done: a green check. */
.workout-log .checklist-radio {
  display: inline-block;
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  border: 2px solid var(--bs-secondary, #6c757d);
  border-radius: 50%;
}
.workout-log .checklist-row:has(> details[open]) .checklist-radio {
  border-color: var(--bs-success, #198754);
}
.workout-log .checklist-row:has(> details[open]) .checklist-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--bs-success, #198754);
}
.workout-log .checklist-row:has(> details[open]) {
  position: relative;
  z-index: 1;
  border: 2px solid var(--bs-success, #198754);
  border-radius: 0.5rem;
  box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.15);
}
.workout-log .checklist-row.is-done .checklist-status {
  color: var(--bs-success, #198754);
}

/* "Log an exercise" picker (workout_log/home/pick): each machine is a
   <details>; its flex <summary> loses the browser's marker, so draw a
   chevron that turns when the machine is open. */
.workout-log .pick-machine-toggle {
  list-style: none;
}
.workout-log .pick-machine-toggle::-webkit-details-marker {
  display: none;
}
.workout-log .pick-machine-toggle::before {
  content: "\25B8";
  display: inline-block;
  width: 1.25em;
  transition: transform 0.15s;
}
.workout-log details[open] > .pick-machine-toggle::before {
  transform: rotate(90deg);
}
/*





*/

body {
  min-height: 100vh;
}
/* Bootstrap's default .75rem left padding reads as too tight, especially
   on iPad, where text otherwise sits right against the input border. */
input.form-control,
textarea.form-control {
  padding-left: 0.5rem !important;
}
.bg-dark {
  background-color: rgb(0,0,0) !important;
}
.fullpage {
  min-height: 100vh;
  padding: 0;
}
.menu-sidebar {
  min-width: 240px;
  min-height: 50vh;
}
/* min-height only, never a fixed height: a fixed 100% held the content
   column at the window's height while long pages spilled past it, so the
   column's bottom padding sat mid-page and the last button touched the
   bottom of the window (owner, 2026-10-20). */
.full-height {
  min-height: 100%;
  margin-right: 0px;
}
/* Flex items default to min-width:auto, so a wide child (e.g. a DataTable)
   can force the whole column wider than the space left by the sidebar,
   which makes the row wrap the content column below the sidebar instead
   of side-by-side. min-width:0 lets it shrink instead.
   (Deliberately not adding overflow-x here - that would create a clipping
   context that cuts off floating dropdowns/popovers, e.g. bootstrap-select's
   options panel, whenever they render taller than the column itself.) */
.full-height > .col {
  min-width: 0;
}
.active {
  font-weight: bold;
}
.alert-dismissible {
  padding-left: $close-font-size + $alert-padding-x * 2;
}
/* Centered at half the width, in the normal flow. It used to be
   position:absolute (left 25%), which took the 22 staff forms using it out
   of the page's flow: the page thought it was ~100px tall, so its bottom
   padding sat under the heading and the form's last button touched the
   bottom of the window (owner, 2026-10-20). */
.middle-50 {
  position: relative !important;
  left: auto !important;
  width: 50% !important;
  margin-left: auto;
  margin-right: auto;
}

.middle-50 input {
  max-width: 24.5vw;
}
.middle-50 input.money-input {
  text-align: right;
  width: 4vw;
}
.middle-50 select {
  width: 24.5vw;
  padding: 0.15em 0.5em;
}
.middle-50 .checkbox-input {
  width: 1vw !important;
}
[type="submit"]:not(:disabled) {
  padding: 0.3em 1.6em; 
}
[type="submit"]:not(:enabled) {
  padding: 0.2em 1.5em; 
}

.dataTable > thead > tr > th[class="sorting"]::before{display: none !important}
.dataTable > thead > tr > th[class="sorting"]::after{display: none !important}

.inline-large {
  display: inline-block;
  width: 8vw;
  text-align: center;
}
.inline-small {
  display: inline-block;
  width: 6vw;
  text-align: center;
}
select.inline-medium {
  display: inline;
  width: auto !important;
  min-width: 18rem !important;
  max-width: 100%;
  /* Safari (notably iPadOS) sizes a closed select to its *currently
     selected* option's text rather than the widest possible option, so a
     generous min-width alone isn't enough once a long option is chosen -
     it can still butt right up against the arrow. Reserve extra room
     beyond Bootstrap's built-in 2.25rem so text never touches it. */
  padding-right: 2.75rem !important;
  padding-left: 0.5rem !important;
}
/* A short select beside another (Business Settings' fee day): sized to its
   text, with room kept for the arrow - formtastic's reset strips
   Bootstrap's padding, so without this the number runs into it. */
select.inline-small {
  width: auto !important;
  min-width: 5.5rem;
  padding-right: 2.75rem !important;
  padding-left: 0.5rem !important;
}
input.inline-small-left {
  display: inline;
  width: 6vw !important;
}
.nested-fields li {
  display: inline; 
}
.nested-fields select.nested-select {
  display: inline-block; 
  width: 8vw !important;
}
.nested-fields input.nested-checkbox {
  display: inline-block; 
}
.nested-fields input.nested-name {
  display: inline;
  width: 8vw;
}
.nested-fields input.nested-barcode {
  display: inline;
  width: 8vw;
}
.nested-fields input.nested-decimal {
  display: inline-block;
  width: 8vw !important;
}
.nested-fields input.nested-number {
  display: inline;
  width: 6vw;
}

.store-image {
  height: 150px;
  width: 150px;
  max-height: 150px;
  max-width: 150px;
}