/*
  CWS-specific styling that doesn't belong in the public Nepean theme.
  Loaded on every CiviCRM page by nepean.php; every rule is scoped to CWS's
  own extensions, so it's inert when another theme is active.

  Sections: 1. Wellness in Action banner; 2. payment presentation;
  3. BPoint card block.

  1. Wellness in Action contact-summary banner (cws.wia, wia.php
     wia_civicrm_summary). WiA writes its layout and colours as inline
     styles, so overriding them needs !important. Three states:
       .wia-active      green  (sessions remaining)
       .wia-approaching amber  (at or below the warning threshold)
       .wia-used-up     red    (none left)
     The membership box carries no state class (green, or amber in a grace
     period); its inline colours are left alone because they carry meaning.
     Better long-term: have cws.wia emit classes only and drop inline styles.
*/

#crm-container .wia-summary-banner {
  gap: var(--crm-l-reg) !important;
  margin: 0 !important;
}
#crm-container .wia-summary-box {
  border-left-width: 4px !important;
  border-radius: var(--nepean-radius-card, 12px);
  padding: var(--crm-l-reg) var(--crm-l-reg-2) !important;
  font-family: var(--nepean-font-display);
  font-size: var(--crm-font-size) !important;
  line-height: 1.65 !important;
}

/* Membership box: when the period or funder line must wrap, split it into
   even halves ("For Aisha Rahman until / September 30th, 2027") rather than
   leaving a stray year or "Ltd" on its own line. */
#crm-container .wia-summary-box .wia-period,
#crm-container .wia-summary-box .wia-funder {
  display: inline-block;
  text-wrap: balance;
}

/* Membership status chip beside the title. The word is the linked CiviCRM
   membership's status (New, Current, Grace, Expired...); cws.wia adds a tone:
   current (green), grace (amber), lapsed (red: Expired, Cancelled),
   other (neutral: Pending, Deceased, custom non-current statuses). */
#crm-container .wia-summary-box .wia-dot {
  display: none;
}
#crm-container .wia-summary-box .wia-status {
  display: inline-block;
  margin-left: var(--crm-l-medium);
  padding: 0 10px;
  border-radius: 999px;
  background: var(--crm-success-color);
  color: var(--crm-success-text-color);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.7;
  vertical-align: 1px;
  white-space: nowrap;
}
#crm-container .wia-summary-box .wia-status-grace {
  background: var(--crm-warning-color);
  color: var(--crm-warning-text-color);
}
#crm-container .wia-summary-box .wia-status-lapsed {
  background: var(--crm-danger-color);
  color: var(--crm-danger-text-color);
}
#crm-container .wia-summary-box .wia-status-other {
  background: var(--crm-inactive-color);
  color: var(--crm-paper);
}

/* Membership box takes the palette's tints by the same tone (overriding
   WiA's own inline colours, which other themes still use). */
#crm-container .wia-summary-box.wia-membership {
  color: var(--crm-text-color) !important;
}
#crm-container .wia-summary-box.wia-membership-current {
  background: var(--crm-success-light-color) !important;
  border-left-color: var(--crm-success-color) !important;
}
#crm-container .wia-summary-box.wia-membership-grace {
  background: var(--crm-warning-light-color) !important;
  border-left-color: var(--crm-warning-color) !important;
}
#crm-container .wia-summary-box.wia-membership-lapsed {
  background: var(--crm-danger-light-color) !important;
  border-left-color: var(--crm-danger-color) !important;
}
#crm-container .wia-summary-box.wia-membership-other {
  background: var(--crm-layer1-bg-color) !important;
  border-left-color: var(--crm-inactive-color) !important;
}

/* State colours from Riverlea's status variables, so they follow light/dark */
#crm-container .wia-summary-box.wia-active {
  background: var(--crm-success-light-color) !important;
  border-left-color: var(--crm-success-color) !important;
  color: var(--crm-text-color) !important;
}
#crm-container .wia-summary-box.wia-approaching {
  background: var(--crm-warning-light-color) !important;
  border-left-color: var(--crm-warning-color) !important;
  color: var(--crm-text-color) !important;
}
#crm-container .wia-summary-box.wia-used-up {
  background: var(--crm-danger-light-color) !important;
  border-left-color: var(--crm-danger-color) !important;
  color: var(--crm-text-color) !important;
}

/* Therapy figures as chips: Funded | Used | Remaining [| Charged].
   cws.wia names each figure (.wia-fig-limit / -used / -remaining / -charged),
   so styling follows meaning, not position. */
#crm-container .wia-therapy .wia-figures {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--crm-l-medium);
  width: 100%;
}
#crm-container .wia-therapy .wia-sep,
#crm-container .wia-therapy .wia-break {
  display: none;
}
#crm-container .wia-therapy .wia-fig {
  padding: var(--crm-l-medium) var(--crm-l-medium-3);
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--crm-paper);
  /* Explicit: in the used-up state WiA sets white text inline on the box,
     which would otherwise give white-on-white chips */
  color: var(--crm-text-color);
  font-size: 0.9375rem;
  white-space: nowrap;
}
/* Count chips in the WiA tab (cws.wia Tab.tpl), e.g. Nominations used "2 of 3" */
.crm-container .wia-chip {
  --wia-chip: var(--crm-inactive-color);
  display: inline-block;
  padding: 1px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--wia-chip) 28%, var(--crm-paper));
  background: color-mix(in srgb, var(--wia-chip) 12%, var(--crm-paper));
  color: var(--wia-chip);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* States: nominations (available / full) and funded sessions
   (available / approaching / used-up, same rule as the banner).
   A chip with no state class is neutral (earlier, closed nominations). */
