/*--------------------------------------------------------------
  Marriage Champions Section Styles
  
  Covers: Email Invites, Sent Invites, and related Marriage Champions pages
  
  @since 2026-01-25
--------------------------------------------------------------*/

/* =============================================================================
   EMAIL INVITES PAGE REDESIGN
   
   Figma: https://www.figma.com/design/tg3U3gNcIYMn9aY9JYrIZc/AMFM-Portal?node-id=86-4803
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Hide Top Navigation Tab (Email Invites link above the card)
   ----------------------------------------------------------------------------- */

/* Hide the "Email Invites" tab in the main user navigation */
#object-nav #invites-personal-li,
nav.main-navs #invites-personal-li,
.bb-single-main-nav #invites-personal-li {
  display: none !important;
}

/* -----------------------------------------------------------------------------
   Phase 1: Card Container Structure
   ----------------------------------------------------------------------------- */

/* Outer card wrapper - white with shadow, 8px padding creates space for inner border */
.bp-invites-container {
  position: relative;
  background: var(--amfm-bg-primary, #ffffff) !important;
  border-radius: var(--amfm-radius-xl, 16px);
  box-shadow: var(--amfm-shadow-card);
  padding: var(--amfm-spacing-md, 8px);
  margin-top: var(--amfm-spacing-3xl, 24px);
}

/* Inner border via pseudo-element - wraps both header and content */
.bp-invites-container::before {
  content: '';
  position: absolute;
  top: var(--amfm-spacing-md, 8px);
  left: var(--amfm-spacing-md, 8px);
  right: var(--amfm-spacing-md, 8px);
  bottom: var(--amfm-spacing-md, 8px);
  border: 1px solid var(--amfm-border-primary, rgba(0, 0, 0, 0.08));
  border-radius: var(--amfm-radius-md, 8px);
  pointer-events: none;
  z-index: 0;
}

/* Ensure content sits above the pseudo-element border */
.bp-invites-container > * {
  position: relative;
  z-index: 1;
}

/* Override BuddyBoss theme's inner content styling - remove its border/bg */
.bp-invites-container .bb-bp-invites-content,
.bb-template-v2 .bp-invites-container .bb-bp-invites-content {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 var(--amfm-spacing-4xl, 32px) var(--amfm-spacing-4xl, 32px) var(--amfm-spacing-4xl, 32px) !important;
}

/* -----------------------------------------------------------------------------
   Phase 2: Header Area with Title + Pill Tabs
   ----------------------------------------------------------------------------- */

/* Subnav container - becomes header row with padding inside inner border */
.bp-invites-container nav.bp-subnavs,
.bp-invites-container nav#subnav,
#buddypress .bp-invites-container nav.bp-subnavs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--amfm-spacing-xl, 16px);
  padding: var(--amfm-spacing-4xl, 32px);
  padding-bottom: var(--amfm-spacing-3xl, 24px);
  border-bottom: none !important;
  margin-bottom: 0;
}

/* Divider line - JS-created element, full width of nav minus padding */
.bp-invites-container .amfm-header-divider {
  flex-basis: 100%;
  height: 1px;
  background-color: #E9EAEB;
  margin-top: var(--amfm-spacing-3xl, 24px);
  margin-left: 0;
  margin-right: 0;
}

/* Add "Email invites" title before tabs */
.bp-invites-container nav.bp-subnavs::before {
  content: "Email invites";
  font-family: var(--amfm-font-body, 'Inter', sans-serif);
  font-size: var(--amfm-text-lg, 18px);
  font-weight: 600;
  line-height: var(--amfm-leading-lg, 28px);
  color: var(--amfm-text-primary, #181d27);
  flex-shrink: 0;
}

/* Tab list container - pill button group */
.bp-invites-container ul.subnav {
  display: flex !important;
  gap: var(--amfm-spacing-xs, 4px);
  padding: var(--amfm-spacing-xs, 4px);
  background: transparent;
  border: 1px solid var(--amfm-border-secondary, #e9eaeb);
  border-radius: var(--amfm-radius-lg, 10px);
  margin: 0;
  list-style: none;
}

/* Hide the mobile dropdown select */
.bp-invites-container nav.bp-subnavs select.bp-navs__dropdown {
  display: none !important;
}

/* Handle the hideshow overflow menu - show nested tabs inline instead */
.bp-invites-container ul.subnav li.hideshow {
  display: contents !important; /* Makes children behave as if parent doesn't exist */
}

/* Hide the "more" button and dropdown wrapper elements */
.bp-invites-container ul.subnav li.hideshow > a.more-button,
.bp-invites-container ul.subnav li.hideshow > .bb_more_dropdown_overlay {
  display: none !important;
}

/* Make the dropdown submenu display inline (not as dropdown) */
.bp-invites-container ul.subnav li.hideshow ul.sub-menu,
.bp-invites-container ul.subnav li.hideshow ul.bb_more_dropdown {
  display: contents !important;
  position: static !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Tab items - pill buttons (including nested ones from hideshow) */
.bp-invites-container ul.subnav li.bp-personal-sub-tab,
.bp-invites-container ul.subnav li.hideshow ul li.bp-personal-sub-tab {
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 0;
}

/* Override BuddyBoss margin */
.bb-template-v2 .buddypress-wrap .bp-invites-container #subnav ul li {
  margin-bottom: 0 !important;
}

.bp-invites-container ul.subnav li.bp-personal-sub-tab a,
.bp-invites-container ul.subnav li.hideshow ul li.bp-personal-sub-tab a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--amfm-spacing-md, 8px) var(--amfm-spacing-lg, 12px);
  font-family: var(--amfm-font-body, 'Inter', sans-serif);
  font-size: var(--amfm-text-sm, 14px);
  font-weight: 600;
  line-height: var(--amfm-leading-sm, 20px);
  color: var(--amfm-neutral-500, #717680);
  text-decoration: none;
  background: transparent !important;
  border-radius: var(--amfm-radius-sm, 6px);
  transition: all var(--amfm-transition-fast, 0.15s ease);
  height: 36px;
  white-space: nowrap;
}

/* Active/selected tab - override BuddyBoss beige background */
.bp-invites-container ul.subnav li.bp-personal-sub-tab.current a,
.bp-invites-container ul.subnav li.bp-personal-sub-tab.selected a,
.bp-invites-container ul.subnav li.hideshow ul li.bp-personal-sub-tab.current a,
.bp-invites-container ul.subnav li.hideshow ul li.bp-personal-sub-tab.selected a,
.bp-invites-container #subnav .current a,
.bp-invites-container #subnav .selected a {
  background: var(--amfm-neutral-100, #f5f5f5) !important;
  background-color: var(--amfm-neutral-100, #f5f5f5) !important;
  color: var(--amfm-text-primary, #181d27) !important;
  box-shadow: 
    0px 1px 3px 0px rgba(10, 13, 18, 0.1),
    0px 1px 2px -1px rgba(10, 13, 18, 0.1);
}

/* Tab hover state */
.bp-invites-container ul.subnav li.bp-personal-sub-tab a:hover,
.bp-invites-container ul.subnav li.hideshow ul li.bp-personal-sub-tab a:hover {
  color: var(--amfm-text-primary, #181d27);
}

/* Hide the duplicate "Send Invites" h2 heading */
.bp-invites-container h2.screen-heading {
  display: none;
}

/* -----------------------------------------------------------------------------
   Phase 3: Description Text
   ----------------------------------------------------------------------------- */

/* Override BuddyBoss description styling */
.bp-invites-container p.info.invite-info,
#buddypress .bp-invites-container .invite-info,
#buddypress .bb-bp-invites-content .invite-info {
  font-family: var(--amfm-font-display, 'Financier Display', Georgia, serif) !important;
  font-size: var(--amfm-text-2xl, 24px) !important;
  font-weight: 300 !important;
  line-height: var(--amfm-leading-xl, 32px) !important;
  color: var(--amfm-text-primary, #181d27) !important;
  letter-spacing: normal !important;
  max-width: 800px;
  margin: 0;
  /* No top padding - container provides spacing from divider */
  padding: 0 0 var(--amfm-spacing-4xl, 40px) 0;
}

/* -----------------------------------------------------------------------------
   Phase 4: Form Table → Modern Form Layout
   
   NOTE: These styles are ONLY for the "Send Invites" form table.
   The "Sent Invites" table is in .table-responsive and styled separately.
   All selectors use #send-invite-form parent to scope to form only.
   ----------------------------------------------------------------------------- */

/* Override BuddyBoss table background (form only) */
#send-invite-form table#member-invites-table,
#send-invite-form .bp-tables-user,
#send-invite-form table.bp-tables-user {
  background-color: transparent !important;
  background: transparent !important;
}

/* Table reset - make it behave like a flex container (form only) */
#send-invite-form table#member-invites-table {
  display: block;
  width: 100%;
  border: none;
  border-collapse: separate;
  border-spacing: 0;
}

#send-invite-form table#member-invites-table thead {
  display: none; /* Hide table headers - we'll add labels via CSS */
}

#send-invite-form table#member-invites-table tbody {
  display: flex;
  flex-direction: column;
  gap: var(--amfm-spacing-2xl, 20px);
  width: 100%;
}

