/* Able Pro / Discompelic UI face — Open Sans across participants, gifts, and profile. */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");

:root {
  --bs-font-sans-serif: "Open Sans", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
}

html,
body,
button,
input,
select,
textarea,
.pc-sidebar,
.pc-sidebar *:not(i):not(.ph):not(.ti),
.pc-header,
.pc-header *:not(i):not(.ph):not(.ti),
.pc-container,
.pc-container *:not(i):not(.ph):not(.ti),
.pc-content,
.pc-content *:not(i):not(.ph):not(.ti),
.pc-wrapper,
.pc-wrapper *:not(i):not(.ph):not(.ti),
.modal,
.modal *:not(i):not(.ph):not(.ti),
.dropdown-menu,
.dropdown-menu *:not(i):not(.ph):not(.ti),
.pc-footer,
.pc-footer *:not(i):not(.ph):not(.ti) {
  font-family: var(--bs-body-font-family) !important;
}

.header-bitmoji {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  flex-shrink: 0;
}

.header-bitmoji.header-bitmoji-has-photo {
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: 2px;
}

img.logo-lg {
  object-fit: contain;
  background: transparent;
  border-radius: 0;
}

.pc-container.page-surface {
  background-color: #eef2f7;
  background-image:
    radial-gradient(ellipse 90% 55% at 0% -8%, rgba(70, 128, 255, 0.08), transparent 58%),
    radial-gradient(ellipse 70% 45% at 100% 0%, rgba(15, 23, 42, 0.05), transparent 52%);
  background-repeat: no-repeat;
}

.pc-header {
  --pc-header-background: rgba(15, 23, 42, 0.96);
  --pc-header-color: #cbd5e1;
  background: var(--pc-header-background) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.pc-header .pc-head-link,
.pc-header .page-header-name,
.pc-header .page-header-label {
  color: var(--pc-header-color);
}

.pc-header .page-header-count-badge {
  background-color: rgba(255, 255, 255, 0.16) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-weight: 600;
}

.navbar-content {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 70px);
}

.pc-navbar-footer {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.form-audit-trail {
  margin-top: 1rem;
  padding: 0.75rem 0.875rem;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.375rem;
  background: rgba(15, 23, 42, 0.04);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.form-audit-trail-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color, #6c757d);
  margin-bottom: 0.25rem;
}

.form-audit-trail-detail {
  color: var(--bs-body-color, #1d2630);
}

.form-audit-trail-actor {
  font-weight: 600;
  color: var(--bs-primary, #4680ff);
}

.search-highlight {
  background-color: rgba(250, 204, 21, 0.5);
  color: inherit;
  padding: 0 0.12em;
  border-radius: 0.15em;
}

.pc-footer,
.pc-footer .footer-wrapper,
.pc-footer p,
.pc-footer a,
.pc-footer .footer-link,
.pc-navbar-footer,
.pc-navbar-footer .pc-link,
.pc-navbar-footer label {
  font-family: var(--bs-body-font-family) !important;
}

.participants-gift-filter-caption {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color, #6c757d);
  margin: -0.35rem 0 0.75rem;
}

.pending-user-details {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.pending-user-detail-line {
  line-height: 1.35;
}

@media (max-width: 767.98px) {
  .admin-users-modal .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }

  .admin-users-modal .pending-users-panel {
    overflow-x: visible;
  }

  .admin-users-modal .pending-users-table thead {
    display: none;
  }

  .admin-users-modal .pending-users-table tbody tr.pending-user-row {
    display: block;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    padding: 0.75rem 0;
  }

  .admin-users-modal .pending-users-table tbody tr.pending-user-row td {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
    padding: 0.2rem 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .admin-users-modal .pending-users-table tbody tr.pending-user-row td.pending-user-action {
    text-align: start !important;
    padding-top: 0.5rem;
  }

  .admin-users-modal .pending-users-table tbody tr.pending-user-row td.pending-user-action .btn {
    width: 100%;
  }
}