.crm-container .wia-chip-available   { --wia-chip: var(--crm-success-color); }
.crm-container .wia-chip-full,
.crm-container .wia-chip-approaching { --wia-chip: var(--crm-warning-color); }
.crm-container .wia-chip-used-up     { --wia-chip: var(--crm-danger-color); }

/* "Remaining" chip carries the state colour */
#crm-container .wia-therapy.wia-active .wia-fig-remaining {
  background: var(--crm-success-color);
  color: var(--crm-success-text-color);
}
#crm-container .wia-therapy.wia-approaching .wia-fig-remaining {
  background: var(--crm-warning-color);
  color: var(--crm-warning-text-color);
}
#crm-container .wia-therapy.wia-used-up .wia-fig-remaining {
  background: var(--crm-danger-color);
  color: var(--crm-danger-text-color);
}
/* Sessions charged at the normal rate: money owed, so an outlined danger
   chip beside the others rather than a line of loose text */
#crm-container .wia-therapy .wia-fig-charged {
  border-color: var(--crm-danger-color);
  color: var(--crm-danger-color);
}

/*
  2. Payment presentation (folded in from cws.paymentux, 1 Oct 2026).
     js/payment-ux.js adds the classes; colours come from Riverlea's status
     variables, so they follow the palette, light and dark.
       - refund links (mjwpayment/refund, is_refund=1) -> red "Refund" button
       - contribution status text -> badge
       - payment method -> chip with icon (optional scheme logos in img/)
*/

/* Refund button. Doubled class + #crm-container outranks core's
   action-item / crm-hover-button styling, but Riverlea's _icons.css forces
   the colour of any icon hover-button with !important
   (.crm-hover-button:has(.crm-i) { color: var(--crm-link-color) !important }),
   so the colours need !important too. Nothing else here does. */
#crm-container a.cws-refund-btn.cws-refund-btn,
.crm-container a.cws-refund-btn.cws-refund-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 0;
  border-radius: var(--crm-btn-radius, 6px);
  background-color: var(--crm-danger-color) !important;
  color: var(--crm-danger-text-color) !important;
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.5;
  text-decoration: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
  opacity: 1;
}
#crm-container a.cws-refund-btn.cws-refund-btn:hover,
#crm-container a.cws-refund-btn.cws-refund-btn:focus-visible,
.crm-container a.cws-refund-btn.cws-refund-btn:hover {
  background-color: color-mix(in srgb, var(--crm-danger-color) 85%, #000) !important;
  color: var(--crm-danger-text-color) !important;
  text-decoration: none;
}
#crm-container a.cws-refund-btn .crm-i,
.crm-container a.cws-refund-btn .crm-i {
  color: inherit;
}
#crm-container a.cws-refund-btn .fa-chevron-right,
.crm-container a.cws-refund-btn .fa-chevron-right {
  display: none;
}
/* Inside an action menu (the contribution "more" dropdown) the inline-flex
   button shrank to its label and sat on the right. Keep it a block-level row
   sized to its label, pinned left like the other menu items. */
#crm-container li > a.cws-refund-btn.cws-refund-btn,
.crm-container li > a.cws-refund-btn.cws-refund-btn {
  display: flex;
  width: fit-content;
  float: none;
  margin: 4px auto 4px 3px;
}

/* Status badges */
.crm-container .cws-badge {
  --cws-badge: var(--crm-inactive-color);
  display: inline-block;
  padding: 1px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cws-badge) 28%, var(--crm-paper));
  background: color-mix(in srgb, var(--cws-badge) 12%, var(--crm-paper));
  color: var(--cws-badge);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.crm-container .cws-badge-completed      { --cws-badge: var(--crm-success-color); }
.crm-container .cws-badge-pending,
.crm-container .cws-badge-pending-refund { --cws-badge: var(--crm-warning-color); }
.crm-container .cws-badge-partially-paid { --cws-badge: var(--crm-info-color); }
.crm-container .cws-badge-refunded,
.crm-container .cws-badge-failed         { --cws-badge: var(--crm-danger-color); }
.crm-container .cws-badge-chargeback     { --cws-badge: var(--nepean-warm, var(--crm-danger-color)); }
.crm-container .cws-badge-cancelled      { --cws-badge: var(--crm-inactive-color); }

/* Payment method chips */
.crm-container .cws-method {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 10px;
  border-radius: 999px;
  border: 1px solid var(--crm-border-color);
  background: var(--crm-layer1-bg-color);
  color: var(--crm-text-color);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.crm-container .cws-method .crm-i {
  color: var(--crm-inactive-color);
  font-size: 0.6875rem;
}
.crm-container .cws-method img.cws-method-logo {
  display: block;
  height: 15px;
  width: auto;
}

/*
  3. BPoint card block (cws.bpoint). The CVN hint is a <button>, so Riverlea's
     button styling outranked bpoint.css and drew it as a solid primary
     button. Put it back to a quiet icon that darkens on hover, with a focus
     ring for keyboard users.
*/
.crm-container #bpoint-payment-wrapper button.bpoint-cvn-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0 0 0 var(--crm-l-medium);
  padding: 3px;
  border: 0;
  border-radius: 4px;
  background: none;
  box-shadow: none;
  color: var(--crm-inactive-color);
  line-height: 1;
  cursor: help;
}
.crm-container #bpoint-payment-wrapper button.bpoint-cvn-hint:hover,
.crm-container #bpoint-payment-wrapper button.bpoint-cvn-hint:focus-visible {
  background: none;
  color: var(--crm-text-color);
}
.crm-container #bpoint-payment-wrapper button.bpoint-cvn-hint:focus-visible {
  outline: 2px solid var(--crm-focus-color);
  outline-offset: 1px;
}