/* Form rows */
#send-invite-form table#member-invites-table tbody tr {
  display: flex;
  align-items: flex-end;
  gap: var(--amfm-spacing-2xl, 20px);
  width: 100%;
}

/* Form cells */
#send-invite-form table#member-invites-table tbody td {
  display: flex;
  flex-direction: column;
  gap: var(--amfm-spacing-sm, 6px);
  padding: 0;
  border: none;
  background: transparent;
}

/* Field cells - equal width */
#send-invite-form table#member-invites-table tbody td.field-name,
#send-invite-form table#member-invites-table tbody td.field-email,
#send-invite-form table#member-invites-table tbody td.field-member-type {
  flex: 1;
  min-width: 0;
}

/* Action cells - auto width */
#send-invite-form table#member-invites-table tbody td.field-actions,
#send-invite-form table#member-invites-table tbody td.field-actions-last {
  flex: none;
  width: auto;
}

/* Add labels via ::before on first row cells (FORM ONLY) */
#send-invite-form table#member-invites-table tbody tr:first-child td.field-name::before {
  content: "Recipient Name";
  font-family: var(--amfm-font-body, 'Inter', sans-serif);
  font-size: var(--amfm-text-sm, 14px);
  font-weight: 500;
  line-height: var(--amfm-leading-sm, 20px);
  color: var(--amfm-text-secondary, #414651);
}

#send-invite-form table#member-invites-table tbody tr:first-child td.field-email::before {
  content: "Recipient Email";
  font-family: var(--amfm-font-body, 'Inter', sans-serif);
  font-size: var(--amfm-text-sm, 14px);
  font-weight: 500;
  line-height: var(--amfm-leading-sm, 20px);
  color: var(--amfm-text-secondary, #414651);
}

#send-invite-form table#member-invites-table tbody tr:first-child td.field-member-type::before {
  content: "Profile Type";
  font-family: var(--amfm-font-body, 'Inter', sans-serif);
  font-size: var(--amfm-text-sm, 14px);
  font-weight: 500;
  line-height: var(--amfm-leading-sm, 20px);
  color: var(--amfm-text-secondary, #414651);
}

/* Input field styling - override BuddyBoss background */
.bp-invites-container input.invites-input,
.bp-invites-container select.invites-input,
#member-invites-table tr td input.invites-input,
#member-invites-table tr td select.invites-input {
  width: 100%;
  height: 44px;
  padding: 10px 14px;
  font-family: var(--amfm-font-body, 'Inter', sans-serif);
  font-size: var(--amfm-text-base, 16px);
  font-weight: 400;
  line-height: var(--amfm-leading-base, 24px);
  color: var(--amfm-text-primary, #181d27);
  background: var(--amfm-bg-primary, #ffffff) !important;
  background-color: var(--amfm-bg-primary, #ffffff) !important;
  border: 1px solid var(--amfm-neutral-300, #d5d7da) !important;
  border-radius: var(--amfm-radius-md, 8px) !important;
  box-shadow: var(--amfm-shadow-sm, 0px 1px 2px 0px rgba(10, 13, 18, 0.05));
  box-sizing: border-box;
  transition: border-color var(--amfm-transition-fast, 0.15s ease),
              box-shadow var(--amfm-transition-fast, 0.15s ease);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Input placeholder */
.bp-invites-container input.invites-input::placeholder {
  color: var(--amfm-neutral-500, #717680);
}

/* Input focus state */
.bp-invites-container input.invites-input:focus,
.bp-invites-container select.invites-input:focus {
  outline: none;
  border-color: var(--amfm-brand-500, #c07858);
  box-shadow: 
    var(--amfm-shadow-sm),
    0 0 0 3px rgba(192, 120, 88, 0.15);
}

/* Select dropdown - add chevron */
.bp-invites-container select.invites-input {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23A4A7AE' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
  cursor: pointer;
}

/* Last row (add button row) - special handling (form only) */
#send-invite-form table#member-invites-table tbody tr:last-child {
  justify-content: flex-end;
}

#send-invite-form table#member-invites-table tbody tr:last-child td.field-name[colspan="3"] {
  display: none;
}

/* -----------------------------------------------------------------------------
   Phase 5: Action Buttons (Send Invites form only)
   ----------------------------------------------------------------------------- */

/* Override BuddyBoss circular button styles - need high specificity (form only) */
#send-invite-form #member-invites-table td.field-actions span,
#send-invite-form #member-invites-table th.actions span {
  background-color: transparent !important;
  border-radius: var(--amfm-radius-md, 8px) !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: normal !important;
}

/* Remove button - square with trash icon (form only) */
#send-invite-form .field-actions-remove,
#send-invite-form #member-invites-table .field-actions .field-actions-remove {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  background: var(--amfm-bg-primary, #ffffff) !important;
  background-color: var(--amfm-bg-primary, #ffffff) !important;
  border: 1px solid var(--amfm-neutral-300, #d5d7da) !important;
  border-radius: var(--amfm-radius-md, 8px) !important;
  box-shadow: var(--amfm-shadow-sm);
  cursor: pointer;
  transition: all var(--amfm-transition-fast, 0.15s ease);
  /* Add trash icon as background */
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3333 4.99999V4.33332C13.3333 3.3999 13.3333 2.93319 13.1517 2.57667C12.9919 2.26307 12.7369 2.0081 12.4233 1.84831C12.0668 1.66666 11.6001 1.66666 10.6667 1.66666H9.33333C8.39991 1.66666 7.9332 1.66666 7.57668 1.84831C7.26308 2.0081 7.00811 2.26307 6.84832 2.57667C6.66667 2.93319 6.66667 3.3999 6.66667 4.33332V4.99999M8.33333 9.58332V13.75M11.6667 9.58332V13.75M2.5 4.99999H17.5M15.8333 4.99999V14.3333C15.8333 15.7335 15.8333 16.4335 15.5608 16.9683C15.3212 17.4387 14.9387 17.8212 14.4683 18.0608C13.9335 18.3333 13.2335 18.3333 11.8333 18.3333H8.16667C6.76654 18.3333 6.06647 18.3333 5.53169 18.0608C5.06129 17.8212 4.67883 17.4387 4.43915 16.9683C4.16667 16.4335 4.16667 15.7335 4.16667 14.3333V4.99999' stroke='%23A4A7AE' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
}

.bp-invites-container .field-actions-remove:hover {
  border-color: var(--amfm-neutral-400, #a4a7ae) !important;
  background-color: var(--amfm-neutral-50, #f9fafb) !important;
}

/* Hide the X icon - we're using trash background instead */
.bp-invites-container .field-actions-remove i,
#member-invites-table .field-actions .field-actions-remove i {
  display: none !important;
}

/* Add button - brand colored square button */
.bp-invites-container .field-actions-add,
#member-invites-table .field-actions-last .field-actions-add,
.bp-invites-container #member-invites-table .field-actions-add {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  background: var(--amfm-brand-600, #aa6140) !important;
  background-color: var(--amfm-brand-600, #aa6140) !important;
  border: 2px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--amfm-radius-md, 8px) !important;
  box-shadow: 
    var(--amfm-shadow-sm),
    inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
    inset 0px -2px 0px 0px rgba(10, 13, 18, 0.05);
  cursor: pointer;
  transition: all var(--amfm-transition-fast, 0.15s ease);
}

.bp-invites-container .field-actions-add:hover {
  background: var(--amfm-brand-700, #8f5236) !important;
  background-color: var(--amfm-brand-700, #8f5236) !important;
}

/* Override the circular icon styling inside add button */
.bp-invites-container .field-actions-add i,
#member-invites-table .field-actions-add i,
.bp-invites-container #member-invites-table .field-actions-add i {
  background: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: var(--amfm-icon-md, 20px) !important;
  color: #ffffff !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
}

/* Submit button container - minimal top spacing */
.bp-invites-container #send-invite-form .submit,
.bp-invites-container #send-invite-form div.submit {
  margin-top: var(--amfm-spacing-lg, 12px) !important;
  padding-top: 0 !important;
}

/* Send Invites button - override all BuddyBoss button styles */
.bp-invites-container #send-invite-form #submit,
#buddypress .bp-invites-container input[type=submit],
.buddypress .buddypress-wrap .bp-invites-container input[type=submit] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--amfm-spacing-sm, 6px);
  height: auto !important;
  min-height: 0 !important;
  padding: 10px var(--amfm-spacing-xl, 16px) !important;
  font-family: var(--amfm-font-body, 'Inter', sans-serif) !important;
  font-size: var(--amfm-text-base, 16px) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: var(--amfm-text-white, #ffffff) !important;
  background: var(--amfm-brand-600, #aa6140) !important;
  background-color: var(--amfm-brand-600, #aa6140) !important;
  border: 2px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--amfm-radius-md, 8px) !important;
  box-shadow: 
    var(--amfm-shadow-sm),
    inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
    inset 0px -2px 0px 0px rgba(10, 13, 18, 0.05);
  cursor: pointer;
  transition: all var(--amfm-transition-fast, 0.15s ease);
}

.bp-invites-container #send-invite-form #submit:hover,
#buddypress .bp-invites-container input[type=submit]:hover {
  background: var(--amfm-brand-700, #8f5236) !important;
  background-color: var(--amfm-brand-700, #8f5236) !important;
}

.bp-invites-container #send-invite-form #submit:active,
#buddypress .bp-invites-container input[type=submit]:active {
  background: var(--amfm-brand-800, #683b27) !important;
  background-color: var(--amfm-brand-800, #683b27) !important;
}

/* -----------------------------------------------------------------------------
   Responsive Adjustments
   ----------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
  /* Reduce outer card padding on mobile */
  .bp-invites-container {
    padding: var(--amfm-spacing-xs, 4px);
  }
  
  /* Adjust inner border pseudo-element for smaller padding */
  .bp-invites-container::before {
    top: var(--amfm-spacing-xs, 4px);
    left: var(--amfm-spacing-xs, 4px);
    right: var(--amfm-spacing-xs, 4px);
    bottom: var(--amfm-spacing-xs, 4px);
  }
  
  /* Header padding - consistent 16px on mobile */
  .bp-invites-container nav.bp-subnavs {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--amfm-spacing-xl, 16px);
    padding-bottom: var(--amfm-spacing-xl, 16px);
    gap: var(--amfm-spacing-lg, 12px);
  }
  
  /* Content padding - match header's 16px */
  .bp-invites-container .bb-bp-invites-content {
    padding: var(--amfm-spacing-xl, 16px) !important;
    padding-top: var(--amfm-spacing-xl, 16px) !important;
  }
  
  /* Description text smaller on mobile */
  .bp-invites-container p.info.invite-info {
    font-size: var(--amfm-text-lg, 18px);
    line-height: var(--amfm-leading-lg, 28px);
    padding: var(--amfm-spacing-xl, 16px) 0 var(--amfm-spacing-3xl, 24px) 0;
  }
  
  /* Stack form fields vertically on mobile (form only) */
  #send-invite-form table#member-invites-table tbody tr {
    flex-direction: column;
    align-items: stretch;
  }
  
  /* All cells get labels on mobile (form only) */
  #send-invite-form table#member-invites-table tbody td.field-name::before {
    content: "Recipient Name";
    font-family: var(--amfm-font-body, 'Inter', sans-serif);
    font-size: var(--amfm-text-sm, 14px);
    font-weight: 500;
    line-height: var(--amfm-leading-sm, 20px);
    color: var(--amfm-text-secondary, #414651);
  }
  
  #send-invite-form table#member-invites-table tbody td.field-email::before {
    content: "Recipient Email";
    font-family: var(--amfm-font-body, 'Inter', sans-serif);
    font-size: var(--amfm-text-sm, 14px);
    font-weight: 500;
    line-height: var(--amfm-leading-sm, 20px);
    color: var(--amfm-text-secondary, #414651);
  }
  
  #send-invite-form table#member-invites-table tbody td.field-member-type::before {
    content: "Profile Type";
    font-family: var(--amfm-font-body, 'Inter', sans-serif);
    font-size: var(--amfm-text-sm, 14px);
    font-weight: 500;
    line-height: var(--amfm-leading-sm, 20px);
    color: var(--amfm-text-secondary, #414651);
  }
  
  /* Full width for action buttons on mobile (form only) */
  #send-invite-form table#member-invites-table tbody td.field-actions,
  #send-invite-form table#member-invites-table tbody td.field-actions-last {
    width: 100%;
    align-items: flex-end;
  }
}

/* =============================================================================
   SENT INVITES TABLE REDESIGN
   
   Styles for the "Sent Invites" view table (viewing already-sent invitations).
   Separate from the "Send Invites" form table above.
   
   Figma: https://www.figma.com/design/tg3U3gNcIYMn9aY9JYrIZc/AMFM-Portal?node-id=91-2961
   
   @since 2026-01-27
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Table Wrapper & Container
   ----------------------------------------------------------------------------- */

/* Wrapper div around the table */
.bp-invites-container .table-responsive {
  overflow-x: auto;
  width: 100%;
}

/* Table container - white card with border and shadow */
.bp-invites-container .table-responsive table.invite-settings,
.bp-invites-container .table-responsive table.bp-tables-user.invite-settings,
.buddypress-wrap .bp-invites-container .table-responsive table.invite-settings {
  width: 100%;
  background: var(--amfm-bg-primary, #ffffff) !important;
  border: 1px solid var(--amfm-border-secondary, #e9eaeb) !important;
  border-radius: var(--amfm-radius-lg, 12px) !important;
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  margin: 0;
}

/* Override any BuddyBoss display flex conversions */
.bp-invites-container .table-responsive table.invite-settings {
  display: table !important;
}

.bp-invites-container .table-responsive table.invite-settings thead {
  display: table-header-group !important;
}

.bp-invites-container .table-responsive table.invite-settings tbody {
  display: table-row-group !important;
}

.bp-invites-container .table-responsive table.invite-settings tr {
  display: table-row !important;
}

.bp-invites-container .table-responsive table.invite-settings th,
.bp-invites-container .table-responsive table.invite-settings td {
  display: table-cell !important;
}

/* -----------------------------------------------------------------------------
   Table Header Row
   ----------------------------------------------------------------------------- */

.bp-invites-container .table-responsive table.invite-settings thead tr {
  background: #fafafa !important;
}

/* Override BuddyBoss header cell borders */
#member-invites-table.invite-settings th,
#member-invites-table.invite-settings th:first-child,
.bp-invites-container .table-responsive table.invite-settings thead th {
  font-family: var(--amfm-font-body, 'Inter', sans-serif) !important;
  font-size: var(--amfm-text-xs, 12px) !important;
  font-weight: 600 !important;
  line-height: var(--amfm-leading-xs, 18px) !important;
  color: var(--amfm-neutral-500, #717680) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: var(--amfm-spacing-lg, 12px) var(--amfm-spacing-3xl, 24px) !important;
  height: 44px;
  vertical-align: middle;
  text-align: left;
  background: #fafafa !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--amfm-border-secondary, #e9eaeb) !important;
}

/* First column header styling */
.bp-invites-container .table-responsive table.invite-settings thead th:first-child {
  border-top-left-radius: var(--amfm-radius-lg, 12px);
}

/* Last column header styling */
.bp-invites-container .table-responsive table.invite-settings thead th:last-child {
  border-top-right-radius: var(--amfm-radius-lg, 12px);
  text-align: right;
  padding-right: var(--amfm-spacing-3xl, 24px);
}

/* Adjust header label text for "Status" column */
.bp-invites-container .table-responsive table.invite-settings thead th.title:last-child {
  text-align: right;
}

/* -----------------------------------------------------------------------------
   Table Body Rows
   ----------------------------------------------------------------------------- */

.bp-invites-container .table-responsive table.invite-settings tbody tr {
  background: var(--amfm-bg-primary, #ffffff) !important;
  border: none !important;
}

.bp-invites-container .table-responsive table.invite-settings tbody tr:hover {
  background: var(--amfm-neutral-50, #f9fafb) !important;
}

.bp-invites-container .table-responsive table.invite-settings tbody td {
  font-family: var(--amfm-font-body, 'Inter', sans-serif) !important;
  font-size: var(--amfm-text-sm, 14px) !important;
  font-weight: 500 !important;
  line-height: var(--amfm-leading-sm, 20px) !important;
  color: var(--amfm-text-primary, #181d27) !important;
  padding: var(--amfm-spacing-xl, 16px) var(--amfm-spacing-2xl, 20px) !important;
  height: 64px;
  vertical-align: middle;
  border-bottom: 1px solid var(--amfm-border-secondary, #e9eaeb) !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  background: transparent !important;
}

/* Remove border on last row */
.bp-invites-container .table-responsive table.invite-settings tbody tr:last-child td {
  border-bottom: none !important;
}

/* Name column - primary text */
.bp-invites-container .table-responsive table.invite-settings tbody td.field-name {
  font-weight: 500;
}

.bp-invites-container .table-responsive table.invite-settings tbody td.field-name span {
  font-family: var(--amfm-font-body, 'Inter', sans-serif) !important;
  font-size: var(--amfm-text-sm, 14px) !important;
  font-weight: 500 !important;
  color: var(--amfm-text-primary, #181d27) !important;
}

/* Email column - tertiary text */
.bp-invites-container .table-responsive table.invite-settings tbody td.field-email span {
  font-family: var(--amfm-font-body, 'Inter', sans-serif) !important;
  font-size: var(--amfm-text-sm, 14px) !important;
  font-weight: 400 !important;
  color: var(--amfm-text-tertiary, #535862) !important;
}

/* Date column */
.bp-invites-container .table-responsive table.invite-settings tbody td.field-email span {
  font-weight: 400;
}

/* Status/Action column - use flexbox with space-between */
.bp-invites-container .table-responsive table.invite-settings tbody td:last-child {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding-right: var(--amfm-spacing-3xl, 24px) !important;
}

/* -----------------------------------------------------------------------------
   Status Column - Badges & Actions (Enhanced via JavaScript)
   ----------------------------------------------------------------------------- */

/* Status content container (created by JS) */
.bp-invites-container .table-responsive table.invite-settings .amfm-status-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--amfm-spacing-lg, 12px);
}

/* Status badges */
.bp-invites-container .table-responsive table.invite-settings .amfm-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--amfm-spacing-md, 8px);
  border-radius: var(--amfm-radius-full, 9999px);
  font-family: var(--amfm-font-body, 'Inter', sans-serif);
  font-size: var(--amfm-text-xs, 12px);
  font-weight: 500;
  line-height: var(--amfm-leading-xs, 18px);
  white-space: nowrap;
}

/* Registered/Active badge - green */
.bp-invites-container .table-responsive table.invite-settings .amfm-status-badge.amfm-status-active {
  background: var(--amfm-success-50, #ecfdf3);
  color: var(--amfm-success-700, #067647);
  border: 1px solid var(--amfm-success-200, #abefc6);
}

/* Invited badge - amber */
.bp-invites-container .table-responsive table.invite-settings .amfm-status-badge.amfm-status-invited {
  background: #fef9ee;
  color: #b54708;
  border: 1px solid #fed99b;
}

/* Trash button (created by JS) */
.bp-invites-container .table-responsive table.invite-settings .amfm-trash-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  margin: 0;
  background: transparent !important;
  border: 1px solid var(--amfm-border-secondary, #e9eaeb) !important;
  border-radius: var(--amfm-radius-md, 8px);
  text-decoration: none !important;
  transition: all 0.15s ease;
  cursor: pointer;
  position: relative;
}

.bp-invites-container .table-responsive table.invite-settings .amfm-trash-button::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/trash.svg') !important;
  background-size: 20px 20px;
  background-position: center;
  background-repeat: no-repeat;
}

.bp-invites-container .table-responsive table.invite-settings .amfm-trash-button:hover {
  background: var(--amfm-neutral-50, #f9fafb) !important;
  border-color: var(--amfm-neutral-300, #d5d7da) !important;
}

.bp-invites-container .table-responsive table.invite-settings .amfm-trash-button:active {
  background: var(--amfm-neutral-100, #f7f7f7) !important;
}

/* Legacy styles for pre-JS state */
.bp-invites-container .table-responsive table.invite-settings .bp-invitee-status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.bp-invites-container .table-responsive table.invite-settings .revoked-access {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  margin: 0;
  background: transparent !important;
  border: 1px solid var(--amfm-border-secondary, #e9eaeb) !important;
  border-radius: var(--amfm-radius-md, 8px);
  color: var(--amfm-neutral-400, #a4a7ae) !important;
  text-decoration: none !important;
  transition: all 0.15s ease;
  cursor: pointer;
  font-size: 0 !important;
  line-height: 0 !important;
}

.bp-invites-container .table-responsive table.invite-settings .revoked-access .bb-icon-rl,
.bp-invites-container .table-responsive table.invite-settings .revoked-access .bb-icon-times,
.bp-invites-container .table-responsive table.invite-settings .revoked-access span {
  display: none !important;
}

.bp-invites-container .table-responsive table.invite-settings .revoked-access::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/trash.svg') !important;
  background-size: 20px 20px;
  background-position: center;
  background-repeat: no-repeat;
}

/* -----------------------------------------------------------------------------
   Responsive Design - Mobile
   ----------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
  /* Make table scroll horizontally on small screens */
  .bp-invites-container .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Reduce table border radius on mobile */
  .bp-invites-container .table-responsive table.invite-settings {
    border-radius: var(--amfm-radius-md, 8px) !important;
  }
  
  /* Adjust header padding */
  .bp-invites-container .table-responsive table.invite-settings thead th {
    padding: var(--amfm-spacing-md, 8px) var(--amfm-spacing-xl, 16px) !important;
    font-size: 11px !important;
  }
  
  /* Adjust cell padding */
  .bp-invites-container .table-responsive table.invite-settings tbody td {
    padding: var(--amfm-spacing-lg, 12px) var(--amfm-spacing-xl, 16px) !important;
    font-size: 13px !important;
    height: auto;
    min-height: 56px;
  }
  
  /* Smaller action buttons on mobile */
  .bp-invites-container .table-responsive table.invite-settings .amfm-trash-button,
  .bp-invites-container .table-responsive table.invite-settings .revoked-access {
    width: 36px;
    height: 36px;
  }
  
  .bp-invites-container .table-responsive table.invite-settings .amfm-trash-button::after,
  .bp-invites-container .table-responsive table.invite-settings .revoked-access::after {
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
  }
  
  /* Adjust status content gap on mobile */
  .bp-invites-container .table-responsive table.invite-settings .amfm-status-content {
    gap: var(--amfm-spacing-md, 8px);
  }
  
  /* Slightly smaller badges on mobile */
  .bp-invites-container .table-responsive table.invite-settings .amfm-status-badge {
    font-size: 11px;
    padding: 2px 6px;
  }
}

/* -----------------------------------------------------------------------------
   Empty State (when no invites sent)
   ----------------------------------------------------------------------------- */

.bp-invites-container .table-responsive table.invite-settings tbody tr td[colspan] {
  text-align: center;
  padding: var(--amfm-spacing-4xl, 32px) !important;
  color: var(--amfm-text-tertiary, #535862) !important;
  font-style: italic;
}


/* =============================================================================
   MARRIAGE CHAMPIONS CARD (Our Marriage Champions page)
   
   Full card UI for the [membership_user_table] shortcode.
   Includes card container, header with actions, description, and table.
   
   Figma: https://www.figma.com/design/tg3U3gNcIYMn9aY9JYrIZc/AMFM-Portal?node-id=62-6294
   
   @since 2026-01-27
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Card Container Structure
   ----------------------------------------------------------------------------- */

/* Outer card wrapper - white with shadow */
.amfm-champions-card {
  position: relative;
  background: var(--amfm-bg-primary, #ffffff);
  border-radius: var(--amfm-radius-xl, 16px);
  box-shadow: var(--amfm-shadow-card, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1));
  padding: var(--amfm-spacing-md, 8px);
}

/* Inner border wrapper */
.amfm-champions-card-inner {
  position: relative;
  border: 1px solid var(--amfm-border-primary, rgba(0, 0, 0, 0.08));
  border-radius: var(--amfm-radius-md, 8px);
  overflow: hidden;
}

/* -----------------------------------------------------------------------------
   Card Header
   ----------------------------------------------------------------------------- */

.amfm-champions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amfm-spacing-xl, 16px);
  padding: var(--amfm-spacing-3xl, 24px) var(--amfm-spacing-4xl, 32px);
  background: var(--amfm-bg-primary, #ffffff);
}

/* Title */
.amfm-champions-title {
  font-family: var(--amfm-font-body, 'Inter', sans-serif);
  font-size: var(--amfm-text-lg, 18px);
  font-weight: 600;
  line-height: var(--amfm-leading-lg, 28px);
  color: var(--amfm-text-primary, #181d27);
  margin: 0;
}

/* Actions container */
.amfm-champions-actions {
  display: flex;
  align-items: center;
  gap: var(--amfm-spacing-lg, 12px);
}

/* Header divider */
.amfm-champions-divider {
  height: 1px;
  background-color: var(--amfm-border-secondary, #e9eaeb);
  margin: 0 var(--amfm-spacing-4xl, 32px);
}

/* -----------------------------------------------------------------------------
   Button Styles
   ----------------------------------------------------------------------------- */

/* Base button */
.amfm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--amfm-spacing-sm, 6px);
  padding: 10px var(--amfm-spacing-xl, 16px);
  font-family: var(--amfm-font-body, 'Inter', sans-serif);
  font-size: var(--amfm-text-sm, 14px);
  font-weight: 600;
  line-height: var(--amfm-leading-sm, 20px);
  text-decoration: none;
  border-radius: var(--amfm-radius-md, 8px);
  cursor: pointer;
  transition: all var(--amfm-transition-fast, 0.15s ease);
}

.amfm-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Secondary button (text-only style for Invite Champions) */
.amfm-btn-secondary {
  color: var(--amfm-text-secondary, #414651);
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 10px var(--amfm-spacing-lg, 12px);
  transition: all var(--amfm-transition-fast, 0.15s ease);
}

.amfm-btn-secondary:hover {
  background: var(--amfm-neutral-50, #f9fafb);
  color: var(--amfm-text-primary, #181d27);
}

.amfm-btn-secondary:focus {
  background: var(--amfm-neutral-50, #f9fafb);
  color: var(--amfm-text-primary, #181d27);
  outline: 2px solid var(--amfm-brand-500, #c07858);
  outline-offset: 2px;
}

/* Use uploaded user-plus.svg icon */
.amfm-btn-secondary svg path {
  stroke: currentColor;
}

/* Search input wrapper */
.amfm-search-input {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 320px;
  max-width: 100%;
}

/* Search icon - positioned absolutely inside the input */
.amfm-search-input .amfm-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 1;
}

/* Text input field */
.amfm-search-input input[type="text"] {
  width: 100%;
  height: 40px;
  padding: 10px 14px 10px 42px; /* Extra left padding for icon */
  font-family: var(--amfm-font-body, 'Inter', sans-serif);
  font-size: var(--amfm-text-sm, 14px);
  font-weight: 400;
  line-height: var(--amfm-leading-sm, 20px);
  color: var(--amfm-text-primary, #181d27);
  background: var(--amfm-bg-primary, #ffffff);
  border: 1px solid var(--amfm-neutral-300, #d5d7da);
  border-radius: var(--amfm-radius-md, 8px);
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  transition: all var(--amfm-transition-fast, 0.15s ease);
}

.amfm-search-input input[type="text"]::placeholder {
  color: var(--amfm-neutral-500, #717680);
}

.amfm-search-input input[type="text"]:focus {
  outline: none;
  border-color: var(--amfm-brand-500, #c07858);
  box-shadow: 
    0px 1px 2px 0px rgba(10, 13, 18, 0.05),
    0 0 0 3px rgba(192, 120, 88, 0.15);
}

/* -----------------------------------------------------------------------------
   Card Content
   ----------------------------------------------------------------------------- */

.amfm-champions-content {
  padding: var(--amfm-spacing-3xl, 24px) var(--amfm-spacing-4xl, 32px) var(--amfm-spacing-4xl, 32px);
  background: var(--amfm-bg-primary, #ffffff);
}

/* Description text */
.amfm-champions-description {
  font-family: var(--amfm-font-display, 'Financier Display', Georgia, serif);
  font-size: var(--amfm-text-2xl, 24px);
  font-weight: 300;
  line-height: var(--amfm-leading-xl, 32px);
  color: var(--amfm-text-primary, #181d27);
  margin: 0 0 var(--amfm-spacing-4xl, 32px) 0;
  max-width: 800px;
}

/* -----------------------------------------------------------------------------
   Table Container
   ----------------------------------------------------------------------------- */

.amfm-champions-table-wrapper {
  overflow-x: auto;
}

/* Main table - white card with border */
table.membership-user-table {
  width: 100%;
  background: var(--amfm-bg-primary, #ffffff);
  border: 1px solid var(--amfm-border-secondary, #e9eaeb);
  border-radius: var(--amfm-radius-lg, 12px);
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  margin: 0;
}

/* When pagination exists, remove bottom border radius from table */
.amfm-champions-table-wrapper:has(+ .amfm-pagination) table.membership-user-table {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}

/* -----------------------------------------------------------------------------
   Table Header
   ----------------------------------------------------------------------------- */

table.membership-user-table thead {
  background: #fafafa;
}

table.membership-user-table thead tr {
  background: #fafafa;
}

table.membership-user-table thead th {
  font-family: var(--amfm-font-body, 'Inter', sans-serif);
  font-size: var(--amfm-text-xs, 12px);
  font-weight: 600;
  line-height: var(--amfm-leading-xs, 18px);
  color: var(--amfm-neutral-500, #717680);
  text-transform: none;
  letter-spacing: normal;
  padding: var(--amfm-spacing-lg, 12px) var(--amfm-spacing-3xl, 24px);
  height: 44px;
  vertical-align: middle;
  text-align: left;
  background: #fafafa;
  border: none;
  border-bottom: 1px solid var(--amfm-border-secondary, #e9eaeb);
}

/* First header cell - rounded top-left corner */
table.membership-user-table thead th:first-child {
  border-top-left-radius: var(--amfm-radius-lg, 12px);
}

/* Last header cell - rounded top-right corner */
table.membership-user-table thead th:last-child {
  border-top-right-radius: var(--amfm-radius-lg, 12px);
}

/* -----------------------------------------------------------------------------
   Table Body Rows
   ----------------------------------------------------------------------------- */

table.membership-user-table tbody tr {
  background: var(--amfm-bg-primary, #ffffff);
  transition: background-color 0.15s ease;
}

table.membership-user-table tbody tr:hover:not(.empty-row) {
  background: var(--amfm-neutral-50, #f9fafb);
}

table.membership-user-table tbody td {
  font-family: var(--amfm-font-body, 'Inter', sans-serif);
  font-size: var(--amfm-text-sm, 14px);
  font-weight: 400;
  line-height: var(--amfm-leading-sm, 20px);
  color: var(--amfm-text-primary, #181d27);
  padding: var(--amfm-spacing-xl, 16px) var(--amfm-spacing-3xl, 24px);
  height: 72px;
  vertical-align: middle;
  border: none;
  border-bottom: 1px solid var(--amfm-border-secondary, #e9eaeb);
}

/* Remove bottom border on last row (when no pagination) */
table.membership-user-table tbody tr:last-child td {
  border-bottom: none;
}

/* Last row cells - rounded bottom corners (only when no pagination) */
.amfm-champions-table-wrapper:not(:has(+ .amfm-pagination)) table.membership-user-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--amfm-radius-lg, 12px);
}

.amfm-champions-table-wrapper:not(:has(+ .amfm-pagination)) table.membership-user-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--amfm-radius-lg, 12px);
}

/* When pagination exists, keep border on last table row */
.amfm-champions-table-wrapper:has(+ .amfm-pagination) table.membership-user-table tbody tr:last-child td {
  border-bottom: 1px solid var(--amfm-border-secondary, #e9eaeb);
}

/* -----------------------------------------------------------------------------
   Name Column (with avatar)
   ----------------------------------------------------------------------------- */

table.membership-user-table td.avatar_name {
  display: flex;
  align-items: center;
  gap: var(--amfm-spacing-lg, 12px);
}

/* Avatar image */
table.membership-user-table td.avatar_name img.avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--amfm-radius-full, 9999px);
  object-fit: cover;
  flex-shrink: 0;
}

/* User name */
table.membership-user-table td.avatar_name .user_name {
  font-family: var(--amfm-font-body, 'Inter', sans-serif);
  font-size: var(--amfm-text-sm, 14px);
  font-weight: 500;
  line-height: var(--amfm-leading-sm, 20px);
  color: var(--amfm-text-primary, #181d27);
}

/* -----------------------------------------------------------------------------
   Column Styles
   ----------------------------------------------------------------------------- */

/* Email column */
table.membership-user-table td.field-email {
  color: var(--amfm-text-tertiary, #535862);
  font-weight: 400;
}

/* Campus column */
table.membership-user-table td.field-campus {
  color: var(--amfm-text-tertiary, #535862);
  font-weight: 400;
}

/* Joined date column */
table.membership-user-table td.field-joined {
  color: var(--amfm-text-tertiary, #535862);
  font-weight: 400;
}

/* Status column */
table.membership-user-table td.field-status {
  text-align: left;
}

/* -----------------------------------------------------------------------------
   Status Badges
   ----------------------------------------------------------------------------- */

.amfm-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--amfm-spacing-md, 8px);
  border-radius: var(--amfm-radius-full, 9999px);
  font-family: var(--amfm-font-body, 'Inter', sans-serif);
  font-size: var(--amfm-text-xs, 12px);
  font-weight: 500;
  line-height: var(--amfm-leading-xs, 18px);
  white-space: nowrap;
}

/* Active badge - green */
.amfm-status-badge.amfm-status-active {
  background: var(--amfm-success-50, #ecfdf3);
  color: var(--amfm-success-700, #067647);
  border: 1px solid var(--amfm-success-200, #abefc6);
}

/* Invited badge - amber */
.amfm-status-badge.amfm-status-invited {
  background: #fef9ee;
  color: #b54708;
  border: 1px solid #fed99b;
}

/* Pending badge - gray */
.amfm-status-badge.amfm-status-pending {
  background: var(--amfm-neutral-50, #f9fafb);
  color: var(--amfm-neutral-600, #535862);
  border: 1px solid var(--amfm-neutral-200, #e9eaeb);
}

/* -----------------------------------------------------------------------------
   Empty State
   ----------------------------------------------------------------------------- */

table.membership-user-table tbody tr.empty-row td {
  text-align: center;
  padding: var(--amfm-spacing-4xl, 32px) var(--amfm-spacing-3xl, 24px);
  color: var(--amfm-text-tertiary, #535862);
  font-style: normal;
}

table.membership-user-table tbody tr.empty-row td a {
  color: var(--amfm-brand-600, #aa6140);
  text-decoration: none;
  font-weight: 500;
}

table.membership-user-table tbody tr.empty-row td a:hover {
  text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   Pagination Controls
   ----------------------------------------------------------------------------- */

.amfm-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amfm-spacing-lg, 12px);
  padding: var(--amfm-spacing-lg, 12px) var(--amfm-spacing-3xl, 24px) var(--amfm-spacing-xl, 16px);
  background: var(--amfm-bg-primary, #ffffff);
  border: 1px solid var(--amfm-border-secondary, #e9eaeb);
  border-top: 1px solid var(--amfm-border-secondary, #e9eaeb);
  border-bottom-left-radius: var(--amfm-radius-lg, 12px);
  border-bottom-right-radius: var(--amfm-radius-lg, 12px);
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  margin-top: -1px; /* Overlap with table border */
}

/* Pagination buttons (Previous/Next) */
.amfm-pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--amfm-spacing-sm, 6px);
  padding: 10px var(--amfm-spacing-lg, 12px);
  font-family: var(--amfm-font-body, 'Inter', sans-serif);
  font-size: var(--amfm-text-sm, 14px);
  font-weight: 600;
  line-height: var(--amfm-leading-sm, 20px);
  color: var(--amfm-text-secondary, #414651);
  background: var(--amfm-bg-primary, #ffffff);
  border: 1px solid var(--amfm-neutral-300, #d5d7da);
  border-radius: var(--amfm-radius-md, 8px);
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
  cursor: pointer;
  transition: all var(--amfm-transition-fast, 0.15s ease);
}

.amfm-pagination-btn:hover:not(:disabled) {
  background: var(--amfm-neutral-50, #f9fafb);
  border-color: var(--amfm-neutral-400, #a4a7ae);
  color: var(--amfm-text-primary, #181d27);
}

.amfm-pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.amfm-pagination-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Page numbers container */
.amfm-pagination-numbers {
  display: flex;
  align-items: center;
  gap: var(--amfm-spacing-xs, 4px);
}

/* Individual page number button */
.amfm-pagination-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: var(--amfm-spacing-md, 8px);
  font-family: var(--amfm-font-body, 'Inter', sans-serif);
  font-size: var(--amfm-text-sm, 14px);
  font-weight: 500; /* Medium weight per Figma */
  line-height: var(--amfm-leading-sm, 20px);
  color: var(--amfm-neutral-500, #717680);
  background: transparent;
  border: none;
  border-radius: var(--amfm-radius-md, 8px);
  cursor: pointer;
  transition: all var(--amfm-transition-fast, 0.15s ease);
}

.amfm-pagination-number:hover {
  background: var(--amfm-neutral-50, #f9fafb);
  color: var(--amfm-text-secondary, #414651);
}

/* Active page number */
.amfm-pagination-number.active {
  background: #fafafa;
  color: var(--amfm-text-secondary, #414651);
}

/* Ellipsis */
.amfm-pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  font-family: var(--amfm-font-body, 'Inter', sans-serif);
  font-size: var(--amfm-text-sm, 14px);
  color: var(--amfm-neutral-500, #717680);
  -webkit-user-select: none;
  user-select: none;
}

/* -----------------------------------------------------------------------------
   Responsive - Tablet & Mobile
   ----------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
  /* Reduce header padding on tablet */
  .amfm-champions-header {
    padding: var(--amfm-spacing-xl, 16px) var(--amfm-spacing-3xl, 24px);
  }
  
  .amfm-champions-divider {
    margin: 0 var(--amfm-spacing-3xl, 24px);
  }
  
  .amfm-champions-content {
    padding: var(--amfm-spacing-xl, 16px) var(--amfm-spacing-3xl, 24px) var(--amfm-spacing-3xl, 24px);
  }
}

@media screen and (max-width: 768px) {
  /* Stack header on mobile */
  .amfm-champions-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--amfm-spacing-lg, 12px);
    padding: var(--amfm-spacing-xl, 16px);
  }
  
  .amfm-champions-title {
    font-size: var(--amfm-text-base, 16px);
  }
  
  .amfm-champions-actions {
    width: 100%;
    justify-content: flex-start;
  }
  
  .amfm-champions-divider {
    margin: 0 var(--amfm-spacing-xl, 16px);
  }
  
  .amfm-champions-content {
    padding: var(--amfm-spacing-xl, 16px);
  }
  
  .amfm-champions-description {
    font-size: var(--amfm-text-lg, 18px);
    line-height: var(--amfm-leading-lg, 28px);
    margin-bottom: var(--amfm-spacing-3xl, 24px);
  }
  
  /* Reduce card padding on mobile */
  .amfm-champions-card {
    padding: var(--amfm-spacing-xs, 4px);
  }
  
  /* Table adjustments */
  table.membership-user-table thead th {
    padding: var(--amfm-spacing-md, 8px) var(--amfm-spacing-xl, 16px);
    font-size: 11px;
  }
  
  table.membership-user-table tbody td {
    padding: var(--amfm-spacing-lg, 12px) var(--amfm-spacing-xl, 16px);
    font-size: 13px;
    height: auto;
    min-height: 56px;
  }
  
  /* Smaller avatar on mobile */
  table.membership-user-table td.avatar_name img.avatar {
    width: 32px;
    height: 32px;
  }
  
  /* Smaller buttons on mobile */
  .amfm-btn {
    padding: 8px var(--amfm-spacing-lg, 12px);
    font-size: 13px;
  }
  
  .amfm-btn svg {
    width: 18px;
    height: 18px;
  }
  
  /* Pagination adjustments for mobile */
  .amfm-pagination {
    flex-direction: column;
    gap: var(--amfm-spacing-lg, 12px);
  }
  
  .amfm-pagination-btn {
    width: 100%;
    justify-content: center;
  }
  
  .amfm-pagination-numbers {
    width: 100%;
    justify-content: center;
  }
  
  .amfm-pagination-number {
    min-width: 36px;
    height: 36px;
    padding: 8px 10px;
    font-size: 13px;
  }
}

@media screen and (max-width: 480px) {
  /* Stack name cell vertically on very small screens */
  table.membership-user-table td.avatar_name {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--amfm-spacing-xs, 4px);
  }
  
  /* Hide some columns on very small screens */
  table.membership-user-table th:nth-child(3),
  table.membership-user-table td.field-campus {
    display: none;
  }
}