/* cart.css */
.cart--offcanvas .cart-item-count {
  font-size: 0.7rem;
}
.cart--offcanvas .cart-card-image {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  overflow: hidden;
}
.cart--offcanvas .cart-card-image .cart--item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* catalog.css */
.catalog--section {
  position: relative;
}

.catalog--header {
  gap: 0.75rem;
}

.catalog--pinned-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.catalog--pinned-filter-chip {
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  font-weight: 500;
}

.catalog--pinned-filter-remove {
  font-size: 0.65rem;
}

.catalog--body {
  --catalog-filter-width: clamp(240px, 26vw, 320px);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0;
  transition: gap 0.3s ease;
}

.catalog--section.catalog--filters-open .catalog--body {
  gap: 2rem;
}

.catalog--filters {
  background: var(--bs-body-bg, #fff);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 0.75rem;
  width: 0;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-1rem);
  transition: width 0.35s ease, padding 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
  will-change: width, padding, opacity, transform;
}

.catalog--section.catalog--filters-open .catalog--filters {
  width: var(--catalog-filter-width);
  padding: 1.5rem;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.catalog--filters-form {
  font-size: 0.95rem;
}

.catalog--filter-label {
  letter-spacing: 0.08em;
}

.catalog--products {
  background: var(--bs-body-bg, #fff);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.05);
  min-height: 320px;
  min-width: 0;
  overflow: hidden;
  transition: padding 0.35s ease;
}

.catalog--products-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(var(--catalog-card-min, 220px), 1fr));
  overflow: visible;
}

.infinite-scroll--end-message {
  font-size: 0.95rem;
  color: var(--bs-secondary, #6c757d);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 2rem;
}
.infinite-scroll--end-message i {
  font-size: 1.1rem;
}

.catalog--products[data-view=grid] {
  --catalog-card-min: 260px;
}

.catalog--products[data-view=grid-compact] {
  --catalog-card-min: 140px;
}

.catalog--products[data-view=grid-compact] .catalog--products-grid {
  gap: 0.85rem;
}

.catalog--products[data-view=list] {
  --catalog-card-min: 100%;
}

.catalog--products[data-view=list] .catalog--products-grid {
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.catalog--product-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--bs-body-bg, #fff);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 0.25rem 1rem rgba(15, 23, 42, 0.08);
  min-height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.catalog--product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.12);
}

.catalog--product-media {
  width: 100%;
}

.catalog--product-thumbnail {
  border-radius: 0.85rem;
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.1), rgba(13, 110, 253, 0.15));
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--bs-primary, #0d6efd);
  overflow: hidden;
}
.catalog--product-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.catalog--product-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1 1 auto;
}

.catalog--product-title {
  font-size: 1rem;
  font-weight: 600;
}

.catalog--product-actions {
  margin-top: auto;
}

.catalog--product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.catalog--product-price {
  font-weight: 700;
  font-size: 1.05rem;
}

.catalog--skeleton-card {
  pointer-events: none;
  user-select: none;
  min-height: 100%;
  opacity: 1;
  transition: opacity 0.36s ease, transform 0.36s ease;
}
.catalog--skeleton-card:hover {
  transform: none;
  box-shadow: 0 0.25rem 1rem rgba(15, 23, 42, 0.08);
}
.catalog--skeleton-card.is-leaving {
  opacity: 0;
  transform: translateY(4px);
}

.catalog--skeleton-block {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, #eef2f7 0%, #e4e9f1 45%, #eef2f7 100%);
}
.catalog--skeleton-block::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  animation: catalogSkeletonShimmer 1.35s ease-in-out infinite;
}

.catalog--skeleton-media {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 0.85rem;
}

.catalog--skeleton-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.catalog--skeleton-row-meta {
  margin-bottom: 0.9rem;
}

.catalog--skeleton-pill {
  width: 5rem;
  height: 1.45rem;
}

.catalog--skeleton-short {
  width: 3.8rem;
  height: 0.8rem;
}

.catalog--skeleton-title {
  width: 72%;
  height: 1.1rem;
  margin-bottom: 0.75rem;
}

.catalog--skeleton-line {
  width: 100%;
  height: 0.75rem;
  margin-bottom: 0.55rem;
}

.catalog--skeleton-line-sm {
  width: 82%;
}

.catalog--skeleton-button {
  width: 100%;
  height: 2.4rem;
  border-radius: var(--bs-border-radius, 0.375rem);
}

.catalog--products[data-view=list] .catalog--product-card {
  flex-direction: row;
  align-items: stretch;
  padding: 1.25rem;
  min-height: unset;
}

.catalog--products[data-view=list] .catalog--product-media {
  flex: 0 0 220px;
}

.catalog--products[data-view=list] .catalog--product-body {
  justify-content: center;
}

.catalog--products[data-view=grid-compact] .catalog--product-title {
  font-size: 0.95rem;
}

.catalog--products[data-view=grid-compact] .catalog--product-description {
  font-size: 0.85rem;
}

.catalog--products[data-view=grid-compact] .catalog--product-card {
  padding: 0.85rem;
}

.catalog--products.is-transitioning .catalog--product-card {
  animation: catalogCardSwap 0.45s ease both;
  animation-delay: calc(var(--catalog-card-order, 0) * 50ms);
}

.catalog-card-entering {
  animation: catalogCardSwap 0.45s ease both;
  animation-delay: calc(var(--catalog-card-enter-index, 0) * 60ms) !important;
  animation-fill-mode: both;
}

.catalog--view-icon.is-active .bi {
  color: var(--bs-primary, #0d6efd);
}

.catalog--filter-toggle {
  color: inherit;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.catalog--filter-indicator {
  position: absolute;
  top: -0.15rem;
  right: -0.1rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--bs-danger, #dc3545);
  box-shadow: 0 0 0 2px var(--bs-body-bg, #fff);
  transform: scale(0);
  transition: transform 0.2s ease;
}

.catalog--filter-toggle.has-active-filters .catalog--filter-indicator {
  transform: scale(1);
}

.cart--toggle {
  position: relative;
  z-index: 1;
}
.cart--toggle.floating-button {
  position: fixed;
}

.cart--toggle.cart--wiggle {
  animation: cartWiggle 0.6s ease;
}

.cart--toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.4);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.cart--toggle.cart--wiggle::after {
  animation: cartPing 1.2s ease-out forwards 2;
}

@keyframes cartWiggle {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-15deg);
  }
  40% {
    transform: rotate(15deg);
  }
  60% {
    transform: rotate(-10deg);
  }
  80% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes cartPing {
  0% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(0.5);
  }
  60% {
    opacity: 0.15;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.2);
  }
}
.cart--spark {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  animation: cartSpark 0.6s ease forwards;
  transform: translate(-50%, -50%);
  z-index: 1055;
  opacity: 0;
}

@keyframes cartSpark {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--cart-spark-x)), calc(-50% + var(--cart-spark-y))) scale(0);
  }
}
.catalog--price-slider .catalog--price-display {
  font-size: 0.95rem;
}
.catalog--price-slider .catalog--price-slider-inputs {
  position: relative;
  height: 1.75rem;
  display: block;
}
.catalog--price-slider .catalog--price-slider-track {
  --start: 0%;
  --end: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0.35rem;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--bs-border-color, rgba(0, 0, 0, 0.1));
  pointer-events: none;
}
.catalog--price-slider .catalog--price-slider-track::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--start);
  right: calc(100% - var(--end));
  border-radius: inherit;
  background: var(--bs-primary, #0d6efd);
}
.catalog--price-slider .catalog--price-input {
  position: absolute;
  inset: 0;
  --thumb-size: 1rem;
  height: 1.75rem;
  padding: 0;
  background: transparent;
  pointer-events: none;
}
.catalog--price-slider .catalog--price-input::-webkit-slider-thumb {
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.catalog--price-slider .catalog--price-input::-moz-range-thumb {
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.catalog--price-slider .catalog--price-input::-webkit-slider-runnable-track {
  background: transparent;
}
.catalog--price-slider .catalog--price-input::-moz-range-track {
  background: transparent;
}
.catalog--price-slider .catalog--price-input-min {
  z-index: 3;
}
.catalog--price-slider .catalog--price-input-max {
  z-index: 2;
}

.catalog--options {
  gap: 0.5rem;
}

.catalog--view-control {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 0;
}

.catalog--view-toggle {
  color: inherit;
  position: relative;
  z-index: 3;
}

.catalog--view-toggle:focus-visible,
.catalog--view-icon:focus-visible {
  outline: 2px solid rgba(13, 110, 253, 0.6);
  outline-offset: 2px;
}

.catalog--view-options {
  position: absolute;
  top: 50%;
  right: calc(100% + 0.5rem);
  display: flex;
  gap: 0.35rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(8px);
  z-index: 2;
}

.catalog--view-control.is-open .catalog--view-options {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.catalog--view-control.is-closing .catalog--view-options {
  opacity: 1;
  pointer-events: none;
  transform: translateY(-50%) translateX(0);
}

.catalog--view-control.is-closing .catalog--view-icon {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.catalog--view-icon {
  color: inherit;
  opacity: 0;
  transform: translateX(8px) scale(0.92);
  transition: color 0.2s ease;
  position: relative;
  z-index: 1;
  --catalog-view-exit-x: 40px;
}

.catalog--view-indicator {
  position: absolute;
  bottom: -0.15rem;
  right: -0.1rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--bs-primary, #0d6efd);
  box-shadow: 0 0 0 2px var(--bs-body-bg, #fff);
  transform: scale(0);
  transition: transform 0.2s ease;
}

.catalog--view-control.is-open .catalog--view-icon {
  animation: catalogViewBubble 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: var(--catalog-view-delay-in, 0ms);
}

.catalog--view-control.is-closing .catalog--view-icon {
  animation: catalogViewBubbleOut 0.45s cubic-bezier(0.34, 1.06, 0.64, 1) forwards;
  animation-delay: var(--catalog-view-delay-out, 0ms);
}

.catalog--view-icon:hover .bi,
.catalog--view-icon:focus .bi {
  color: var(--bs-body-color, #212529);
}

.catalog--view-icon.is-active .catalog--view-indicator {
  transform: scale(1);
}

@media (max-width: 991.98px) {
  .catalog--body {
    grid-template-columns: 1fr;
  }
  .catalog--filters {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    z-index: 5;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    transform: translateY(-10px);
  }
  .catalog--section.catalog--filters-open .catalog--filters {
    transform: translateY(0);
  }
  .catalog--products {
    padding: 1.25rem;
  }
  .catalog--products[data-view=list] .catalog--product-card {
    flex-direction: column;
  }
  .catalog--products[data-view=list] .catalog--product-media {
    flex-basis: auto;
  }
}
@media (min-width: 1200px) {
  .catalog--products[data-view=grid] .catalog--products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .catalog--products[data-view=grid-compact] .catalog--products-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .catalog--products[data-view=grid-compact] .catalog--products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@keyframes catalogViewBubble {
  0% {
    opacity: 0;
    transform: translateX(18px) scale(0.85);
  }
  55% {
    opacity: 1;
    transform: translateX(-6px) scale(1.08);
  }
  75% {
    transform: translateX(2px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes catalogViewBubbleOut {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  30% {
    transform: translateX(-10px) scale(1.12);
  }
  100% {
    opacity: 0;
    transform: translateX(var(--catalog-view-exit-x, 40px)) scale(0.78);
  }
}
@keyframes catalogCardSwap {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes catalogSkeletonShimmer {
  100% {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .catalog--skeleton-card,
  .catalog--skeleton-block::after {
    transition: none;
    animation: none;
  }
}
.order-detail-canvas {
  width: 680px;
}

.order-canvas-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.75rem;
}
.order-canvas-dl dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  font-weight: 600;
  align-self: center;
}
.order-canvas-dl dd {
  margin: 0;
  font-size: 0.875rem;
  align-self: center;
}

.order-stage-select {
  max-width: 180px;
}

.ship-item-toggle-col {
  width: 2rem;
}

.ship-item-qty-col {
  width: 5rem;
}

.ship-item-ship-qty-col {
  width: 6rem;
}

@media (max-width: 768px) {
  .order-detail-canvas {
    width: 100vw;
  }
}
.activities-admin-dashboard-shell .catalog--product-media,
.portal-activities-catalog-shell .catalog--product-media {
  position: relative;
}
.activities-admin-dashboard-shell .activity-dashboard-card-status,
.activities-admin-dashboard-shell .portal-activity-card-status,
.portal-activities-catalog-shell .activity-dashboard-card-status,
.portal-activities-catalog-shell .portal-activity-card-status {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  display: none;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(25, 135, 84, 0.92);
  color: #fff;
  box-shadow: 0 0.35rem 0.9rem rgba(25, 135, 84, 0.28);
}
.activities-admin-dashboard-shell .activity-dashboard-card-status.is-complete,
.activities-admin-dashboard-shell .portal-activity-card-status.is-complete,
.portal-activities-catalog-shell .activity-dashboard-card-status.is-complete,
.portal-activities-catalog-shell .portal-activity-card-status.is-complete {
  display: inline-flex;
}
.activities-admin-dashboard-shell .activity-dashboard-card-status.is-in-progress,
.activities-admin-dashboard-shell .portal-activity-card-status.is-in-progress,
.portal-activities-catalog-shell .activity-dashboard-card-status.is-in-progress,
.portal-activities-catalog-shell .portal-activity-card-status.is-in-progress {
  display: inline-flex;
  background: rgba(13, 110, 253, 0.88);
  box-shadow: 0 0.35rem 0.9rem rgba(13, 110, 253, 0.28);
}
.activities-admin-dashboard-shell .catalog--product-actions .d-flex,
.portal-activities-catalog-shell .catalog--product-actions .d-flex {
  width: 100%;
}
.activities-admin-dashboard-shell .catalog--product-actions .btn,
.portal-activities-catalog-shell .catalog--product-actions .btn {
  min-width: 0;
}
.activities-admin-dashboard-shell .catalog--products[data-view=list] .catalog--product-actions .d-flex,
.portal-activities-catalog-shell .catalog--products[data-view=list] .catalog--product-actions .d-flex {
  flex-wrap: nowrap;
}
.activities-admin-dashboard-shell .catalog--products[data-view=grid-compact] .catalog--product-description,
.portal-activities-catalog-shell .catalog--products[data-view=grid-compact] .catalog--product-description {
  display: none;
}
.activities-admin-dashboard-shell .catalog--products[data-view=grid-compact] .catalog--product-actions .btn,
.portal-activities-catalog-shell .catalog--products[data-view=grid-compact] .catalog--product-actions .btn {
  padding: 0.4rem 0.55rem;
  font-size: 0.85rem;
}



/* checkout.css */
.checkout--item-image {
  width: 60px;
  height: 60px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}
.checkout--item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



/* handout.css */
/**
 * Handouts Styling
 */
/* Certificate Cards */
.handout-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
}

.handout-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.handout-card-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
}

.handout-card-title {
  font-weight: 600;
  margin: 0 0 5px 0;
  font-size: 1rem;
}

.handout-card-subtitle {
  font-size: 0.85rem;
  opacity: 0.9;
  margin: 0;
}

.handout-card-body {
  padding: 20px;
}

.handout-info {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: #555;
}
.handout-info i {
  width: 20px;
  color: #667eea;
  margin-right: 10px;
}

/* Badge styling */
.badge-pdf {
  background-color: #ffe5e5;
  color: #c82333;
}

.badge-html {
  background-color: #e5f5ff;
  color: #0066cc;
}

.badge-png {
  background-color: #e5ffe5;
  color: #2d7a3a;
}

.portal-certificate-card .catalog--product-media {
  position: relative;
}
.portal-certificate-card .portal-certificate-card-status {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  box-shadow: 0 0.35rem 1rem rgba(15, 23, 42, 0.18);
  pointer-events: none;
}

/* Certificate Templates */
.certificate-template {
  background: white;
  padding: 40px;
  font-family: "Georgia", serif;
  min-height: 600px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.certificate-simple {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border: 3px solid #2c3e50;
  border-radius: 8px;
  text-align: center;
}

.certificate-diploma {
  background: linear-gradient(to right, #fffacd 0%, #fff9e6 50%, #fffacd 100%);
  border: 8px solid #8b7355;
  border-radius: 10px;
  position: relative;
}

.certificate-printable {
  background: white;
  border: none;
  padding: 20mm;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-state-icon {
  font-size: 4rem;
  color: #bdc3c7;
  margin-bottom: 20px;
}

.empty-state-text {
  color: #7f8c8d;
  margin: 10px 0;
}

/* Responsive */
@media (max-width: 768px) {
  .certificate-template {
    padding: 20px;
    min-height: 400px;
    font-size: 0.9rem;
  }
  .handout-card {
    margin-bottom: 15px;
  }
  .portal-certificate-card .portal-certificate-card-status {
    top: 0.65rem;
    left: 0.65rem;
  }
}
/* Print styles */
@media print {
  body {
    background: white;
    margin: 0;
    padding: 0;
  }
  .certificate-template {
    box-shadow: none;
    page-break-inside: avoid;
  }
  .handout-card,
  .btn,
  .modal-backdrop {
    display: none !important;
  }
}
.ht-card {
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.ht-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13) !important;
  transform: translateY(-2px);
}
.ht-card--inactive {
  opacity: 0.6;
}
.ht-card-header {
  position: relative;
  min-height: 110px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.ht-card-header--global {
  background: linear-gradient(135deg, #1a3a5c 0%, #2e79c4 100%);
}
.ht-card-header--activity {
  background: linear-gradient(135deg, #1a4d2e 0%, #27ae60 100%);
}
.ht-card-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  pointer-events: none;
}
.ht-card-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
}
.ht-card-scope-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  margin-bottom: 6px;
  width: fit-content;
}
.ht-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  position: relative;
  word-break: break-word;
}
.ht-card-desc {
  font-size: 0.82rem;
  color: #6c757d;
  min-height: 36px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ht-card-status {
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}
[data-bs-theme=dark] .ht-card-desc {
  color: var(--bs-secondary-color);
}

.ht-add-card {
  border: 2px dashed #ced4da;
  border-radius: 12px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
  color: #6c757d;
  text-decoration: none;
}
.ht-add-card:hover {
  border-color: #0d6efd;
  background: #f0f5ff;
  color: #0d6efd;
}
[data-bs-theme=dark] .ht-add-card {
  border-color: var(--bs-border-color);
  color: var(--bs-secondary-color);
}
[data-bs-theme=dark] .ht-add-card:hover {
  border-color: var(--bs-link-color);
  background: var(--bs-tertiary-bg);
  color: var(--bs-link-color);
}
.ht-add-card-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  line-height: 1;
}
.ht-add-card-label {
  font-size: 0.88rem;
  font-weight: 600;
}



/* import2db.css */
.i2db-modal .modal-content {
  border: 0;
  border-radius: 20px;
  overflow: hidden;
}
.i2db-modal .modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}
.i2db-modal .modal-title {
  color: #1e293b;
  font-size: 1.25rem;
  font-weight: 700;
}
.i2db-modal .modal-subtitle {
  color: #64748b;
  font-size: 0.92rem;
}
.i2db-modal .modal-body {
  background: linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
  padding: 1.5rem;
}
.i2db-modal .modal-footer {
  border-top: 1px solid #e2e8f0;
  background: #fff;
}
.i2db-modal .i2db-section {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.i2db-modal .i2db-section:last-child {
  margin-bottom: 0;
}
.i2db-modal .i2db-section-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  font-weight: 700;
  color: #4a90e2;
  margin-bottom: 0.85rem;
}
.i2db-modal .i2db-toolbar .form-select,
.i2db-modal .i2db-toolbar .form-check-label {
  font-size: 0.9rem;
}
.i2db-modal .i2db-all-sheets-check:checked,
.i2db-modal .i2db-skip-sheet-check:checked {
  background-color: #4a90e2;
  border-color: #4a90e2;
}
.i2db-modal .i2db-table-wrap {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}
.i2db-modal .i2db-table {
  height: 300px;
  margin-bottom: 0;
}
.i2db-modal .i2db-table thead th {
  position: sticky;
  top: 0;
  background: rgba(74, 144, 226, 0.12);
  color: #1e293b;
  font-weight: 600;
  font-size: 0.85rem;
  border-bottom: 1px solid #e2e8f0;
  z-index: 1;
}
.i2db-modal .i2db-table tbody {
  height: 300px;
  overflow-y: auto;
  font-size: 0.85rem;
}
.i2db-modal .i2db-sheets-tabs-wrap {
  margin-bottom: 1.25rem;
}
.i2db-modal .i2db-sheets-summary {
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #64748b;
}
.i2db-modal .i2db-sheets-tabs {
  border-bottom: 1px solid #e2e8f0;
}
.i2db-modal .i2db-sheets-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  color: #64748b;
  font-weight: 500;
  font-size: 0.88rem;
  padding: 0.5rem 0.9rem;
  background: transparent;
}
.i2db-modal .i2db-sheets-tabs .nav-link.active {
  color: #4a90e2;
  border-bottom-color: #4a90e2;
  background: transparent;
}
.i2db-modal .i2db-sheets-tabs .nav-link:hover:not(.active) {
  color: #1e293b;
}
.i2db-modal .i2db-sheets-panes {
  padding-top: 1rem;
}
.i2db-modal .i2db-skip-sheet-check {
  margin-bottom: 1rem;
}
.i2db-modal .i2db-mapping-hint {
  margin-bottom: 1rem;
}
.i2db-modal .i2db-required-marker {
  color: #4a90e2;
  font-weight: 700;
}
.i2db-modal .i2db-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.75rem;
}
.i2db-modal .i2db-title:empty {
  display: none;
}
.i2db-modal .i2db-fields .form-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 0.35rem;
}
.i2db-modal .i2db-fields .form-select {
  font-size: 0.85rem;
}
.i2db-modal .i2db-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.i2db-modal .i2db-submit .i2db-submit-spinner {
  width: 0.9rem;
  height: 0.9rem;
}
[data-bs-theme=dark] .i2db-modal .modal-header, [data-bs-theme=dark] .i2db-modal .modal-footer {
  background: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
}
[data-bs-theme=dark] .i2db-modal .modal-title {
  color: var(--bs-body-color);
}
[data-bs-theme=dark] .i2db-modal .modal-body {
  background: linear-gradient(180deg, rgba(74, 144, 226, 0.07) 0%, rgba(74, 144, 226, 0.02) 100%);
}
[data-bs-theme=dark] .i2db-modal .i2db-section {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}
[data-bs-theme=dark] .i2db-modal .i2db-table-wrap {
  border-color: var(--bs-border-color);
}
[data-bs-theme=dark] .i2db-modal .i2db-table thead th {
  background: rgba(74, 144, 226, 0.18);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
[data-bs-theme=dark] .i2db-modal .i2db-sheets-tabs {
  border-color: var(--bs-border-color);
}
[data-bs-theme=dark] .i2db-modal .i2db-sheets-tabs .nav-link {
  color: var(--bs-secondary-color);
}
[data-bs-theme=dark] .i2db-modal .i2db-sheets-tabs .nav-link.active {
  color: #4a90e2;
}
[data-bs-theme=dark] .i2db-modal .i2db-title, [data-bs-theme=dark] .i2db-modal .i2db-fields .form-group label {
  color: var(--bs-body-color);
}

#i2dbImportResultsModal .modal-content,
#i2dbPreImportWarningsModal .modal-content {
  border: 0;
  border-radius: 20px;
  overflow: hidden;
}
#i2dbImportResultsModal .modal-header,
#i2dbPreImportWarningsModal .modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}
#i2dbImportResultsModal .modal-title,
#i2dbPreImportWarningsModal .modal-title {
  color: #1e293b;
  font-size: 1.15rem;
  font-weight: 700;
}
#i2dbImportResultsModal .modal-body,
#i2dbPreImportWarningsModal .modal-body {
  padding: 1.5rem;
}
#i2dbImportResultsModal .modal-footer,
#i2dbPreImportWarningsModal .modal-footer {
  border-top: 1px solid #e2e8f0;
  background: #fff;
}
[data-bs-theme=dark] #i2dbImportResultsModal .modal-header, [data-bs-theme=dark] #i2dbImportResultsModal .modal-footer,
[data-bs-theme=dark] #i2dbPreImportWarningsModal .modal-header,
[data-bs-theme=dark] #i2dbPreImportWarningsModal .modal-footer {
  background: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
}
[data-bs-theme=dark] #i2dbImportResultsModal .modal-title,
[data-bs-theme=dark] #i2dbPreImportWarningsModal .modal-title {
  color: var(--bs-body-color);
}

#i2dbImportResultsModal .i2db-results-summary {
  font-weight: 600;
  color: #1e293b;
}
#i2dbImportResultsModal .i2db-results-sheets {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
#i2dbImportResultsModal .i2db-results-sheets li {
  background: rgba(74, 144, 226, 0.12);
  color: #4a90e2;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
}
#i2dbImportResultsModal .i2db-results-errors td {
  color: #b91c1c;
  font-size: 0.85rem;
}
#i2dbImportResultsModal .i2db-results-errors td:first-child {
  font-weight: 600;
  color: #1e293b;
}
[data-bs-theme=dark] #i2dbImportResultsModal .i2db-results-summary {
  color: var(--bs-body-color);
}
[data-bs-theme=dark] #i2dbImportResultsModal .i2db-results-errors td {
  color: #f87171;
}
[data-bs-theme=dark] #i2dbImportResultsModal .i2db-results-errors td:first-child {
  color: var(--bs-body-color);
}

#i2dbPreImportWarningsModal .i2db-preimport-issues {
  list-style: none;
  padding: 0;
  margin: 0;
}
#i2dbPreImportWarningsModal .i2db-preimport-issues li {
  background: rgba(245, 158, 11, 0.1);
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.5rem;
  font-size: 0.88rem;
  color: #1e293b;
}
#i2dbPreImportWarningsModal .i2db-preimport-issues li:last-child {
  margin-bottom: 0;
}
[data-bs-theme=dark] #i2dbPreImportWarningsModal .i2db-preimport-issues li {
  background: rgba(245, 158, 11, 0.16);
  color: var(--bs-body-color);
}



/* inventory_layout.css */
.layout-canvas {
  position: relative;
  width: 100%;
  height: 700px;
  box-sizing: border-box;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
  overflow: auto;
  background-color: #f8f9fa;
  user-select: none;
}

.layout-canvas-inner {
  position: relative;
  background-image: linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}

.layout-canvas-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-shape {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed #94a3b8;
  background: rgba(148, 163, 184, 0.06);
  border-radius: 4px;
  cursor: move;
  min-width: 10px;
  min-height: 10px;
}
.layout-shape.selected {
  border-color: var(--bs-primary, #0d6efd);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

.layout-shape-label {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #64748b;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 0 2px #fff;
}

.layout-bay {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #6c757d;
  background: rgba(108, 117, 125, 0.08);
  border-radius: 4px;
  cursor: move;
  min-width: 12px;
  min-height: 12px;
}
.layout-bay.selected {
  border-color: var(--bs-primary, #0d6efd);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

.layout-bay-label {
  position: absolute;
  top: 1px;
  left: 3px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #495057;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 0 2px #fff;
}

.layout-section {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid var(--bs-primary, #0d6efd);
  background: rgba(13, 110, 253, 0.14);
  border-radius: 3px;
  cursor: move;
  min-width: 8px;
  min-height: 8px;
}
.layout-section.selected {
  background: rgba(13, 110, 253, 0.3);
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.4);
}

.layout-section-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: #0a3678;
  pointer-events: none;
  overflow: hidden;
  text-align: center;
}

.resize-handle {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  background: var(--bs-primary, #0d6efd);
  border: 2px solid #fff;
  border-radius: 2px;
  cursor: nwse-resize;
}

.locked > .resize-handle {
  display: none;
}
.locked {
  cursor: default !important;
}

.lock-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  background: #495057;
  color: #fff;
  border-radius: 9px;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.route-badge {
  position: absolute;
  top: -8px;
  left: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #fd7e14;
  color: #fff;
  border-radius: 9px;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.layout-entrance {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #198754;
  font-size: 1.4rem;
  cursor: move;
  text-shadow: 0 0 3px #fff;
  z-index: 5;
}
.layout-entrance.selected {
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.4);
}

.layout-endpoint {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #dc3545;
  font-size: 1.4rem;
  cursor: move;
  text-shadow: 0 0 3px #fff;
  z-index: 5;
}
.layout-endpoint.selected {
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.4);
}

.bay-levels {
  font-weight: 500;
  color: #6f42c1;
}

.layout-preview {
  position: absolute;
  border: 2px dashed var(--bs-primary, #0d6efd);
  background: rgba(13, 110, 253, 0.1);
  box-sizing: border-box;
  pointer-events: none;
}

.layout-route-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.layout-route-poly {
  fill: none;
  stroke: #fd7e14;
  stroke-width: 2;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
  opacity: 0.8;
}

.pack-map-wrap {
  margin-bottom: 1rem;
}

.pack-map-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.25rem;
}

.pack-map {
  position: relative;
  width: 100%;
  height: 320px;
  box-sizing: border-box;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
  overflow: hidden;
  background-color: #f8f9fa;
  background-image: linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 5% 5%, 5% 5%;
}
.pack-map .layout-bay {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #6c757d;
  background: rgba(108, 117, 125, 0.07);
  border-radius: 4px;
  cursor: default;
}
.pack-map .layout-bay-label {
  position: absolute;
  top: 1px;
  left: 3px;
  font-size: 0.65rem;
  font-weight: 600;
  color: #495057;
  text-shadow: 0 0 2px #fff;
}
.pack-map .layout-section {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid #adb5bd;
  background: rgba(173, 181, 189, 0.18);
  border-radius: 3px;
  cursor: default;
}
.pack-map .layout-section.picked {
  border-color: #fd7e14;
  background: rgba(253, 126, 20, 0.2);
}
.pack-map .route-badge {
  position: absolute;
  top: -8px;
  left: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #fd7e14;
  color: #fff;
  border-radius: 9px;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.pack-map .layout-entrance {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #198754;
  font-size: 1.2rem;
  cursor: default;
  pointer-events: none;
  text-shadow: 0 0 3px #fff;
}
.pack-map .layout-endpoint {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #dc3545;
  font-size: 1.2rem;
  cursor: default;
  pointer-events: none;
  text-shadow: 0 0 3px #fff;
}

.pack-map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.pack-map-poly {
  fill: none;
  stroke: #fd7e14;
  stroke-width: 2;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
  opacity: 0.85;
}

[data-bs-theme=dark] .layout-canvas {
  background-color: var(--bs-tertiary-bg);
}

[data-bs-theme=dark] .layout-canvas-inner {
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
}

[data-bs-theme=dark] .layout-shape-label,
[data-bs-theme=dark] .layout-bay-label {
  color: var(--bs-body-color);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
}

[data-bs-theme=dark] .layout-section-label {
  color: var(--bs-emphasis-color);
}

[data-bs-theme=dark] .bay-levels {
  color: #b794f6;
}

[data-bs-theme=dark] .layout-entrance,
[data-bs-theme=dark] .layout-endpoint {
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}

[data-bs-theme=dark] .pack-map-title {
  color: var(--bs-secondary-color);
}

[data-bs-theme=dark] .pack-map {
  background-color: var(--bs-tertiary-bg);
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
}

[data-bs-theme=dark] .pack-map .layout-bay-label {
  color: var(--bs-body-color);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
}

[data-bs-theme=dark] .pack-map .layout-entrance,
[data-bs-theme=dark] .pack-map .layout-endpoint {
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}



/* leaderboard.css */
leaderboard {
  display: block;
}
leaderboard .leaderboard-container {
  display: flex;
  justify-content: center;
}
leaderboard .leaderboard-box {
  width: 100%;
  max-width: 860px;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #e2e8f0);
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  padding: 1.25rem;
}
leaderboard .leaderboard-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 1rem;
}
leaderboard .search-box {
  max-width: 360px;
  margin-bottom: 1rem;
}
leaderboard .search-box .input-group-text {
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #e2e8f0);
  border-right: 0;
  color: var(--bs-secondary-color, #64748b);
  display: flex;
  align-items: center;
}
leaderboard .search-box .leaderboard-search {
  flex: 1 1 auto;
  border: 1px solid var(--bs-border-color, #e2e8f0);
  border-left: 0;
  padding: 0.375rem 0.75rem;
  outline: none;
}
leaderboard .search-box .leaderboard-search:focus {
  border-color: var(--bs-primary, #6366f1);
  box-shadow: none;
}
leaderboard .leaderboard-tab-buttons:empty {
  display: none;
}
leaderboard .leaderboard-tab-btn {
  cursor: pointer;
  border: 1px solid var(--bs-border-color, #e2e8f0);
  border-radius: 2rem;
  padding: 0.25rem 1rem;
  font-size: 0.85rem;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #1e293b);
}
leaderboard .leaderboard-tab-btn.leaderboard-tab-on, leaderboard .leaderboard-tab-btn.orange {
  background: var(--bs-primary, #6366f1);
  border-color: var(--bs-primary, #6366f1);
  color: #fff;
}
leaderboard .leaderboard-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--bs-border-color, #e2e8f0);
  background: var(--bs-tertiary-bg, #f8fafc);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bs-secondary-color, #64748b);
}
leaderboard .leaderboard-scroll-area {
  max-height: 520px;
  overflow-y: auto;
  scrollbar-width: thin;
}
leaderboard .leaderboard-header-item,
leaderboard .leaderboard-cell {
  min-width: 0;
}
leaderboard .leaderboard-header-item:first-child,
leaderboard .leaderboard-cell:first-child {
  width: 2.5rem;
  text-align: center;
  flex: 0 0 auto;
}
leaderboard .leaderboard-header-item:nth-child(2),
leaderboard .leaderboard-cell:nth-child(2) {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
leaderboard .leaderboard-header-item:last-child,
leaderboard .leaderboard-cell:last-child {
  margin-left: auto;
  text-align: right;
  flex: 0 0 auto;
  font-weight: 700;
}
leaderboard .leaderboard-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bs-border-color, #e2e8f0);
  transition: background 0.15s;
}
leaderboard .leaderboard-row:hover {
  background: var(--bs-tertiary-bg, #f8f9fa);
}
leaderboard .leaderboard-row.leaderboard-highlight {
  background: rgba(99, 102, 241, 0.07);
}
leaderboard .leaderboard-row.leaderboard-highlight:hover {
  background: rgba(99, 102, 241, 0.12);
}
leaderboard .leaderboard-region {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--bs-secondary-color, #64748b);
}
leaderboard .leaderboard-highlight.pinned-bottom {
  border-top: 1px solid var(--bs-border-color, #e2e8f0);
  background: var(--bs-secondary-bg, #f1f5f9);
}
leaderboard .leaderboard-highlight.pinned-bottom .leaderboard-row {
  border-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  background: transparent;
}
leaderboard .leaderboard-no-results {
  text-align: center;
  color: var(--bs-secondary-color, #64748b);
  padding: 1.5rem;
}



/* medialibrary.css */
@charset "UTF-8";
.video-player-container {
  position: relative;
  display: inline-block;
}
.video-player-container video {
  display: block;
  width: 100%; /* ensure it defines the container’s size */
  height: auto;
}
.video-player-container .play-pause-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: white;
  z-index: 4; /* above overlay */
  pointer-events: none; /* clicks pass through to overlay/video */
}
.video-player-container .video-click-layer {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 3;
}

.has-background-media {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.has-background-media video, .has-background-media > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.has-background-media .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}
.has-background-media .overlaid-content {
  position: relative;
  z-index: 2;
}

/* =========================
   Media Library Page
   ========================= */
.media-library {
  padding: 2rem;
  position: relative;
  padding-top: 3rem;
  min-height: 300px;
}
.media-library .library-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  color: #333;
}
.media-library .media-grid {
  display: grid;
  position: relative;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  min-height: 300px;
}
.media-library .media-card .media-thumb {
  position: relative;
}
.media-library .media-card .media-thumb .media-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: #f7f7f7;
  display: block;
}
.media-library .media-card .media-thumb .video-icon-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  padding: 0.5rem;
}
.media-library .media-card .media-content {
  flex: 1;
  padding: 1rem;
}
.media-library .media-card .media-content .media-type {
  font-size: 0.8rem;
  font-weight: 600;
  color: #777;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}
.media-library .media-card .media-content .media-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 0.5rem;
}
.media-library .media-card .media-content .media-description {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 0.75rem;
}
.media-library .media-card .media-content .media-meta {
  font-size: 0.8rem;
  color: #888;
}
.media-library .media-card .media-content .media-meta .media-date {
  font-style: italic;
}
.media-library .media-card .media-actions {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: #fafafa;
  border-top: 1px solid #eee;
}
.media-library .media-card .media-actions a,
.media-library .media-card .media-actions button {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.media-library .media-card .media-actions .btn-download {
  background: #374955;
  color: #fff;
}
.media-library .media-card .media-actions .btn-download:hover {
  background: rgb(44.9821428571, 59.7035714286, 69.5178571429);
}
.media-library .media-card .media-actions .btn-edit {
  background: #308478;
  color: #fff;
}
.media-library .media-card .media-actions .btn-edit:hover {
  background: rgb(41.2, 113.3, 103);
}
.media-library .media-card .media-actions .btn-delete {
  background: #ff7e80;
  color: #fff;
}
.media-library .media-card .media-actions .btn-delete:hover {
  background: rgb(255, 100.5, 102.8953488372);
}

.media-grid:not(:has(.media-card:not(.template))) {
  display: none;
}



/* multiform.css */
@charset "UTF-8";
.multiform:not([data-multiform-initialized=true]) .multiform-navigation .form-button--next,
.multiform:not([data-multiform-initialized=true]) .multiform-navigation .form-button--prev {
  opacity: 0;
  transform: scale(0.88);
  pointer-events: none;
}
.multiform.multiform--in-modal {
  display: flex;
  flex-direction: column;
}
.multiform .multiform-navigation {
  align-items: center;
  min-height: calc(2.5rem + 2px);
}
.multiform .multiform-navigation .form-button--next,
.multiform .multiform-navigation .form-button--prev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(2.5rem + 2px);
  transform: scale(1);
  opacity: 1;
  transform-origin: center center;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.multiform .multiform-navigation .form-button--placeholder,
.multiform .multiform-navigation .form-button--hidden {
  opacity: 0;
  transform: scale(0.88);
  pointer-events: none;
}
.multiform .multiform-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.multiform .multiform-radio-group .invalid-feedback {
  display: none;
  width: 100%;
}
.multiform .multiform-radio-group.is-invalid .invalid-feedback {
  display: block;
}
.multiform .multiform-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.multiform .multiform-checkbox-group.is-invalid .form-check-input {
  border-color: var(--bs-form-invalid-border-color, #dc3545);
}
.multiform .multiform-checkbox-group.is-invalid .form-check-label {
  color: var(--bs-form-invalid-color, #dc3545);
}
.multiform .multiform-checkbox-group .invalid-feedback {
  display: none;
  width: 100%;
}
.multiform .multiform-checkbox-group.is-invalid .invalid-feedback {
  display: block;
}
.multiform .card-select-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.multiform .card-select-check {
  position: relative;
  flex: 1 1 140px;
  min-width: 140px;
}
.multiform .card-select-input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
}
.multiform .card-select-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  padding: 1rem;
  border: 1.5px solid var(--bs-border-color);
  border-radius: 0.75rem;
  background: var(--bs-body-bg);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.multiform .card-select-option:hover {
  border-color: var(--bs-primary);
}
.multiform .card-select-option__label {
  font-weight: 600;
}
.multiform .card-select-input:checked + .card-select-option {
  border-color: var(--bs-primary);
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}
.multiform .card-select-input:focus-visible + .card-select-option {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}
.multiform .card-select-group.is-invalid .card-select-option {
  border-color: var(--bs-form-invalid-border-color, #dc3545);
}
.multiform .color-swatch-field .color-swatch-picker {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.25rem;
}
.multiform .color-swatch-field .color-swatch-hex {
  flex: 1 1 auto;
  min-width: 8rem;
  text-transform: uppercase;
}
.multiform .color-swatch-contrast .contrast-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
}
.multiform .color-swatch-contrast .contrast-badge--aaa,
.multiform .color-swatch-contrast .contrast-badge--aa {
  border-color: rgba(25, 135, 84, 0.4);
  color: #146c43;
}
.multiform .color-swatch-contrast .contrast-badge--fail {
  border-color: rgba(220, 53, 69, 0.4);
  color: #b02a37;
}
[data-bs-theme=dark] .multiform .color-swatch-contrast .contrast-badge--aaa,
[data-bs-theme=dark] .multiform .color-swatch-contrast .contrast-badge--aa {
  color: #75c9a0;
}
[data-bs-theme=dark] .multiform .color-swatch-contrast .contrast-badge--fail {
  color: #ea868f;
}
.multiform .form-indicators {
  --multiform-indicator-active: #0d6efd;
  --multiform-indicator-muted: #98a2b3;
  --multiform-indicator-text: #667085;
  --multiform-indicator-line-width: 2.75rem;
  --multiform-indicator-line-height: 3px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.multiform .form-indicators .step-indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--multiform-indicator-text);
  transition: color 240ms ease, opacity 240ms ease, transform 240ms ease;
}
.multiform .form-indicators .step-indicator.clickable {
  cursor: pointer;
}
.multiform .form-indicators .step-indicator.active {
  color: var(--multiform-indicator-active);
}
.multiform .form-indicators .step-indicator--summary {
  color: #9c9c9c;
}
.multiform .form-indicators .step-indicator__label {
  line-height: 1;
}
.multiform .form-indicators .step-indicator__line {
  display: block;
  width: var(--multiform-indicator-line-width);
  height: var(--multiform-indicator-line-height);
  border-radius: 999px;
  background: currentColor;
  opacity: 0.32;
  transform: scaleX(0.35);
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 280ms ease, background-color 280ms ease;
}
.multiform .form-indicators .step-indicator.active .step-indicator__line {
  opacity: 1;
  transform: scaleX(1);
}
.multiform .form-indicators[data-transition-direction=forward] .step-indicator__line {
  transform-origin: left center;
}
.multiform .form-indicators[data-transition-direction=backward] .step-indicator__line {
  transform-origin: right center;
}
.multiform .form-indicators[data-transition-direction=none] .step-indicator__line {
  transform-origin: center center;
}
.multiform .form-indicators--icons .step-indicator {
  color: var(--multiform-indicator-muted);
  font-size: 0.95rem;
}
.multiform .form-indicators--icons .step-indicator:not(.active) {
  opacity: 0.55;
}
.multiform .form-indicators--text .step-indicator {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.multiform .form-indicators--text .step-indicator:not(.active) {
  opacity: 0.65;
}
.multiform .form-indicators--text_underscore {
  gap: 0.85rem 1rem;
}
.multiform .form-indicators--text_underscore .step-indicator {
  flex-direction: column;
  gap: 0.45rem;
  min-width: 4.75rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.multiform .form-indicators--underscore {
  gap: 0.75rem;
  --multiform-indicator-line-width: 2.4rem;
}
.multiform .form-indicators--underscore .step-indicator {
  flex-direction: column;
  min-width: var(--multiform-indicator-line-width);
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  color: var(--multiform-indicator-muted);
}
[data-bs-theme=dark] .multiform .form-indicators {
  --multiform-indicator-text: var(--bs-secondary-color);
  --multiform-indicator-muted: var(--bs-secondary-color);
}
.multiform .multiform-pages {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.multiform .form-page {
  width: 100%;
}
.multiform .multiform-pages.multiform-pages--transitioning > .form-page.form-page--transition-current,
.multiform .multiform-pages.multiform-pages--transitioning > .form-page.form-page--transition-next {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 360ms ease;
  will-change: transform;
}
.multiform .multiform-pages.multiform-pages--transitioning > .form-page.form-page--transition-current {
  z-index: 1;
}
.multiform .multiform-pages.multiform-pages--transitioning > .form-page.form-page--transition-next {
  z-index: 2;
}
.multiform .multiform-pages.multiform-pages--transitioning > .form-page.form-page--transition-current.form-page--transition-forward {
  transform: translate3d(0, 0, 0);
}
.multiform .multiform-pages.multiform-pages--transitioning > .form-page.form-page--transition-next.form-page--transition-forward {
  transform: translate3d(100%, 0, 0);
}
.multiform .multiform-pages.multiform-pages--transitioning > .form-page.form-page--transition-current.form-page--transition-backward {
  transform: translate3d(0, 0, 0);
}
.multiform .multiform-pages.multiform-pages--transitioning > .form-page.form-page--transition-next.form-page--transition-backward {
  transform: translate3d(-100%, 0, 0);
}
.multiform .multiform-pages.multiform-pages--transitioning.multiform-pages--animating > .form-page.form-page--transition-current.form-page--transition-forward {
  transform: translate3d(-100%, 0, 0);
}
.multiform .multiform-pages.multiform-pages--transitioning.multiform-pages--animating > .form-page.form-page--transition-next.form-page--transition-forward {
  transform: translate3d(0, 0, 0);
}
.multiform .multiform-pages.multiform-pages--transitioning.multiform-pages--animating > .form-page.form-page--transition-current.form-page--transition-backward {
  transform: translate3d(100%, 0, 0);
}
.multiform .multiform-pages.multiform-pages--transitioning.multiform-pages--animating > .form-page.form-page--transition-next.form-page--transition-backward {
  transform: translate3d(0, 0, 0);
}
.multiform .file-upload-container {
  margin-bottom: 1rem;
}
.multiform .file-upload-container .upload-area {
  min-height: 132px;
  padding: 1rem 1.25rem;
  border: 2px dashed #b6c4d2;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #f2f7fc 100%);
  color: #435467;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.multiform .file-upload-container .upload-area:hover {
  border-color: #7fa7c8;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.multiform .file-upload-container .upload-area.dragging {
  border-color: #2a7db8;
  background: linear-gradient(180deg, #eef8ff 0%, #e7f2ff 100%);
  box-shadow: 0 0 0 4px rgba(42, 125, 184, 0.12), 0 14px 30px rgba(16, 24, 40, 0.14);
  transform: translateY(-2px);
}
.multiform .file-upload-container .upload-area .file-select {
  color: #145b99;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 91, 153, 0.45);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.multiform .file-upload-container .upload-area .file-select:hover {
  color: #0f4a7d;
  border-color: rgba(15, 74, 125, 0.7);
}
.multiform .file-upload-container .file-preview-list {
  margin-top: 0.75rem;
}
.multiform .file-upload-container .file-preview-list .file-image {
  height: fit-content;
  z-index: 2;
}
.multiform .file-upload-container .file-preview-list .file-preview-image {
  object-fit: cover;
}
.multiform .file-upload-container .file-preview-list .file-preview-delete-button {
  width: 28px;
  height: 28px;
  z-index: 2;
}
.multiform .file-upload-container .file-preview-list .badge {
  height: fit-content;
  width: fit-content;
  z-index: 2;
}
.multiform .file-upload-container .file-preview-list .feature-file-btn {
  position: absolute;
  top: auto;
  bottom: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.85);
  color: #b6c4d2;
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 0.95rem;
  line-height: 1;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.multiform .file-upload-container .file-preview-list .feature-file-btn:hover {
  color: #d9a300;
  background: #ffffff;
}
.multiform .file-upload-container .file-preview-list .feature-file-btn[aria-pressed=true] {
  color: #fff;
  background: #f0b400;
  border-color: #d9a300;
}
.multiform .file-upload-container .file-preview-list .file-item.featured .card {
  outline: 2px solid #f0b400;
  outline-offset: -2px;
}
.multiform .file-upload-container.file-upload-container--preview-inside .upload-area {
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0.85rem 1rem;
  transition: min-height 0.25s ease, padding 0.2s ease;
}
.multiform .file-upload-container.file-upload-container--preview-inside .upload-area .upload-prompt {
  width: 100%;
  text-align: center;
  padding: 0.5rem 0;
}
.multiform .file-upload-container.file-upload-container--preview-inside .upload-area .file-preview-list {
  margin-top: 0.5rem;
  width: 100%;
}
.multiform .file-upload-container.file-upload-container--preview-inside .upload-area.has-files {
  min-height: 0;
  padding: 0.75rem;
}
.multiform .file-upload-container.file-upload-container--preview-inside .upload-area.has-files .file-preview-list {
  margin-top: 0;
}
.multiform .file-upload-container.file-upload-container--preview-inside .upload-area.has-files.upload-single-file {
  min-height: 132px;
  align-items: center;
  justify-content: center;
}
.multiform .file-upload-container.file-upload-container--preview-inside .upload-area.has-files.upload-single-file .file-preview-list {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
}
.multiform .file-upload-container.file-upload-container--preview-inside .upload-area.has-files.upload-single-file .file-item {
  width: 160px;
  max-width: 160px;
  padding: 0;
}
.multiform .file-upload-container.file-upload-container--preview-inside .upload-area.has-files:not(.upload-single-file)::after {
  content: "+ Add more";
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.45rem 0;
  border: 1.5px dashed #b6c4d2;
  border-radius: 8px;
  color: #7a93aa;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.multiform .file-upload-container.file-upload-container--preview-inside .upload-area.has-files:not(.upload-single-file):hover::after {
  border-color: #7fa7c8;
  color: #145b99;
}
[data-bs-theme=dark] .multiform .file-upload-container .upload-area {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme=dark] .multiform .file-upload-container .upload-area:hover {
  border-color: var(--bs-link-color);
}
[data-bs-theme=dark] .multiform .file-upload-container .upload-area.dragging {
  border-color: var(--bs-link-color);
  background: var(--bs-secondary-bg);
  box-shadow: 0 0 0 4px rgba(139, 185, 255, 0.15), 0 14px 30px rgba(0, 0, 0, 0.3);
}
[data-bs-theme=dark] .multiform .file-upload-container .upload-area .file-select {
  color: var(--bs-link-color);
  border-bottom-color: rgba(139, 185, 255, 0.45);
}
[data-bs-theme=dark] .multiform .file-upload-container .upload-area .file-select:hover {
  color: var(--bs-link-hover-color);
  border-color: var(--bs-link-hover-color);
}
[data-bs-theme=dark] .multiform .file-upload-container.file-upload-container--preview-inside .upload-area.has-files:not(.upload-single-file)::after {
  border-color: var(--bs-border-color);
  color: var(--bs-secondary-color);
}
[data-bs-theme=dark] .multiform .file-upload-container .feature-file-btn {
  background: rgba(0, 0, 0, 0.55);
  color: var(--bs-secondary-color);
  border-color: var(--bs-border-color);
}
[data-bs-theme=dark] .multiform .file-upload-container .feature-file-btn:hover {
  color: #f0b400;
  background: rgba(0, 0, 0, 0.7);
}
[data-bs-theme=dark] .multiform .file-upload-container .feature-file-btn[aria-pressed=true] {
  color: #1b1b1b;
  background: #f0b400;
  border-color: #d9a300;
}
[data-bs-theme=dark] .multiform .file-upload-container.file-upload-container--preview-inside .upload-area.has-files:not(.upload-single-file):hover::after {
  border-color: var(--bs-link-color);
  color: var(--bs-link-color);
}
.multiform .file-upload-language-switcher-group .image-language-switcher .language-switch-btn {
  position: relative;
}
.multiform .file-upload-language-switcher-group .image-language-switcher .language-switch-btn.active {
  background-color: #145b99;
  border-color: #145b99;
  color: #fff;
}
.multiform .file-upload-language-switcher-group .image-language-switcher .language-switch-btn.has-image::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #2a9d5c;
}
.multiform [data-bs-theme=dark] .file-upload-language-switcher-group .image-language-switcher .language-switch-btn.active {
  background-color: var(--bs-link-color);
  border-color: var(--bs-link-color);
  color: var(--bs-dark);
}
.multiform .sortable-block .fill-blank {
  border: none;
  border-bottom: 1px solid #000;
  background: transparent;
  width: 80px;
  display: inline-block;
  text-align: center;
}
.multiform .draggable-pill-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.multiform .drag-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: var(--bs-body-color);
  box-shadow: var(--bs-box-shadow-sm);
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.multiform .drag-pill:hover {
  border-color: var(--primary);
  box-shadow: var(--bs-box-shadow);
  transform: translateY(-1px);
}
.multiform .drag-pill:active {
  cursor: grabbing;
  transform: scale(0.99);
}
.multiform .drag-pill .pill-label {
  font-weight: 600;
  line-height: 1.1;
}
.multiform .drag-pill .pill-delete-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(220, 53, 69, 0.35);
  border-radius: 50%;
  background: #fff;
  color: #dc3545;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.multiform .drag-pill .pill-delete-btn:hover {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
}
.multiform .drag-pill.used {
  opacity: 0.5;
  pointer-events: none;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
[data-bs-theme=dark] .multiform .drag-pill {
  background: linear-gradient(180deg, var(--bs-tertiary-bg) 0%, var(--bs-secondary-bg) 100%);
}
[data-bs-theme=dark] .multiform .drag-pill .pill-delete-btn {
  background: var(--bs-secondary-bg);
}

/* ------------------------------------------------------------------ */
/* Multiform nav relocated into a real modal footer                   */
/* ------------------------------------------------------------------ */
/*
 * When a multiform is inside a modal, multiform_navigation.js moves its
 * .multiform-navigation out of the form and into a .modal-footer sibling of
 * .modal-body (creating the footer if the modal doesn't already have one),
 * and marks the modal scrollable so .modal-body scrolls while the header and
 * this footer stay pinned in view — the standard Bootstrap
 * modal-dialog-scrollable layout, applied only to modals that need it.
 */
.modal-footer > .multiform-navigation {
  flex: 1 1 100%;
  width: 100%;
  margin: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .multiform .multiform-pages.multiform-pages--transitioning > .form-page.form-page--transition-current,
  .multiform .multiform-pages.multiform-pages--transitioning > .form-page.form-page--transition-next {
    transition: none !important;
  }
}
@media (max-width: 576px) {
  .multiform .file-upload-container .upload-area {
    min-height: 116px;
    padding: 0.9rem;
  }
}
.multiform--dropdown {
  position: relative;
}

.multiform--dropdown-menu {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  max-width: calc(100vw - 1rem);
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5rem 0;
  max-height: min(18rem, 100vh - 1rem);
  z-index: 1085;
  overflow-y: auto;
}
.multiform--dropdown-menu.show {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.multiform--dropdown-menu .filtered-items-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}
.multiform--dropdown-menu .multiform--dropdown-divider {
  margin: 0.5rem 0;
}
.multiform--dropdown-menu li {
  list-style: none;
}
.multiform--dropdown-menu .multiform--dropdown-item {
  padding: 0 0.5rem;
  cursor: pointer;
  text-decoration: none !important;
  color: #333;
}
.multiform--dropdown-menu .multiform--dropdown-item:hover {
  background-color: #f0f0f0;
}

/* ----- Form Builder: Section layout element ----- */
.form-section-wrapper {
  margin-top: 1.5rem;
}
.form-section-wrapper:first-child {
  margin-top: 0;
}

.form-section {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 2rem;
  box-sizing: border-box;
  box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.06);
}

.form-section-header {
  margin-bottom: 1.25rem;
}

.form-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.35rem 0;
  line-height: 1.15;
  color: #0f172a;
}

.form-section-subtitle {
  color: #64748b;
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}

.form-section[data-title-position=left] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 2rem;
  align-items: start;
}
.form-section[data-title-position=left] .form-section-header {
  margin-bottom: 0;
}
.form-section[data-title-position=left] .form-section-body {
  margin: 0;
}

@media (max-width: 767.98px) {
  .form-section {
    padding: 1.25rem;
  }
  .form-section[data-title-position=left] {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
/* ----- Form Builder editor: section card ----- */
.masonry-field--section .masonry-field-header-label input.masonry-field-name {
  font-weight: 600;
}

.multiform-hotspot-container {
  -webkit-user-select: none;
  user-select: none;
}
.multiform-hotspot-container .hotspot-region {
  transition: background-color 0.12s ease, border-color 0.12s ease;
  border: 2px solid transparent;
  box-sizing: border-box;
  cursor: crosshair;
}
.multiform-hotspot-container:not([disabled]) .hotspot-region:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.55);
}
.multiform-hotspot-container .hotspot-region.selected {
  background-color: rgba(13, 110, 253, 0.25);
  border-color: #0d6efd;
}
.multiform-hotspot-container .hotspot-region.selected::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  background: #0d6efd;
  border: 2.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.multiform-hotspot-container[disabled] {
  cursor: default;
}
.multiform-hotspot-container[disabled] .hotspot-region {
  cursor: default;
}

.multiform-star-rating {
  display: flex;
  gap: 0.25rem;
}
.multiform-star-rating .star-rating-star {
  background: none;
  border: none;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: #adb5bd;
  cursor: pointer;
  transition: color 0.12s ease, transform 0.08s ease;
}
.multiform-star-rating .star-rating-star:hover {
  transform: scale(1.1);
}
.multiform-star-rating .star-rating-star .bi-star-fill,
.multiform-star-rating .star-rating-star .bi-star-half {
  color: var(--bs-primary);
}
.multiform-star-rating[disabled] .star-rating-star {
  cursor: default;
}
.multiform-star-rating[disabled] .star-rating-star:hover {
  transform: none;
}



/* activities.css */
.activity-take {
  background: url("/public/img/abstractBG.webp") center/cover no-repeat fixed;
  padding-top: 6rem;
}

/* Activity shell */
.activity-shell {
  position: relative;
  max-width: 1100px;
  margin: 1.5rem auto 2.5rem;
  padding: 0 1rem;
}

/* Override legacy .activity-take flex centering styles when using the newer shell layout. */
.activity-take.activity-shell {
  max-width: none;
  margin: 0 auto;
  padding: 1.25rem clamp(1rem, 3vw, 2.5rem) 2rem;
  min-height: calc(100vh - 74px - 3rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: url("/public/img/abstractBG.webp") center/cover no-repeat fixed;
}
.activity-take.activity-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  z-index: 0;
  pointer-events: none;
}
.activity-take.activity-shell > .activity-shell__hero,
.activity-take.activity-shell > .quiz-card-wrapper {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
}

.activity-shell__hero {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  border: 1px solid #d7dee8;
  background: linear-gradient(140deg, #f8fbff 0%, #eef4ff 60%, #f6f9ff 100%);
}

.activity-shell__hero-left {
  flex: 1 1 auto;
  min-width: 0;
}

.activity-shell__eyebrow {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #e7edf9;
  color: #334b78;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
}

.activity-shell__hero-right {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.activity-shell__action {
  border-radius: 10px;
  font-weight: 600;
}

.activity-take.activity-shell .quiz-card-wrapper {
  max-width: none;
  margin: 0 auto;
  border-radius: 16px;
  border: 1px solid #dce4ef;
  background: #f7f9fc;
  box-shadow: 0 10px 28px rgba(18, 41, 74, 0.12);
  padding: 1rem;
}

/* Main quiz container */
.activity-take.activity-shell .quiz-card {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 1.5rem;
  background: #fff;
  border-radius: 12px;
}

/* Title */
.activity-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: #1e3357;
}

@media (max-width: 768px) {
  .activity-shell__hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .activity-shell__hero-right {
    width: 100%;
    justify-content: flex-start;
  }
}
/*
 * Survey/rating modal (ActivityComponent's $isModalDisplay branch, e.g. the
 * "How was your experience?" feedback prompt). This is a separate render path
 * from .activity-shell above - it stays inside Bootstrap's own
 * .modal/.modal-dialog/.modal-content shell rather than the full-page
 * .activity-shell wrapper, so it never picked up that styling and rendered as
 * plain default Bootstrap. Scoped to the component's own data-activity-modal
 * marker so this never touches unrelated modals.
 */
.modal[data-activity-modal=true] .modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(18, 41, 74, 0.22);
}
.modal[data-activity-modal=true] .modal-header {
  border-bottom: none;
  padding: 1.5rem 1.5rem 0.5rem;
}
.modal[data-activity-modal=true] .modal-title {
  font-weight: 700;
  color: #1e3357;
}
.modal[data-activity-modal=true] .modal-body {
  padding: 0.5rem 1.5rem 1.5rem;
}
.modal[data-activity-modal=true] .quiz-card-wrapper {
  background: none;
  padding: 0;
}
.modal[data-activity-modal=true] .quiz-card {
  padding: 0;
}
.modal[data-activity-modal=true] fieldset.quiz-taking {
  border: none;
  padding: 0;
  margin: 0;
}
.modal[data-activity-modal=true] fieldset.quiz-taking legend {
  float: none;
  width: auto;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1e3357;
  margin-bottom: 0.75rem;
}
.modal[data-activity-modal=true] .multiform--field-wrapper {
  background: #f7f9fc;
  border: 1px solid #dce4ef;
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.modal[data-activity-modal=true] .multiform--field-wrapper:last-child {
  margin-bottom: 0;
}
.modal[data-activity-modal=true] .multiform-star-rating .star-rating-star {
  font-size: 1.9rem;
}
.modal[data-activity-modal=true] textarea.user-answer {
  border-radius: 10px;
}
.modal[data-activity-modal=true] .submitbtn-activity__submit {
  border-radius: 10px;
  font-weight: 600;
  padding: 0.55rem 1.5rem;
}



/* lms.css */
.lms-wrapper {
  min-height: 100vh;
  background: #f8f9fa;
}

.lms-sidebar {
  width: 240px;
  background: #343a40;
  color: #fff;
  min-height: 100vh;
}
.lms-sidebar h2 {
  font-size: 1.5rem;
  color: #fff;
}
.lms-sidebar .nav-link {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  padding: 0.5rem 0;
}
.lms-sidebar .nav-link:hover, .lms-sidebar .nav-link.active {
  color: #fff;
  font-weight: 600;
}

.lms-content {
  background: #fff;
}
.lms-content h1,
.lms-content h4 {
  color: #343a40;
}
.lms-content .course-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lms-content .course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
}
.lms-content .course-card img {
  height: 50px;
  object-fit: contain;
}
.lms-content .course-card .btn {
  font-weight: 600;
}

.fab-return {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #007bff;
  color: #fff;
  border-radius: 50px;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 9999;
  text-decoration: none;
}
.fab-return:hover {
  background: rgb(0, 98.4, 204);
  transform: scale(1.05);
  color: #fff;
}



/* reports.css */
#rptPage .rpt-kpi {
  border: 1px solid var(--bs-border-color, #e2e8f0);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  background: var(--bs-body-bg, #fff);
}
#rptPage .rpt-kpi .rpt-kpi-value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}
#rptPage .rpt-kpi .rpt-kpi-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-secondary-color, #64748b);
  font-weight: 600;
}
#rptPage .rpt-chart-card {
  border: 1px solid var(--bs-border-color, #e2e8f0);
  border-radius: 12px;
  padding: 1.25rem;
  background: var(--bs-body-bg, #fff);
}
#rptPage table.rpt-table th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
#rptPage table.rpt-table th .rpt-sort-ind {
  opacity: 0.4;
  font-size: 0.65rem;
}
#rptPage table.rpt-table td {
  font-size: 0.85rem;
  vertical-align: middle;
}
#rptPage .rpt-clickable-row {
  cursor: pointer;
}
#rptPage .rpt-clickable-row:hover {
  background: var(--bs-tertiary-bg, #f8fafc);
}
#rptPage .rpt-heat-cell {
  width: 100%;
  aspect-ratio: 2.2/1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  color: #475569;
}

#rptDetailModal .rpt-q-bar {
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
  overflow: hidden;
}
#rptDetailModal .rpt-q-bar > div {
  height: 100%;
  border-radius: 4px;
}



/* style.css */
@charset "UTF-8";
/***************************************************************************************************
********************************* STAGE STYLES ****************************************************
***************************************************************************************************/
:root {
  --primary: #0d6efd;
  --secondary: #161925;
  --accent: #ff6600;
  --text: #161925;
  --lightgrey: #8EA8C3;
  --mediumgrey: #406E8E;
  --darkgrey: #23395B;
  --teal: #449F93;
  --darkteal: #006153;
  --cream: #EEE8A9;
  --dark-bg: #161925;
  --yellow: #e2b12e;
  --error: #b92924;
  --rust: #C15450;
}

.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: #dc3545;
}

.was-validated .form-control:valid,
.was-validated .form-select:valid {
  border-color: #28a745;
}

.invalid-feedback {
  display: none;
  font-size: 0.875rem;
  color: #dc3545;
}

.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-feedback {
  display: block;
}

.stage-land {
  background-color: green;
  color: var(--text-light);
}

.stage-construction {
  background-color: yellow;
  color: var(--text-dark);
}

.stage-management {
  background-color: lightblue;
  color: var(--text-dark);
}

.stage-renovation {
  background-color: orange;
  color: var(--text-light);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #09083a;
  --bs-btn-border-color: #09083a;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #12114e;
  --bs-btn-hover-border-color: #12114e;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #06052a;
  --bs-btn-active-border-color: #06052a;
  --bs-btn-focus-shadow-rgb: 9, 8, 58;
  --bs-btn-disabled-bg: #09083a;
  --bs-btn-disabled-border-color: #09083a;
}

.navbar {
  --nav-brand: #09083a;
  --nav-ink: #3a3f63;
  background: var(--navbar-bg, #f8f9fa);
  padding: 0.5rem 2rem;
  min-height: 72px;
  box-shadow: 0 1px 0 rgba(16, 18, 48, 0.06), 0 6px 20px rgba(16, 18, 48, 0.05);
  position: relative;
}
.navbar .navbar-nav {
  align-items: center;
}
.navbar .navbar-brand {
  display: flex;
  align-items: center;
  padding: 0;
  margin-right: 1.5rem;
}
.navbar .navbar-brand img {
  height: 46px;
  width: auto;
  min-height: 0;
  max-height: 52px;
  max-width: 190px;
  object-fit: contain;
  display: block;
}
.navbar .navbar-nav > .nav-item > .nav-link {
  font-weight: 500;
  color: var(--nav-ink);
  padding: 0.5rem 0.9rem;
  margin: 0 0.1rem;
  position: relative;
  transition: color 0.18s ease;
}
.navbar .navbar-nav > .nav-item > .nav-link > span {
  position: relative;
  display: inline-block;
}
.navbar .navbar-nav > .nav-item > .nav-link > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--nav-brand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s ease;
}
.navbar .navbar-nav > .nav-item > .nav-link:hover {
  color: var(--nav-brand);
}
.navbar .navbar-nav > .nav-item > .nav-link:hover > span::after {
  transform: scaleX(1);
}
.navbar .navbar-nav > .nav-item > .nav-link.active {
  color: var(--nav-brand);
  font-weight: 600;
}
.navbar .navbar-nav > .nav-item > .nav-link.active > span::after {
  transform: scaleX(1);
}
.navbar .nav-points-chip,
.navbar .nav-link--points {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--nav-brand, #b07700);
  background: var(--nav-highlight-bg, #fff7e6);
  border: 1px solid var(--nav-highlight-bg, #f3dca6);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  margin: 0 0.5rem 0 1rem;
  white-space: nowrap;
}
.navbar .nav-points-chip .bi,
.navbar .nav-link--points .bi {
  color: var(--nav-brand, #f0a500);
}
.navbar .nav-points-chip > span::after,
.navbar .nav-link--points > span::after {
  display: none;
}
.navbar .navbar-nav > .nav-item > .nav-link--admin {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  border-radius: 50%;
  color: var(--nav-brand);
  background: var(--nav-highlight-bg, #eef1fb);
  margin: 0 0.6rem;
  padding: 0 !important;
  line-height: 1;
  transition: background 0.18s ease, color 0.18s ease;
}
.navbar .navbar-nav > .nav-item > .nav-link--admin .bi {
  font-size: 1.15rem;
  line-height: 1;
  color: inherit;
  margin: 0 !important;
}
.navbar .navbar-nav > .nav-item > .nav-link--admin::after {
  display: none !important;
}
.navbar .navbar-nav > .nav-item > .nav-link--admin > span::after {
  display: none;
}
.navbar .navbar-nav > .nav-item > .nav-link--admin:hover, .navbar .navbar-nav > .nav-item > .nav-link--admin:focus, .navbar .navbar-nav > .nav-item > .nav-link--admin.show {
  background: var(--nav-highlight-bg-hover, #09083a);
  color: var(--nav-ink, #fff);
}
.navbar .navbar-nav > .nav-item > .nav-link--admin:hover .bi, .navbar .navbar-nav > .nav-item > .nav-link--admin:focus .bi, .navbar .navbar-nav > .nav-item > .nav-link--admin.show .bi {
  color: var(--nav-ink, #fff);
}
.navbar .navbar-nav > .nav-item > .language-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  flex: 0 0 auto;
  font-weight: 600;
  line-height: 1;
  color: var(--nav-ink);
  border: 1px solid #dde1f0;
  border-radius: 8px;
  padding: 0.45rem 0.8rem !important;
  margin-left: 0.6rem;
}
.navbar .navbar-nav > .nav-item > .language-toggle > span::after {
  display: none;
}
.navbar .navbar-nav > .nav-item > .language-toggle:hover {
  color: var(--nav-brand);
  border-color: var(--nav-brand);
}
.navbar .navbar-nav > .nav-item > .nav-link--login {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--nav-ink, #fff) !important;
  background: var(--nav-highlight-bg, #09083a);
  border-radius: 8px;
  padding: 0.45rem 1.15rem !important;
  margin-left: 0.6rem;
}
.navbar .navbar-nav > .nav-item > .nav-link--login > span::after {
  display: none;
}
.navbar .navbar-nav > .nav-item > .nav-link--login:hover {
  background: var(--nav-highlight-bg-hover, #12114e);
}
.navbar .dropdown-menu {
  border: 1px solid #e7eaf6;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(16, 18, 48, 0.12);
  padding: 0.4rem;
}
.navbar .dropdown-menu .dropdown-item {
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
}
.navbar .dropdown-menu .dropdown-item:hover {
  background: #eef1fb;
}
.navbar .dropdown-menu .dropdown-item.active, .navbar .dropdown-menu .dropdown-item:active {
  background: var(--nav-highlight-bg-hover, #09083a);
  color: var(--nav-ink, #fff);
}
.navbar .btn-signin {
  margin-left: 1rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: 25px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}
.navbar .btn-signin:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}

/* Custom button based on Bootstrap btn-warning */
.btn-enter {
  --bs-btn-color: #fff; /* text color */
  --bs-btn-bg: #09083a; /* base background */
  --bs-btn-border-color: #09083a; /* border same as bg */
  --bs-btn-hover-bg: #12114e; /* slightly lighter/different on hover */
  --bs-btn-hover-border-color: #12114e;
  --bs-btn-focus-shadow-rgb: 9,8,58; /* focus ring uses brand color */
  --bs-btn-active-bg: #06052a; /* darker for active click */
  --bs-btn-active-border-color: #06052a;
  --bs-btn-disabled-bg: #09083a;
  --bs-btn-disabled-border-color: #09083a;
  display: inline-block;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.375rem; /* same as default Bootstrap rounded corners */
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-enter:hover {
  color: #fff;
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-enter:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-enter:active {
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-enter:disabled,
.btn-enter.disabled {
  opacity: 0.65;
  pointer-events: none;
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
}

body,
input,
select,
textarea,
button {
  font-family: acumin-variable, sans-serif;
}

b {
  font-weight: 900;
}

.program-card {
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}
.program-card:hover {
  transform: scale(1.02);
}
.program-card .card-header {
  background-size: cover;
  background-position: center;
  height: 100px;
  background-image: url("/public/img/land.jpg");
}
.program-card .card-header .program-stage {
  font-size: 0.8rem;
}
.program-card .card-header .program-location {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent);
  width: 30%;
}
.program-card .card-body {
  padding: 1.5rem 1rem;
}
.program-card .card-body .program-title {
  color: #4ed2f7;
}
.program-card .card-body .program-address {
  font-size: 0.7rem;
}
.program-card .card-body .program-stats {
  row-gap: 0.5rem;
}
.program-card .card-body .program-stats .stat {
  line-height: 1;
}
.program-card .card-body .program-stats .value {
  font-size: 1.25rem;
}
.program-card .card-body .program-stats .small {
  font-size: 0.75rem;
  color: #6c757d;
}
.program-card .card-footer {
  border-top: 1px solid #e9ecef;
  background-color: #fff;
}
.program-card .card-footer .action-btn {
  text-align: center;
  background-color: white;
  border: none;
}
.program-card .card-footer .action-btn:hover {
  color: #007bff;
}

tbody, td, tfoot, th, thead, tr {
  border-style: unset;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 16px;
  text-align: left;
}
.table th, .table td {
  padding: 10px;
}
.table th {
  background-color: #666666;
  color: white;
  font-weight: 400;
}
.table .btn-link {
  color: #007bff;
  text-decoration: none;
}
.table .btn-link:hover {
  text-decoration: underline;
}

.dash-table {
  margin: 0;
  font-size: 0.9rem;
}
.dash-table thead th {
  background: transparent;
  color: #6b7194;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 0;
  border-bottom: 1.5px solid #e7eaf6;
  padding: 0.6rem 0.75rem;
  white-space: nowrap;
}
.dash-table thead th .badge {
  font-weight: 600;
}
.dash-table tbody td {
  padding: 0.7rem 0.75rem;
  vertical-align: middle;
  border-color: #eef1f8;
}
.dash-table tbody tr:last-child td {
  border-bottom: 0;
}
.dash-table tbody tr:hover {
  background: #f7f9ff;
}

.dash-pill {
  display: inline-block;
  min-width: 1.75rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: #eef1fb;
  color: #3a3f63;
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1.4;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: #eef8f8;
}

td:has(.module--edit-button) {
  text-align: right;
}

.module--edit-button {
  text-align: right;
}

.module--delete-button {
  text-align: right;
}

.module--add-button {
  background-color: #23395B;
  color: white;
  border-radius: 20px;
}

.fg-logo {
  width: 150px;
  margin-left: 2rem;
}

.modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 2rem;
}
.modal-header .modal-header-content {
  text-align: center;
}
.modal-header .modal-title {
  margin: 0;
  font-size: 2rem;
  font-weight: bold;
}
.modal-header .modal-subtitle {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: #6c757d;
}
.modal-header .btn-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.modal-body .form-label {
  margin-bottom: 0.5rem;
}
.modal-body .form-select {
  font-size: 1rem;
  padding: 0.5rem;
}

.stage-select {
  min-width: 300px;
  padding: 0.25rem;
  border-radius: 5px;
}

/* Align label and input fields on the same line */
.form-page .mb-3:not(.file-upload-container) {
  display: flex;
  align-items: flex-start;
}
.form-page .form-label {
  margin-right: 4rem;
  text-align: left;
}
.form-page .form-control {
  flex-grow: 1;
}

.card .row .group-title {
  background-color: #666666;
  color: #FFF;
}

.table-schema-added {
  color: var(--success) !important;
}

.table-schema-removed {
  color: var(--danger) !important;
}

.calc-direction-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-bottom: 1rem;
}

.calc-direction-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  color: var(--bs-secondary);
  cursor: pointer;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 0.3rem 0.6rem;
  background-color: #f8f9fa;
  transition: background-color 0.2s ease;
}
.calc-direction-toggle:hover {
  background-color: #e9ecef;
}
.calc-direction-toggle:hover i {
  opacity: 1;
  font-size: 1.15rem;
}
.calc-direction-toggle i {
  font-size: 1.1rem;
  color: var(--bs-secondary);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.bi-arrow-right-circle-fill {
  font-size: 1.15rem;
}

.bi-arrow-left-circle-fill {
  font-size: 1.15rem;
}

.pdf-export-header {
  text-align: right;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-text {
  font-size: 10rem;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.2);
  transform: rotate(352deg);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

.row.card-section-container {
  position: relative;
}

button:disabled {
  background-color: #e0e0e0;
  color: #a0a0a0;
  border: 1px solid #d0d0d0;
  cursor: not-allowed;
  opacity: 0.7;
}

button:disabled:hover {
  background-color: #e0e0e0;
  color: #a0a0a0;
}

.quick-links .filter-button:disabled {
  background-color: #e0e0e0;
  color: #a0a0a0;
  border: 1px solid #d0d0d0;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Fade-in and fade-out animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
}
#equationModal .drag-placeholder {
  background-color: rgba(0, 123, 255, 0.2); /* Light blue transparent */
  border: 2px dashed #007bff; /* Dashed border */
  height: 30px;
  width: 100px;
  margin: 5px;
  display: inline-block;
}
#equationModal .eq-title {
  color: #204F88;
}
#equationModal .operator-container {
  background-color: #EFEFEF;
  border-top: 1px solid #EFF1F3;
  border-bottom: 1px solid #EFF1F3;
}
#equationModal .operator-container .operator-btn-container {
  padding: 5px;
}
#equationModal .operator-container .operator-btn-container .operator-btn {
  background-color: #E9F6FB !important;
  border: 1px solid #97D8ED;
  font-size: 5rem;
  font-weight: 900;
  color: black;
}
#equationModal .cell-container {
  background-color: #F9F9F9;
  border-top: 1px solid #EFF1F3;
  border-bottom: 1px solid #EFF1F3;
}
#equationModal .drag-pill {
  background-color: #FDF3C9;
  border: 1px solid black;
}
#equationModal .drag-pill .pill-delete-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: white;
  color: #600000;
  width: 20px;
  height: 20px;
  border: 1px solid #600000;
  border-radius: 50%;
  padding: 0;
  padding-bottom: 2px;
  font-size: 1rem;
}
#equationModal .calculation-container {
  border-bottom: 1px solid #EFF1F3;
}
#equationModal .calculation-container .operator-btn {
  background-color: #E9F6FB !important;
  border: 1px solid #97D8ED;
  font-size: 5rem;
  font-weight: 900;
  color: black;
}
#equationModal .search-group {
  position: relative;
  width: 250px;
}
#equationModal .search-group input {
  width: 100%;
  border: 1px solid black;
  padding: 0.5rem 1rem;
}
#equationModal .search-group i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.active-sort {
  background-color: #0d6efd;
  color: white;
  border-color: #0d6efd;
}

.fave-toggle.active {
  background-color: #dc3545;
  color: #fff;
  border-color: #dc3545;
}

#favourite-filter.active {
  background-color: #dc3545;
  color: white;
  border-color: #dc3545;
}

#favourite-filter.active i {
  color: white;
}

.thankyou-wrapper {
  min-height: 100vh;
  background: linear-gradient(135deg, #f9f9f9 60%, #eaf8f2 100%);
}

.thankyou-box {
  max-width: 500px;
  background: #fff;
  border-radius: 1rem;
}

.thankyou-icon i {
  font-size: 3rem;
  color: #28a745;
}

.thankyou-box h2 {
  font-size: 2rem;
  color: #333;
}

.thankyou-box p {
  font-size: 1.1rem;
}

/* ===== Fullscreen overlay remains ===== */
#toastOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 1054;
}

.terms-list {
  counter-reset: term-counter;
  list-style: none;
}
.terms-list > .terms-section {
  counter-increment: term-counter;
  position: relative;
  padding-left: 2.5rem;
}
.terms-list > .terms-section::before {
  content: counter(term-counter) ".";
  position: absolute;
  left: 0;
  top: 0.2rem;
  font-weight: 700;
  font-size: 1.25rem;
}

/* ===============================
   Contest Slider – Full CSS
   =============================== */
#contestHeroSection {
  min-height: 300px;
}

.contest-slider-wrapper {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  padding: 2rem 0;
}
.contest-slider-wrapper h2 {
  text-align: center;
  font-weight: 700;
  margin-bottom: 2rem;
}
.contest-slider-wrapper .contest-slider-track {
  display: flex;
  align-items: center;
  gap: 2rem;
  transition: transform 0.5s ease;
  justify-content: center;
}
.contest-slider-wrapper .contest-card {
  flex: 0 0 280px;
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
  opacity: 0.7;
  transform: scale(0.9);
}
.contest-slider-wrapper .contest-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.contest-slider-wrapper .contest-card .card-body {
  padding: 1rem;
}
.contest-slider-wrapper .contest-card .card-body h5 {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.contest-slider-wrapper .contest-card .card-body p {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.contest-slider-wrapper .contest-card .card-body .btn-primary {
  background-color: #09083a;
  border-color: #09083a;
  color: #fff;
  width: 100%;
}
.contest-slider-wrapper .contest-card .card-body .btn-primary:hover {
  background-color: #0d0c55;
  border-color: #0d0c55;
}
.contest-slider-wrapper .contest-card.active {
  transform: scale(1.15);
  opacity: 1;
  z-index: 2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.contest-slider-wrapper .slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(9, 8, 58, 0.85);
  color: #fff;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}
.contest-slider-wrapper .slider-btn:hover {
  background-color: rgb(9, 8, 58);
}
.contest-slider-wrapper .slider-btn.slider-btn-prev {
  left: 0.5rem;
}
.contest-slider-wrapper .slider-btn.slider-btn-next {
  right: 0.5rem;
}
@media (max-width: 992px) {
  .contest-slider-wrapper .contest-card {
    flex: 0 0 240px;
  }
  .contest-slider-wrapper .contest-card.active {
    transform: scale(1.1);
  }
}
@media (max-width: 768px) {
  .contest-slider-wrapper .contest-card {
    flex: 0 0 200px;
  }
  .contest-slider-wrapper .contest-card.active {
    transform: scale(1.05);
  }
}

/* Contest Hero container text centering */
.contest-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  background-color: var(--hero-bg, #141a35);
  color: var(--hero-text, #fff);
}
.contest-hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
}
.contest-hero h1 {
  margin-top: 0;
}

.site-footer {
  position: relative;
  background: var(--footer-bg, #111827);
  color: var(--footer-text, #f3f4f6);
  font-family: "Inter", sans-serif;
  padding-top: 2rem;
  /* === Yellow Triangle Decoration === */
}
.site-footer .footer-container {
  position: relative; /* keep content above triangle */
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 2rem;
}
@media (max-width: 768px) {
  .site-footer .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
.site-footer .footer-brand .footer-logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
}
.site-footer .footer-brand .footer-tagline {
  font-size: 0.9rem;
  color: #9ca3af;
}
.site-footer .footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .footer-links ul:not(.dropdown-menu) {
  display: grid;
}
.site-footer .footer-links ul {
  grid-auto-flow: column;
  grid-auto-rows: auto;
  grid-template-rows: repeat(4, auto);
  column-gap: 1.25rem;
}
@media (max-width: 992px) {
  .site-footer .footer-links ul {
    column-gap: 1rem;
  }
}
@media (max-width: 600px) {
  .site-footer .footer-links ul {
    grid-auto-flow: row;
    grid-template-rows: none;
    row-gap: 0.5rem;
  }
}
.site-footer .footer-links li {
  margin-bottom: 0.35rem;
  width: auto;
}
.site-footer .footer-links a {
  display: inline-block;
  width: auto;
  font-size: 0.95rem;
  color: #f3f4f6;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.site-footer .footer-links a:hover {
  color: #80f9c0;
}
.site-footer .footer-contact h4 {
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #ffffff;
}
.site-footer .footer-contact p {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: #d1d5db;
}
.site-footer .footer-contact .footer-social {
  margin-top: 0.5rem;
}
.site-footer .footer-contact .footer-social a {
  font-size: 1.25rem;
  color: #f3f4f6;
  margin-right: 0.75rem;
  transition: color 0.2s ease-in-out;
}
.site-footer .footer-contact .footer-social a:hover {
  color: #80f9c0;
}
.site-footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 2rem;
  padding: 1rem 0;
  text-align: center;
  font-size: 0.8rem;
  color: #9ca3af;
}

.fullwidth-banner {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}
.fullwidth-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fullwidth-banner .banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fullwidth-banner .banner-text {
  color: #fff;
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  padding: 0 1rem;
}

.learning-section {
  justify-content: space-evenly;
  padding: 4rem 2rem;
  min-height: 300px;
  position: relative;
}
.learning-section .learning-card {
  display: flex;
  border: 1px solid #ccc;
  border-radius: var(--bs-border-radius, 6px);
  overflow: hidden;
  background: #fff;
  margin-bottom: 16px;
  padding: 0 !important;
}
.learning-section .learning-card .card-left {
  flex: 0 0 40%;
}
.learning-section .learning-card .card-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.learning-section .learning-card .card-middle {
  flex: 1;
  padding: 14px 12px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.learning-section .learning-card .card-middle .card-label {
  font-size: 0.85rem;
  color: #999;
  margin-bottom: 0.25rem;
}
.learning-section .learning-card .card-middle .card-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #ff6600;
  margin-bottom: 6px;
}
.learning-section .learning-card .card-middle .card-description,
.learning-section .learning-card .card-middle .card-attempts {
  font-size: 14px;
  color: #555;
  margin: 2px 0;
}
.learning-section .learning-card .card-middle .card-requirement {
  font-size: 12px;
  font-style: italic;
  color: #888;
  margin-bottom: 8px;
}
.learning-section .learning-card .card-middle .card-score {
  font-size: 1rem;
  color: #333;
  font-weight: 600;
}
.learning-section .learning-card .card-middle .start-button {
  margin-top: auto;
  padding: 10px 12px;
  border-radius: var(--bs-border-radius, 20px);
  font-weight: bold;
  font-size: 14px;
  width: 100%;
  text-align: center;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s;
}
.learning-section .learning-card .card-middle .start-button.green {
  background-color: #a5e214;
  color: #000;
}
.learning-section .learning-card .card-middle .start-button.green:hover {
  background-color: #92c511;
}
.learning-section .learning-card .card-middle .start-button.orange {
  background-color: #ff9900;
  color: white;
}
.learning-section .learning-card .card-middle .start-button.orange:hover {
  background-color: #e48000;
}
.learning-section .learning-card .card-middle .start-button.resume {
  background-color: #f4c542;
  color: #333;
}
.learning-section .learning-card .card-middle .start-button.resume:hover {
  background-color: #e0b636;
}
.learning-section .learning-card .card-middle .btn.download-cert {
  display: inline-block;
  background: #eefae4;
  color: #2c7b00;
  padding: 10px 12px;
  border-radius: var(--bs-border-radius, 12px);
  font-weight: bold;
  text-decoration: none;
  margin-top: auto;
  border: 1px solid #a5e214;
}
.learning-section .learning-card .card-right {
  flex: 0 0 30px;
  background: #e5e5e5;
  border-left: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12px;
  font-weight: bold;
  color: #333;
  letter-spacing: 0.6px;
  padding: 8px 4px;
}
.learning-section .learning-card .card-right.complete {
  background-color: #80c342 !important;
  color: white;
}
.learning-section .learning-card .card-right.incomplete {
  background-color: #e5e5e5;
  color: #333;
}

@media (max-width: 1024px) {
  .learning-section {
    padding: 2rem;
  }
  .learning-section .learning-card {
    flex-direction: column;
    height: auto;
    border-radius: var(--bs-border-radius, 10px);
    overflow: hidden;
  }
  .learning-section .learning-card .card-left {
    width: 100%;
    height: auto;
  }
  .learning-section .learning-card .card-left img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
  }
  .learning-section .learning-card .card-middle {
    padding: 1.25rem;
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: white;
  }
  .learning-section .learning-card .card-middle .card-title {
    font-size: 1.3rem;
    color: #ff6600;
    margin-bottom: 0.5rem;
  }
  .learning-section .learning-card .card-middle .card-description,
  .learning-section .learning-card .card-middle .card-attempts {
    font-size: 0.95rem;
    margin: 0.2rem 0;
  }
  .learning-section .learning-card .card-middle .card-requirement {
    font-size: 0.85rem;
    margin-bottom: 1rem;
    color: #777;
  }
  .learning-section .learning-card .card-middle .start-button {
    font-size: 1rem;
    padding: 10px 16px;
    border-radius: 25px;
  }
  .learning-section .learning-card .card-right {
    writing-mode: horizontal-tb;
    border-left: none;
    border-top: 1px solid #ccc;
    font-size: 0.85rem;
    padding: 0.75rem 1.25rem;
    justify-content: center;
    background: #f0f0f0;
  }
}
.learning-card.border-success {
  border: 2px solid #80c342;
}

/* ============ Each Question as a Card ============ */
.sortable-block {
  background: #f9fafc;
  border: 1px solid #e1e5ea;
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  transition: box-shadow 0.2s ease;
}
.sortable-block:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}
.sortable-block {
  /* Question text (the label) */
}
.sortable-block > .d-flex > label {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0rem;
}
.sortable-block {
  /* Answers list */
}
.sortable-block .form-check {
  margin-bottom: 0.5rem;
}
.sortable-block .form-check .form-check-input {
  margin-right: 0.5rem;
}

/* Submit / pagination buttons */
.form-button--next,
.form-button--prev {
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
  border-radius: 4px;
}

.form-button--next.btn-primary {
  background-color: #308478;
  border: none;
}
.form-button--next.btn-primary:hover {
  background-color: #246c61;
}

/* legacy incomplete modal styles intentionally retired in favor of #submitProgressModal */
/* =========================
   Media Library Page
   ========================= */
/* =========================
   Media Library Page
   ========================= */
.media-library {
  padding: 2rem;
  position: relative;
  padding-top: 3rem;
  min-height: 300px;
}
.media-library .library-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  color: #333;
}
.media-library .media-grid {
  display: grid;
  position: relative;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  min-height: 300px;
}
.media-library .media-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--bs-border-radius, 6px);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease-in-out;
}
.media-library .media-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.media-library .media-card .media-thumb {
  position: relative;
}
.media-library .media-card .media-thumb .media-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: #f7f7f7;
  display: block;
}
.media-library .media-card .media-thumb .video-icon-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  padding: 0.5rem;
}
.media-library .media-card .media-content {
  flex: 1;
  padding: 1rem;
}
.media-library .media-card .media-content .media-type {
  font-size: 0.8rem;
  font-weight: 600;
  color: #777;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}
.media-library .media-card .media-content .media-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 0.5rem;
}
.media-library .media-card .media-content .media-description {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 0.75rem;
}
.media-library .media-card .media-content .media-meta {
  font-size: 0.8rem;
  color: #888;
}
.media-library .media-card .media-content .media-meta .media-date {
  font-style: italic;
}
.media-library .media-card .media-actions {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: #fafafa;
  border-top: 1px solid #eee;
}
.media-library .media-card .media-actions a,
.media-library .media-card .media-actions button {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.media-library .media-card .media-actions .btn-download {
  background: #374955;
  color: #fff;
}
.media-library .media-card .media-actions .btn-download:hover {
  background: rgb(44.9821428571, 59.7035714286, 69.5178571429);
}
.media-library .media-card .media-actions .btn-edit {
  background: #308478;
  color: #fff;
}
.media-library .media-card .media-actions .btn-edit:hover {
  background: rgb(41.2, 113.3, 103);
}
.media-library .media-card .media-actions .btn-delete {
  background: #ff7e80;
  color: #fff;
}
.media-library .media-card .media-actions .btn-delete:hover {
  background: rgb(255, 100.5, 102.8953488372);
}

.media-grid:not(:has(.media-card:not(.template))) {
  display: none;
}

.contest-slider-wrapper:not(:has(.contest-card:not(.template))) {
  display: none;
}

.contest-widget {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
  overflow: hidden;
}
.contest-widget .contest-widget-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.contest-widget .contest-widget-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.contest-widget .contest-widget-info .contest-widget-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #374955;
  margin-bottom: 0.25rem;
}
.contest-widget .contest-widget-info .contest-widget-subtitle {
  font-size: 1rem;
  color: #666;
  margin-bottom: 0.5rem;
}
.contest-widget .contest-widget-info .btn {
  align-self: flex-start;
  background-color: #ff7e80;
  border: none;
  font-weight: 600;
}
.contest-widget .contest-widget-info .btn:hover {
  background-color: rgb(255, 95.4, 97.8744186047);
}
.contest-widget .contest-widget-cards {
  gap: 1.25rem;
  justify-content: flex-end;
}
.contest-widget .contest-widget-cards .contest-card {
  background: #f9f9f9;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 1 calc(50% - 0.75rem);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contest-widget .contest-widget-cards .contest-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.contest-widget .contest-widget-cards .contest-card .contest-card-image {
  background-size: cover;
  background-position: center;
  aspect-ratio: 16/9;
}
.contest-widget .contest-widget-cards .contest-card .contest-card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.contest-widget .contest-widget-cards .contest-card .contest-card-body .contest-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #374955;
  margin-bottom: 0.25rem;
}
.contest-widget .contest-widget-cards .contest-card .contest-card-body .contest-card-date {
  color: #777;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}
.contest-widget .contest-widget-cards .contest-card .contest-card-body .btn-outline-primary {
  color: #308478;
  border-color: #308478;
  font-weight: 600;
}
.contest-widget .contest-widget-cards .contest-card .contest-card-body .btn-outline-primary:hover {
  background-color: #308478;
  color: #fff;
}
@media (max-width: 992px) {
  .contest-widget .contest-widget-cards {
    justify-content: center;
  }
  .contest-widget .contest-widget-cards .contest-card {
    flex: 0 1 100%;
  }
}

.rebates-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}
.rebates-section .rebate-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  width: 40%;
  position: relative;
}
.rebates-section .rebate-card .rebate-hero-card {
  position: relative;
  display: flex;
  width: 100%;
  height: 260px;
  overflow: hidden;
}
.rebates-section .rebate-card .rebate-hero-card .hero-img-group {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
}
.rebates-section .rebate-card .rebate-hero-card .hero-img-thumb {
  width: 90px;
  height: 90px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
}
.rebates-section .rebate-card .rebate-hero-card .rebate-overlay-pill {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: #ff7e80;
  color: #fff;
  padding: 6px 20px;
  border-radius: 50px;
  font-weight: 700;
  z-index: 5;
  font-size: 0.95rem;
}
.rebates-section .rebate-card .rebate-content {
  padding: 1.5rem;
}
.rebates-section .rebate-card .rebate-content .rebate-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.rebates-section .rebate-card .rebate-content .rebate-summary {
  font-size: 0.95rem;
  color: #444;
  margin-bottom: 1rem;
}
.rebates-section .rebate-card .rebate-content .rebate-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rebates-section .rebate-card .rebate-content .rebate-meta .rebate-dates {
  font-size: 0.9rem;
}
.rebates-section .rebate-card .rebate-content .rebate-meta .rebate-dates .label {
  font-weight: 600;
  margin-right: 0.25rem;
}
.rebates-section .rebate-card .rebate-content .rebate-meta .rebate-cta {
  padding: 0.55rem 1.25rem;
  font-size: 0.9rem;
  background: #ff7e80;
  border: none;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}
.rebates-section .rebate-card .rebate-content .rebate-meta .rebate-cta:hover {
  opacity: 0.85;
}

@media (max-width: 768px) {
  .rebate-card {
    width: 100%;
  }
  .rebate-card .rebate-hero {
    flex-direction: column;
    height: auto;
  }
  .rebate-card .rebate-hero .hero-img-group {
    width: 100%;
  }
  .rebate-card .rebate-hero .hero-img-thumb {
    width: 75px;
    height: 75px;
  }
}
.rebate-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}
.rebate-hero .rebate-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}
.rebate-hero .rebate-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: #fff;
  gap: 30px;
}
.rebate-hero .rebate-hero-inner .rebate-header-top {
  text-align: left;
  width: 100%;
}
.rebate-hero .rebate-hero-inner .rebate-header-top .rebate-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.rebate-hero .rebate-hero-inner .rebate-header-top .rebate-dates {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 30px;
}
.rebate-hero .rebate-hero-inner .rebate-columns {
  display: flex;
  width: 100%;
  gap: 40px;
}
@media (max-width: 992px) {
  .rebate-hero .rebate-hero-inner .rebate-columns {
    flex-direction: column;
    gap: 30px;
  }
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left {
  width: 30%;
  justify-items: left;
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual {
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  .rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual {
    flex-direction: column;
    gap: 30px;
  }
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual .rebate-group {
  flex: 1;
  text-align: center;
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual .rebate-group .label {
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  font-size: 1.5rem;
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual .rebate-group .rebate-product-details {
  text-align: left;
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual .rebate-group .thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual .rebate-group .rebate-thumb {
  width: 250px;
  height: 250px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.062745098);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual .rebate-divider {
  font-size: 1.25rem;
  font-weight: 700;
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-right {
  flex: 1;
  background: #ffffff;
  color: #000;
  border-radius: 12px;
  padding: 25px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: auto;
  align-self: flex-start;
}

#rebateFormContainer {
  display: none;
}

.rebate-summary-line {
  margin-top: 8px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
}

.rebate-columns {
  display: flex;
  gap: 40px;
  width: 100%;
  margin-top: 35px;
}

.rebate-distributor-top {
  width: 100%;
  margin-top: 20px;
}

/* HORIZONTAL CARD STACK - MEDIUM OVERLAP + HOVER SLIDE */
.horizontal-stack {
  position: relative;
  height: 220px;
  width: auto;
  margin-top: 20px;
}
.horizontal-stack .thumb-wrapper {
  position: absolute;
  top: 0;
  transition: transform 0.35s ease, z-index 0.35s ease;
  cursor: pointer;
}
.horizontal-stack .rebate-thumb {
  width: 200px !important;
  height: 200px !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #111 !important;
  border: none !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s ease;
}
.horizontal-stack {
  /* Positioning based on index */
}
.horizontal-stack .thumb-wrapper[data-i="0"] {
  left: 0px;
  z-index: 4;
}
.horizontal-stack .thumb-wrapper[data-i="1"] {
  left: 50px;
  z-index: 3;
}
.horizontal-stack .thumb-wrapper[data-i="2"] {
  left: 100px;
  z-index: 2;
}
.horizontal-stack .thumb-wrapper[data-i="3"] {
  left: 150px;
  z-index: 1;
}
.horizontal-stack .thumb-wrapper[data-i="4"] {
  left: 200px;
  z-index: 0;
}
.horizontal-stack .thumb-wrapper:hover {
  transform: translate(-25px, -10px) scale(1.05);
  z-index: 99;
}

.rebate-divider {
  position: relative;
  z-index: 0;
  margin: 30px 0;
}

@media (max-width: 768px) {
  .horizontal-stack {
    height: auto;
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .horizontal-stack .thumb-wrapper {
    position: relative !important;
    left: 0 !important;
    transform: none !important;
    z-index: auto !important;
  }
  .horizontal-stack .rebate-thumb {
    width: 150px;
    height: 150px;
  }
}
.rebate-inline-and {
  text-align: left;
  font-weight: 700;
  margin: 4px 0 8px 0;
  color: #fff;
  opacity: 0.85;
}

.navbar-brand img {
  width: auto;
}

/* ========================================
   ADMIN NAVBAR 
======================================== */
.admin-navbar {
  height: 64px;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.admin-navbar .container-fluid {
  height: 100%;
  display: flex;
  align-items: center;
}

/* -------------------------------
   Logo Scaling
-------------------------------- */
.admin-navbar-logo-img {
  height: 48px;
  width: auto;
}

/* -------------------------------
   Right-side controls
-------------------------------- */
.admin-navbar-controls {
  display: flex;
  align-items: center;
}
.admin-navbar-controls > * {
  margin-left: 0.75rem;
}
.admin-navbar-controls .btn {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* -------------------------------
   Notification Bell + Dropdown
-------------------------------- */
.admin-navbar .notification-bell {
  top: 4.5rem !important;
}

/* -------------------------------
   Profile Icon
-------------------------------- */
#profileDropdown i {
  font-size: 24px;
}

.coming-soon-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}
.coming-soon-overlay span {
  font-size: 2rem;
  font-weight: 600;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.tab-pane {
  position: relative; /* ensures overlay is contained */
}

.coming-soon-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  pointer-events: all; /* overlay catches interaction */
}
.coming-soon-overlay span {
  font-size: 2rem;
  font-weight: 700;
  color: #333;
}

/* ==========================================================
   THEME VARIABLES (LIGHT + DARK MODE)
   ========================================================== */
:root {
  --bg: var(--bs-body-bg, #f5f7fa);
  --card-bg: #ffffff;
  --card-border: #dce3ea;
  --text: var(--bs-body-color, #374955);
  --text-soft: #7a8790;
  --shadow: 0 8px 18px rgba(0,0,0,0.06);
  --accent-pink: #ff7e80;
  --accent-teal: #308478;
  --hero-bg-1: #ffffff;
  --hero-bg-2: #edf1f7;
}

/* LIGHT MODE */
body.theme-light {
  --bg: var(--bs-body-bg, #f5f7fa);
  --card-bg: #ffffff;
  --card-border: #dce3ea;
  --text: var(--bs-body-color, #374955);
  --text-soft: #7a8790;
  --shadow: 0 8px 18px rgba(0,0,0,0.06);
  --accent-pink: #ff7e80;
  --accent-teal: #308478;
  --hero-bg-1: #ffffff;
  --hero-bg-2: #edf1f7;
}

/* DARK MODE */
body.theme-dark {
  --bg: #1e2429;
  --card-bg: rgba(255,255,255,0.06);
  --card-border: rgba(255,255,255,0.10);
  --text: #e5e9ee;
  --text-soft: #a3b0bb;
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
  --accent-pink: #ff7e80;
  --accent-teal: #80f9c0;
  --hero-bg-1: #181c20;
  --hero-bg-2: #111416;
}

/* Smooth theme switching */
body {
  background: var(--bg);
  color: var(--text);
  transition: background 0.3s ease, color 0.3s ease;
  font-family: system-ui, sans-serif;
}

:root {
  --rebate-primary: #2f855a;
}

.rebate-upload-shell {
  margin-top: 2rem;
}

.rebate-step-heading {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* Main white card */
.rebate-upload-card-simple {
  background: #ffffff;
  border-radius: 20px;
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.rebate-upload-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr);
  gap: 1.75rem;
}
@media (max-width: 768px) {
  .rebate-upload-layout {
    grid-template-columns: 1fr;
  }
}

.rebate-upload-input {
  display: none;
}

/* Dashed box */
.rebate-dropzone-wrapper {
  width: 100%;
}

.rebate-dropzone-simple {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border-radius: 16px;
  border: 2px dashed #9ca3af;
  background: #f9fafb;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  height: -webkit-fill-available;
  transition: all 0.16s ease-out;
}
.rebate-dropzone-simple:hover, .rebate-dropzone-simple:focus-within {
  border-color: var(--rebate-primary);
  background: #effdf6;
  box-shadow: 0 6px 16px rgba(47, 133, 90, 0.2);
}

.rebate-dropzone-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(47, 133, 90, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rebate-dropzone-icon i {
  font-size: 1.4rem;
  color: var(--rebate-primary);
}

.rebate-dropzone-text {
  display: flex;
  flex-direction: column;
}

.rebate-dropzone-main {
  font-size: 0.98rem;
  font-weight: 600;
  color: #111827;
}

.rebate-dropzone-meta {
  font-size: 0.8rem;
  color: #6b7280;
}

.rebate-upload-aside {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.rebate-receipt-thumb {
  align-self: start;
}

.rebate-receipt-thumb-inner {
  width: 110px;
  height: 150px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 10px 8px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.rebate-receipt-line {
  height: 6px;
  border-radius: 4px;
  background: #d1d5db;
  margin-bottom: 5px;
}
.rebate-receipt-line.short {
  width: 70%;
}

.rebate-upload-tips {
  font-size: 0.84rem;
  color: #4b5563;
}
.rebate-upload-tips .rebate-upload-tip-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.rebate-upload-tips ul {
  padding-left: 1.1rem;
  margin: 0;
}
.rebate-upload-tips li + li {
  margin-top: 0.12rem;
}

.rebate-upload-actions {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.rebate-primary-btn {
  border: none;
  background: var(--rebate-primary);
  color: #ffffff;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.7rem 1.8rem;
  font-size: 0.95rem;
  min-width: 190px;
  transition: background 0.15s ease-out, box-shadow 0.15s ease-out, transform 0.05s ease-out;
}
.rebate-primary-btn:hover {
  background: #276749;
  box-shadow: 0 8px 18px rgba(39, 103, 73, 0.35);
  transform: translateY(-1px);
}
.rebate-primary-btn:active {
  background: #22543d;
  box-shadow: none;
  transform: translateY(0);
}

.rebate-upload-status {
  font-size: 0.83rem;
  min-height: 1.1em;
}
.rebate-eligible-preview {
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem 1.1rem;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
}
.rebate-eligible-preview .rebate-eligible-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.rebate-eligible-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.rebate-eligible-section-title {
  font-weight: 700;
  margin: 0 0 10px 0;
}

#rebateUploadCard .rebate-upload-status#rebateUploadStatus {
  display: none;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 600;
  line-height: 1.35;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #f7f9fc;
  color: #223;
}
#rebateUploadCard .rebate-upload-status#rebateUploadStatus.is-info {
  background: #eef6ff;
  border-color: rgba(20, 90, 160, 0.25);
  color: #0b2b4a;
}
#rebateUploadCard .rebate-upload-status#rebateUploadStatus.is-success {
  background: #eefaf3;
  border-color: rgba(35, 140, 90, 0.25);
  color: #0f3b27;
}
#rebateUploadCard .rebate-upload-status#rebateUploadStatus.is-error {
  background: #fff0f1;
  border-color: rgba(190, 30, 45, 0.25);
  color: #5b1217;
}

.rebate-eligible-card {
  flex: 1 1 100%;
  border-radius: 14px;
  width: 95%;
  padding: 0.75rem 0.85rem;
  background: #f9fafb;
  border: 1px solid rgba(148, 163, 184, 0.8);
  cursor: pointer;
  transition: all 0.16s ease-out;
}
.rebate-eligible-card:hover {
  border-color: var(--rebate-primary);
  background: #effdf6;
  box-shadow: 0 4px 10px rgba(47, 133, 90, 0.18);
}
.rebate-eligible-card.selected {
  border-color: var(--rebate-primary);
  background: #e6fbf1;
  box-shadow: 0 0 0 1px rgba(47, 133, 90, 0.6), 0 6px 14px rgba(47, 133, 90, 0.25);
}
.rebate-eligible-card.rebate-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.rebate-eligible-card.rebate-disabled:hover {
  transform: none;
  box-shadow: none;
}

.rebate-eligible-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.rebate-eligible-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #374151;
  background: #dcfce7;
}

.rebate-card-selected-tag {
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.12);
  color: rgb(22, 101, 52);
  font-weight: 700;
  font-size: 0.85rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

.rebate-eligible-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #111827;
}

.rebate-eligible-summary {
  font-size: 0.8rem;
  color: #6b7280;
}

.rebate-step-actions .btn {
  min-width: 130px;
}

.rebate-purchases-shell {
  max-width: 1000px;
  margin: 0 auto;
}

.rebate-step-subtitle {
  font-size: 0.95rem;
  color: #6b7280;
  margin-bottom: 1.25rem;
}

.rebate-summary-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 18px 40px rgba(15, 35, 52, 0.08);
  margin-bottom: 1.5rem;
}

.rebate-summary-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 900px) {
  .rebate-summary-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rebate-summary-item {
  min-width: 0;
}

.summary-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 0.25rem;
}

.summary-input {
  width: 100%;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 0.55rem 0.9rem;
  font-size: 0.875rem;
  line-height: 1.2;
  color: #0f172a;
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.summary-input:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.16);
}

.rebate-items-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 1.4rem 1.4rem 1.2rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
}

.rebate-items-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.9rem;
}
.rebate-items-header .items-header-title {
  font-size: 1rem;
  font-weight: 600;
}

.rebate-add-item-btn {
  border: none;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  background: #e0f2fe;
  color: #1d4ed8;
  cursor: pointer;
  transition: background 0.15s ease-out, transform 0.05s ease-out;
}
.rebate-add-item-btn:hover {
  background: #bfdbfe;
  transform: translateY(-1px);
}

.rebate-items-table {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.rebate-items-table-head,
.rebate-items-row {
  display: grid;
  grid-template-columns: 3.5fr 0.9fr 1.3fr 1.3fr 40px;
  column-gap: 0.5rem;
  align-items: center;
}

.rebate-items-table-head {
  background: #f9fafb;
  padding: 0.45rem 0.75rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}

.rebate-items-table-body {
  max-height: 320px;
  overflow-y: auto;
}

.rebate-items-row {
  padding: 0.4rem 0.75rem;
  border-top: 1px solid #e5e7eb;
}
.rebate-items-row:nth-child(odd) {
  background: #ffffff;
}
.rebate-items-row:nth-child(even) {
  background: #f9fafb;
}

/* Inputs */
.rebate-item-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  padding: 0.3rem 0.5rem;
  font-size: 0.88rem;
}
.rebate-item-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2);
}

.rebate-item-remove {
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
}
.rebate-item-remove:hover {
  color: #ef4444;
}

.rebate-items-empty {
  padding: 0.7rem 0.9rem 0.8rem;
  font-size: 0.85rem;
  color: #6b7280;
  display: none;
}

.rebate-items-note {
  margin-top: 0.8rem;
  font-size: 0.82rem;
  color: #6b7280;
}

.rebate-wizard .rebate-steps-bar {
  display: flex;
  align-items: stretch;
  background: #0b3a2f;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  overflow: hidden;
}
.rebate-wizard .rebate-step-tab {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.rebate-wizard .rebate-step-tab:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}
.rebate-wizard .rebate-step-tab.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.rebate-wizard .rebate-step-tab.is-complete {
  color: #ffffff;
}
.rebate-wizard .rebate-step-tab:disabled {
  opacity: 0.4;
  cursor: default;
}
.rebate-wizard .rebate-step-tab .step-status {
  display: flex;
  align-items: center;
}
.rebate-wizard .rebate-step-tab .step-circle {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.25rem;
}
.rebate-wizard .rebate-step-tab.is-active .step-circle, .rebate-wizard .rebate-step-tab.is-complete .step-circle {
  border-color: #7fd9a3;
  background: #7fd9a3;
}
.rebate-wizard .rebate-step-tab .step-index,
.rebate-wizard .rebate-step-tab .step-check {
  font-size: 0.75rem;
  line-height: 1;
  color: #ffffff;
}
.rebate-wizard .rebate-step-tab .step-check {
  display: none;
}
.rebate-wizard .rebate-step-tab.is-complete .step-check {
  display: inline;
}
.rebate-wizard .rebate-step-tab.is-complete .step-index {
  display: none;
}
.rebate-wizard .rebate-step-tab .step-label {
  white-space: nowrap;
}

.rebate-step1-nudge {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(25, 135, 84, 0.25);
  background: rgba(25, 135, 84, 0.08);
  display: flex;
  align-items: center;
  gap: 12px;
}
.rebate-step1-nudge__icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(25, 135, 84, 0.14);
  flex: 0 0 auto;
}
.rebate-step1-nudge__icon i {
  font-size: 18px;
}
.rebate-step1-nudge__content {
  flex: 1 1 auto;
  min-width: 0;
}
.rebate-step1-nudge__title {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2px;
}
.rebate-step1-nudge__text {
  font-size: 0.95rem;
  opacity: 0.9;
  line-height: 1.25;
}
.rebate-step1-nudge__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  opacity: 0.9;
  flex: 0 0 auto;
  display: none;
}

#rebateStep1NextBtn.is-attention {
  position: relative;
  animation: rebatePulse 1.4s ease-in-out infinite;
}
#rebateStep1NextBtn.is-attention:focus, #rebateStep1NextBtn.is-attention:hover {
  animation: none;
}

@keyframes rebatePulse {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1px);
  }
  100% {
    transform: translateY(0);
  }
}
.rebate-receipts-list-wrap {
  margin-top: 14px;
  padding-top: 8px;
}

.rebate-receipts-list-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.rebate-receipts-list-title {
  font-weight: 700;
}

.rebate-receipts-list-subtitle {
  font-size: 0.92rem;
  opacity: 0.8;
}

.rebate-receipts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rebate-receipt-row {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.rebate-receipt-row:hover {
  border-color: rgba(0, 0, 0, 0.22);
}
.rebate-receipt-row.is-active {
  border-color: rgba(13, 110, 253, 0.45);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
}
.rebate-receipt-row__left {
  flex: 1 1 auto;
  min-width: 0;
}
.rebate-receipt-row__title {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rebate-receipt-row__meta {
  font-size: 0.92rem;
  opacity: 0.8;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rebate-receipt-row__right {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.rebate-receipt-row__btn {
  border: none;
  background: transparent;
  font-weight: 700;
  padding: 6px 8px;
  border-radius: 8px;
}
.rebate-receipt-row__btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.rebate-pill {
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.04);
}
.rebate-pill.is-success {
  border-color: rgba(25, 135, 84, 0.25);
  background: rgba(25, 135, 84, 0.1);
}
.rebate-pill.is-error {
  border-color: rgba(220, 53, 69, 0.25);
  background: rgba(220, 53, 69, 0.1);
}
.rebate-pill.is-info {
  border-color: rgba(13, 202, 240, 0.25);
  background: rgba(13, 202, 240, 0.12);
}

.rb-why-eligible {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.rb-why-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
}

.rb-why-items {
  margin: 0;
  padding-left: 18px;
}

.rb-why-items li {
  margin: 4px 0;
  font-size: 13px;
}

.rb-meta {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  color: #64748b;
}

/* ============================= */
/* Rebate Card Layout            */
/* ============================= */
.rebate-card-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

.rebate-card-image {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #f4f6f8;
}
.rebate-card-image .rebate-image {
  max-width: 300px;
}

.rebate-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ============================= */
/* Right-side content            */
/* ============================= */
.rebate-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rebate-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.rebate-card-title {
  font-weight: 700;
  font-size: 1.1rem;
}

.rebate-card-summary {
  font-size: 0.9rem;
  color: #5f6b7a;
}

.rebate-card-reward {
  font-weight: 600;
}

/* ============================= */
/* Qualifying items              */
/* ============================= */
.rebate-card-qualifies {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.rebate-card-qualifies-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.rebate-card-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rebate-card-item {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.rebate-card-item-icon {
  font-size: 1rem;
  line-height: 1.2;
}

.rebate-card-item-name {
  font-size: 0.9rem;
}

.rebate-card-item-code {
  font-size: 0.8rem;
  color: #6b7280;
}

.rb-rebate-card .rebate-card-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rb-rebate-card .rebate-card-top .rb-rebate-card-select {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}

.rb-rebate-card .rebate-card-top .rb-rebate-card-select {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  border-bottom: 2px dashed green;
  padding-bottom: 1rem;
}

.rb-rebate-card-select {
  position: relative;
}

.rebate-eligible-card.selected .rb-rebate-card-select::after {
  content: "✓\aRebate selected";
  white-space: pre;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.9rem 1.1rem;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.95);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.45);
  pointer-events: none;
  z-index: 5;
}

.rb-rebate-card .rebate-card-bottom {
  width: 100%;
}

@media (max-width: 768px) {
  .rb-rebate-card .rebate-card-top .rb-rebate-card-select {
    grid-template-columns: 1fr;
  }
}
.rb-receipt-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: #fff;
  margin: 10px 0 8px;
}

.rb-receipt-summary-file {
  font-weight: 700;
}

.rb-receipt-summary-meta {
  display: flex;
  gap: 10px;
  color: #64748b;
  font-size: 12px;
  margin-top: 2px;
}

.rb-receipt-summary-total {
  font-weight: 700;
}

.rb-promo-receipt-group {
  padding-bottom: 10px;
}

.rb-receipt-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  margin: 12px 0 6px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-left: 4px solid #22c55e;
  border-radius: 8px;
}

.rb-receipt-summary-file {
  font-weight: 700;
  font-size: 14px;
}

.rb-receipt-summary-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #64748b;
}

.rb-receipt-summary-total {
  font-weight: 700;
  font-size: 14px;
}

.rb-promo-receipt-group .rebate-items-row {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 2px dashed rgba(15, 23, 42, 0.08);
}

.rb-promo-context-label {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 6px;
}

.rb-promo-receipts-summary {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.rb-promo-receipts-summary__title {
  font-weight: 600;
  font-size: 13px;
  color: #0f172a;
  margin-bottom: 0.5rem;
}

.rb-promo-receipts-summary__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rb-promo-receipt-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-left: 4px solid rgba(34, 197, 94, 0.9);
  border-radius: 10px;
}

.rb-promo-receipt-chip__label {
  font-weight: 700;
  font-size: 13px;
  color: #0f172a;
  line-height: 1.1;
}

.rb-promo-receipt-chip__meta {
  font-size: 12px;
  color: #64748b;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.rb-dot {
  opacity: 0.65;
}

.rb-promo-receipt-chip__total {
  font-weight: 700;
  font-size: 13px;
  color: #0f172a;
  white-space: nowrap;
}

.rb-typeahead-menu {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  max-height: 240px;
  overflow: auto;
  padding: 6px;
}

.rb-typeahead-item {
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
}

.rb-typeahead-item:hover {
  background: rgba(15, 23, 42, 0.06);
}

.rb-typeahead-name {
  font-weight: 700;
}

.rb-typeahead-meta {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 2px;
}

.rb-typeahead-empty {
  padding: 10px;
  opacity: 0.7;
}

.rb-typeahead-menu {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  max-height: 280px;
  overflow: auto;
  padding: 6px;
}

.rb-typeahead-item {
  padding: 10px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.rb-typeahead-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

.rb-typeahead-name {
  font-weight: 600;
  line-height: 1.2;
}

.rb-typeahead-meta {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 2px;
}

.rb-typeahead-empty {
  padding: 10px;
  font-size: 13px;
  opacity: 0.7;
}

#rbStep2TotalsSummary {
  display: none;
}

#rbStep2ReceiptsHome {
  display: none;
}

.navbar-receipt {
  height: 54px;
  width: 100%;
  background: linear-gradient(180deg, #0f5e5f 0%, #0b4f50 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.navbar-receipt__inner {
  height: 100%;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar-receipt__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.navbar-receipt__logo {
  height: 28px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
}
.navbar-receipt__nav {
  display: flex;
  align-items: center;
  gap: 22px;
}
.navbar-receipt__link {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  padding: 8px 6px;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}
.navbar-receipt__link:hover, .navbar-receipt__link:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}
@media (max-width: 520px) {
  .navbar-receipt__inner {
    padding: 0 12px;
  }
  .navbar-receipt__nav {
    gap: 14px;
  }
  .navbar-receipt__link {
    font-size: 13px;
  }
}

.hero-receipt {
  position: relative;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero-receipt__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.38) 70%);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}
.hero-receipt__content {
  position: relative;
  z-index: 2;
  flex: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: 80px 20px 40px;
  text-align: center;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-receipt__title {
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
  font-size: clamp(36px, 4.5vw, 58px);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.hero-receipt__subtitle {
  max-width: 640px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 28px;
  font-size: clamp(16px, 1.6vw, 20px);
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.hero-receipt__actions {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero-receipt__cta {
  width: 100%;
  max-width: 320px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #57b861;
  color: #ffffff;
  padding: 18px 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
  transition: background 0.15s ease, transform 0.08s ease;
}
.hero-receipt__cta:hover, .hero-receipt__cta:focus-visible {
  background: #4aa954;
  outline: none;
}
.hero-receipt__cta:active {
  transform: translateY(1px);
}
.hero-receipt__cta-icon {
  margin-left: 10px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 6px;
}
.hero-receipt__cta-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}
.hero-receipt__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.78);
  color: rgba(0, 0, 0, 0.75);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  max-width: 260px;
  transition: background 0.15s ease;
}
.hero-receipt__secondary:hover, .hero-receipt__secondary:focus-visible {
  background: rgba(255, 255, 255, 0.88);
  outline: none;
}
.hero-receipt .hero-receipt__partners {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.hero-receipt .hero-receipt__partners-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}
.hero-receipt .hero-receipt__partners-inner img {
  height: 75px;
  max-height: 75px;
  width: auto;
  display: block;
  opacity: 1;
  filter: none;
}
.hero-receipt .hero-receipt__terms {
  margin-left: 16px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.65);
}
.hero-receipt .hero-receipt__terms:hover {
  text-decoration: underline;
}
@media (max-width: 900px) {
  .hero-receipt .hero-receipt__partners-inner {
    gap: 28px;
  }
  .hero-receipt .hero-receipt__partners-inner img {
    height: 36px;
    max-height: 36px;
  }
}
@media (max-width: 560px) {
  .hero-receipt .hero-receipt__partners-inner {
    padding: 16px 16px;
    gap: 20px;
  }
  .hero-receipt .hero-receipt__partners-inner img {
    height: 26px;
    max-height: 26px;
  }
}

.rb-view-hidden {
  display: none !important;
}

@media (max-width: 680px) {
  .rebate-wizard .rebate-steps-bar {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 999px;
    padding: 0.4rem 0.6rem;
    scrollbar-width: none;
  }
  .rebate-wizard .rebate-steps-bar::-webkit-scrollbar {
    display: none;
  }
  .rebate-wizard .rebate-step-tab {
    flex: 0 0 auto;
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
  }
  .rebate-wizard .rebate-step-tab .step-label {
    white-space: nowrap;
    font-size: 0.82rem;
  }
  .rebate-wizard .rebate-step-tab .step-circle {
    width: 22px;
    height: 22px;
    margin-right: 0.2rem;
  }
  .rebate-wizard .rebate-step-tab:not(:last-child)::after {
    top: 30%;
    bottom: 30%;
  }
}

.rebate-thank-you {
  background: #f6fafc;
}
.rebate-thank-you-card {
  max-width: 720px;
  background: #ffffff;
  border-radius: 16px;
  padding: 3rem 2.5rem;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}
.rebate-thank-you-icon {
  font-size: 3rem;
  color: #2f8f6b;
  margin-bottom: 1rem;
}
.rebate-thank-you-title {
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.rebate-thank-you-lead {
  font-size: 1.05rem;
  color: #555;
  margin-bottom: 2rem;
}
.rebate-thank-you-processing-note {
  color: #666;
  margin-bottom: 2.5rem;
}
.rebate-thank-you-actions .btn {
  min-width: 180px;
}
.rebate-thank-you .rebate-confirmation-box {
  border: 1px dashed #cfe6dd;
  background: #f2fbf7;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.rebate-thank-you .rebate-confirmation-box .confirmation-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4b7f6c;
  margin-bottom: 0.5rem;
}
.rebate-thank-you .rebate-confirmation-box .confirmation-code {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #1f5f4a;
}
.rebate-thank-you .rebate-confirmation-box .confirmation-note {
  font-size: 0.85rem;
  color: #6b8f82;
  margin-top: 0.25rem;
}

/* =====================================================
   REBATE UPLOAD ENHANCEMENTS - FIXED
   Bold spinner overlay + improved status messages
   ===================================================== */
/* -----------------------------------------------------
   1. FULL-CARD LOADING OVERLAY
   ----------------------------------------------------- */
.rebate-upload-card-simple {
  position: relative;
}

.rebate-upload-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: inherit;
  padding: 40px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.rebate-overlay-spinner {
  width: 80px;
  height: 80px;
  border: 6px solid #e9ecef;
  border-top-color: #0d6efd;
  border-radius: 50%;
  animation: rebate-spin 0.9s linear infinite;
}

@keyframes rebate-spin {
  to {
    transform: rotate(360deg);
  }
}
.rebate-overlay-title {
  font-size: 24px;
  font-weight: 700;
  color: #212529;
  margin: 0;
  line-height: 1.3;
}

.rebate-overlay-subtitle {
  font-size: 16px;
  font-weight: 500;
  color: #6c757d;
  margin: 0;
  max-width: 360px;
}

.rebate-overlay-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: #f8f9fa;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #495057;
}

.rebate-overlay-progress-dot {
  width: 10px;
  height: 10px;
  background: #0d6efd;
  border-radius: 50%;
  animation: rebate-pulse 1.2s ease-in-out infinite;
}

@keyframes rebate-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}
/* -----------------------------------------------------
   2. ENHANCED STATUS MESSAGES
   ----------------------------------------------------- */
.rebate-upload-status {
  margin-top: 16px;
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  transition: all 0.25s ease;
}
.rebate-upload-status:empty, .rebate-upload-status[hidden] {
  display: none !important;
}
.rebate-upload-status:not(:empty) {
  display: block;
}
.rebate-upload-status.is-info {
  background: linear-gradient(135deg, #e7f1ff 0%, #d0e3ff 100%);
  border: 2px solid #0d6efd;
  color: #084298;
}
.rebate-upload-status.is-info::before {
  content: "ℹ️ ";
}
.rebate-upload-status.is-info.is-processing {
  animation: rebate-status-pulse 2s ease-in-out infinite;
}
.rebate-upload-status.is-success {
  background: linear-gradient(135deg, #d1e7dd 0%, #badbcc 100%);
  border: 2px solid #198754;
  color: #0f5132;
}
.rebate-upload-status.is-success::before {
  content: "✅ ";
}
.rebate-upload-status.is-error {
  background: linear-gradient(135deg, #f8d7da 0%, #f5c2c7 100%);
  border: 2px solid #dc3545;
  color: #842029;
}
.rebate-upload-status.is-error::before {
  content: "⚠️ ";
}

@keyframes rebate-status-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(13, 110, 253, 0);
  }
}
/* -----------------------------------------------------
   3. STEP 1 NUDGE ENHANCEMENTS
   ----------------------------------------------------- */
#rebateStep1Nudge {
  padding: 20px 24px;
  border-radius: 14px;
  margin-top: 20px;
  border-width: 2px;
  border-style: solid;
}

#rebateStep1Nudge.is-info {
  background: linear-gradient(135deg, #e7f1ff 0%, #cfe2ff 100%);
  border-color: #0d6efd;
}

#rebateStep1Nudge.is-success {
  background: linear-gradient(135deg, #d1e7dd 0%, #a3cfbb 100%);
  border-color: #198754;
}

#rebateStep1Nudge.is-error {
  background: linear-gradient(135deg, #f8d7da 0%, #f1aeb5 100%);
  border-color: #dc3545;
}

#rebateStep1NudgeTitle {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

#rebateStep1NudgeText {
  font-size: 15px;
  font-weight: 500;
  opacity: 0.9;
}

/* -----------------------------------------------------
   4. RECEIPT ROW STATUS PILLS (enhanced)
   ----------------------------------------------------- */
.rebate-pill {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rebate-pill.is-info {
  background: #0d6efd;
  color: #fff;
  animation: rebate-pill-pulse 1.5s ease-in-out infinite;
}
.rebate-pill.is-success {
  background: #198754;
  color: #fff;
}
.rebate-pill.is-error {
  background: #dc3545;
  color: #fff;
}

@keyframes rebate-pill-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
.rebate-upload-card-simple.is-uploading .rebate-upload-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.rebate-upload-card-simple {
  /* -----------------------------------------------------
     5. DISABLED CARD STATE (email gate)
     ----------------------------------------------------- */
}
.rebate-upload-card-simple[aria-disabled=true] .rebate-dropzone-simple {
  pointer-events: none;
  cursor: not-allowed;
}
.rebate-upload-card-simple[aria-disabled=true] #rebateGateView {
  pointer-events: auto;
  opacity: 1;
}
.rebate-upload-card-simple[aria-disabled=true] #rebateGateView input,
.rebate-upload-card-simple[aria-disabled=true] #rebateGateView button {
  pointer-events: auto;
}

/* =====================================================
   STEP 1 VALIDATION STYLES
   Add these to your existing CSS
   ===================================================== */
/* -----------------------------------------------------
   Missing field indicators
   ----------------------------------------------------- */
/* Field wrapper when missing */
.rb-meta-field.is-missing input {
  border-color: #dc3545 !important;
  background-color: #fff8f8;
}

.rb-meta-field.is-missing input:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
  background-color: #fff;
}

/* "Required" badge next to input */
.rb-field-required {
  display: inline-block;
  color: #dc3545;
  font-size: 10px;
  font-weight: 700;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  background: rgba(220, 53, 69, 0.1);
  border-radius: 4px;
  vertical-align: middle;
}

/* Warning indicator on row title */
.rb-row-warning {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #dc3545;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(220, 53, 69, 0.1);
  border-radius: 6px;
}

/* Receipt row with missing fields */
.rebate-receipt-row.has-missing-fields {
  border-color: rgba(220, 53, 69, 0.3);
  background: linear-gradient(135deg, #fff 0%, #fff8f8 100%);
}

.rebate-receipt-row.has-missing-fields:hover {
  border-color: rgba(220, 53, 69, 0.5);
}

/* -----------------------------------------------------
   Better meta field layout
   ----------------------------------------------------- */
.rb-meta-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.rb-meta-field strong {
  white-space: nowrap;
}

/* -----------------------------------------------------
   Pulse animation on Continue button when ready
   ----------------------------------------------------- */
#rebateStep1NextBtn:not(:disabled) {
  animation: step1-ready-pulse 2s ease-in-out infinite;
}

#rebateStep1NextBtn:not(:disabled):hover {
  animation: none;
}

@keyframes step1-ready-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(13, 110, 253, 0);
  }
}
/* -----------------------------------------------------
   Enhanced disabled button state
   ----------------------------------------------------- */
#rebateStep1NextBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #6c757d;
  border-color: #6c757d;
}

/* -----------------------------------------------------
   Error nudge enhancement
   ----------------------------------------------------- */
#rebateStep1Nudge.is-error {
  animation: nudge-shake 0.5s ease-in-out;
}

@keyframes nudge-shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-4px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(4px);
  }
}



/* activities.css */
.activity-take {
  background: url("/public/img/abstractBG.webp") center/cover no-repeat fixed;
  padding-top: 6rem;
}

/* Activity shell */
.activity-shell {
  position: relative;
  max-width: 1100px;
  margin: 1.5rem auto 2.5rem;
  padding: 0 1rem;
}

/* Override legacy .activity-take flex centering styles when using the newer shell layout. */
.activity-take.activity-shell {
  max-width: none;
  margin: 0 auto;
  padding: 1.25rem clamp(1rem, 3vw, 2.5rem) 2rem;
  min-height: calc(100vh - 74px - 3rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: url("/public/img/abstractBG.webp") center/cover no-repeat fixed;
}
.activity-take.activity-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  z-index: 0;
  pointer-events: none;
}
.activity-take.activity-shell > .activity-shell__hero,
.activity-take.activity-shell > .quiz-card-wrapper {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
}

.activity-shell__hero {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  border: 1px solid #d7dee8;
  background: linear-gradient(140deg, #f8fbff 0%, #eef4ff 60%, #f6f9ff 100%);
}

.activity-shell__hero-left {
  flex: 1 1 auto;
  min-width: 0;
}

.activity-shell__eyebrow {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #e7edf9;
  color: #334b78;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
}

.activity-shell__hero-right {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.activity-shell__action {
  border-radius: 10px;
  font-weight: 600;
}

.activity-take.activity-shell .quiz-card-wrapper {
  max-width: none;
  margin: 0 auto;
  border-radius: 16px;
  border: 1px solid #dce4ef;
  background: #f7f9fc;
  box-shadow: 0 10px 28px rgba(18, 41, 74, 0.12);
  padding: 1rem;
}

/* Main quiz container */
.activity-take.activity-shell .quiz-card {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 1.5rem;
  background: #fff;
  border-radius: 12px;
}

/* Title */
.activity-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: #1e3357;
}

@media (max-width: 768px) {
  .activity-shell__hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .activity-shell__hero-right {
    width: 100%;
    justify-content: flex-start;
  }
}/*# sourceMappingURL=activities.css.map */
/* lms.css */
.lms-wrapper {
  min-height: 100vh;
  background: #f8f9fa;
}

.lms-sidebar {
  width: 240px;
  background: #343a40;
  color: #fff;
  min-height: 100vh;
}
.lms-sidebar h2 {
  font-size: 1.5rem;
  color: #fff;
}
.lms-sidebar .nav-link {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  padding: 0.5rem 0;
}
.lms-sidebar .nav-link:hover, .lms-sidebar .nav-link.active {
  color: #fff;
  font-weight: 600;
}

.lms-content {
  background: #fff;
}
.lms-content h1,
.lms-content h4 {
  color: #343a40;
}
.lms-content .course-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lms-content .course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
}
.lms-content .course-card img {
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
}
.lms-content .course-card .btn {
  font-weight: 600;
}

.fab-return {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #007bff;
  color: #fff;
  border-radius: 50px;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 9999;
  text-decoration: none;
}
.fab-return:hover {
  background: rgb(0, 98.4, 204);
  transform: scale(1.05);
  color: #fff;
}/*# sourceMappingURL=lms.css.map */
/* reports.css */
#rptPage .rpt-kpi {
  border: 1px solid var(--bs-border-color, #e2e8f0);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  background: var(--bs-body-bg, #fff);
}
#rptPage .rpt-kpi .rpt-kpi-value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}
#rptPage .rpt-kpi .rpt-kpi-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-secondary-color, #64748b);
  font-weight: 600;
}
#rptPage .rpt-chart-card {
  border: 1px solid var(--bs-border-color, #e2e8f0);
  border-radius: 12px;
  padding: 1.25rem;
  background: var(--bs-body-bg, #fff);
}
#rptPage table.rpt-table th {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
#rptPage table.rpt-table th .rpt-sort-ind {
  opacity: 0.4;
  font-size: 0.65rem;
}
#rptPage table.rpt-table td {
  font-size: 0.85rem;
  vertical-align: middle;
}
#rptPage .rpt-clickable-row {
  cursor: pointer;
}
#rptPage .rpt-clickable-row:hover {
  background: var(--bs-tertiary-bg, #f8fafc);
}
#rptPage .rpt-heat-cell {
  width: 100%;
  aspect-ratio: 2.2/1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  color: #475569;
}

#rptDetailModal .rpt-q-bar {
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
  overflow: hidden;
}
#rptDetailModal .rpt-q-bar > div {
  height: 100%;
  border-radius: 4px;
}/*# sourceMappingURL=reports.css.map */
/* activities.css */
@charset "UTF-8";
/* Question Creator Styling */
/* === Brand Palette === */
#components .question-sortable-header,
#components .component-sortable-header {
  cursor: grab;
}
#components .question-sortable-header button,
#components .question-sortable-header .btn,
#components .question-sortable-header input,
#components .question-sortable-header textarea,
#components .question-sortable-header select,
#components .question-sortable-header a,
#components .component-sortable-header button,
#components .component-sortable-header .btn,
#components .component-sortable-header input,
#components .component-sortable-header textarea,
#components .component-sortable-header select,
#components .component-sortable-header a {
  cursor: auto;
}
#components .component-drag-handle,
#components .drag-handle-mc,
#components .drag-handle-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  min-width: 1.5rem;
  color: #6b7c88;
  cursor: grab;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-shrink: 0;
}
#components .component-drag-handle {
  color: var(--bs-secondary-color, #6c757d);
}
#components .component-drag-handle:hover {
  color: var(--primary, #0d6efd);
}
#components {
  /* Multiple choice options */
}
#components .mc-options-container {
  margin-top: 0.75rem;
  padding-left: 2rem;
}
#components .mc-options-container .mc-option {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: var(--bs-border-radius, 6px);
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  transition: background 0.2s ease;
}
#components .mc-options-container .mc-option.mc-option-correct {
  border-color: #80f9c0;
  background: #f0fdf6;
}
#components .mc-options-container .mc-option:hover {
  background: #f3f4f6;
}
#components .mc-options-container .mc-option .drag-handle-mc {
  padding: 0.25rem;
}
#components .mc-options-container .mc-option .drag-handle-mc:hover {
  color: #ff8150;
}
#components .mc-options-container .mc-option .mc-option-text {
  flex: 1;
}
#components .mc-options-container .mc-option .mc-correct-checkbox {
  margin-top: 0;
}
#components .mc-options-container .mc-option .mark-correct-label {
  color: #308478;
  padding-left: 0;
}
#components .mc-options-container .mc-option .remove-mc-option-btn {
  color: #ff7e80;
}
#components .mc-options-container .mc-option .remove-mc-option-btn:hover {
  color: rgb(255, 75, 77.7906976744);
}
#components {
  /* Fill in the blank editor */
}
#components .fill-blank-editor {
  margin-top: 1rem;
}
#components .fill-blank-editor .fill-blank-preview {
  font-style: italic;
}
#components .fill-blank-editor .fill-blank-preview input {
  margin: 0 0.25rem;
}
#components .fill-blank-editor .fill-blank-block {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: var(--bs-border-radius, 6px);
  padding: 0.75rem;
  margin-top: 0.75rem;
}
#components .fill-blank-editor .fill-blank-block .fb-answer-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#components .fill-blank-editor .fill-blank-block .remove-fb-answer-btn {
  color: #ff7e80;
}
#components {
  /* Order choices */
}
#components .order-option {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: var(--bs-border-radius, 6px);
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}
#components .order-option .drag-handle-order {
  margin-right: 0.5rem;
}
#components .order-option .drag-handle-order:hover {
  color: #ff8150;
}
#components .order-option .remove-order-option-btn {
  color: #ff7e80;
}
#components {
  /* Preview blocks */
}
#components .preview-sortable-block {
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  border-radius: var(--bs-border-radius, 6px);
  padding: 0.75rem;
  margin-top: 0.5rem;
}
#components .preview-sortable-block label {
  font-weight: 500;
}

.media-component .media-selector .searchable-input {
  border-radius: var(--bs-border-radius, 6px);
  padding: 0.5rem 0.75rem;
}
.media-component .media-selector .dropdown-menu {
  max-height: 240px;
  overflow-y: auto;
  border-radius: var(--bs-border-radius, 6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.media-component .media-selector .dropdown-menu .dropdown-item {
  padding: 0.5rem 0.75rem;
}
.media-component .media-selector .dropdown-menu .dropdown-item:hover {
  background-color: #f3f4f6;
}
.media-component .selected-media {
  background: #f9fafb;
  border-color: #e5e7eb;
}
.media-component .selected-media .fw-semibold {
  color: #374955;
}

#activityMultiform.multiform--final-page .multiform-navigation {
  display: none !important;
}
#activityMultiform .submitbtn-activity {
  width: 100%;
  margin-top: 1.5rem;
}
#activityMultiform .submitbtn-activity__prev {
  white-space: nowrap;
}
#activityMultiform:not(.multiform--has-previous-page) .submitbtn-activity__prev {
  display: none !important;
}
#activityMultiform .submitbtn-activity--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
#activityMultiform .submitbtn-activity--center .submitbtn-activity__prev--link {
  padding: 0;
  font-size: 0.9rem;
  color: #6c757d;
  text-decoration: underline;
}
#activityMultiform .submitbtn-activity--right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}
#activityMultiform .submitbtn-activity--right .submitbtn-activity__submit {
  margin-left: auto;
}
@media (max-width: 575.98px) {
  #activityMultiform .submitbtn-activity--right {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  #activityMultiform .submitbtn-activity--right .submitbtn-activity__submit,
  #activityMultiform .submitbtn-activity--right .submitbtn-activity__prev {
    width: 100%;
  }
}

.quiz-footer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid #e5e7eb;
}
.quiz-footer-actions .left-actions {
  display: flex;
  gap: 0.75rem;
}
.quiz-footer-actions .left-actions .add-question-btn {
  background-color: #ff7e80;
  border-color: #ff7e80;
  color: #fff;
}
.quiz-footer-actions .left-actions .add-question-btn:hover {
  background-color: rgb(255, 90.3, 92.8534883721);
}
.quiz-footer-actions .left-actions .remove-quiz-btn {
  border: 1px solid #e5e7eb;
  color: #e63946;
}
.quiz-footer-actions .left-actions .remove-quiz-btn:hover {
  background-color: rgba(230, 57, 70, 0.08);
  border-color: #e63946;
}
.quiz-footer-actions .right-actions {
  display: flex;
  gap: 0.75rem;
}
.quiz-footer-actions .right-actions .btn {
  border-radius: var(--bs-border-radius, 6px);
}
.quiz-footer-actions .right-actions .btn-light {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
}
.quiz-footer-actions .right-actions .btn-success {
  background-color: #308478;
  border-color: #308478;
  color: #fff;
}
.quiz-footer-actions .right-actions .btn-success:hover {
  background-color: rgb(38.48, 105.82, 96.2);
}

/* Component explainer */
.components-explainer {
  background: #f0f9ff;
  border: 1px solid #d0e7ff;
  border-radius: var(--bs-border-radius, 8px);
  padding: 1rem 1.25rem;
  color: #374955;
}
.components-explainer h5 {
  color: #308478;
}

/* Page break styling */
.page-break-component {
  background: #ffdc75;
  border-radius: var(--bs-border-radius, 6px);
  padding: 0.75rem 1rem;
  text-align: center;
}
.page-break-component p {
  color: #000;
  margin-bottom: 0.5rem;
}
.page-break-component button {
  margin-top: 0.5rem;
}

/* Media component styling */
.media-component h3 {
  color: #374955;
  margin-bottom: 0.75rem;
}
.media-component .multiform--dropdown input.searchable-input {
  border-radius: var(--bs-border-radius, 6px);
  border: 1px solid #d1d5db;
}
.media-component .multiform--dropdown input.searchable-input:focus {
  border-color: #308478;
  box-shadow: 0 0 0 2px rgba(48, 132, 120, 0.2);
}
.media-component .multiform--dropdown .multiform--dropdown-menu {
  border-radius: var(--bs-border-radius, 6px);
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.media-component .multiform--dropdown .multiform--dropdown-menu .multiform--dropdown-item {
  padding: 0.5rem 0.75rem;
  color: #374955;
  transition: background 0.2s;
}
.media-component .multiform--dropdown .multiform--dropdown-menu .multiform--dropdown-item:hover {
  background: #f3f4f6;
  color: #308478;
}
.media-component button {
  margin-top: 0.75rem;
}

.activity-take {
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: url("/public/img/abstractBG.jpg") center/cover no-repeat fixed;
}
.activity-take::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 0;
}
.activity-take .quiz-card-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
}
.activity-take .quiz-card-wrapper .quiz-card {
  background: #fff;
  border-radius: var(--bs-border-radius, 0.75rem);
  padding: 1.5rem 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.activity-take .quiz-card-wrapper .quiz-card .quiz-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.activity-take .quiz-card-wrapper .quiz-card .activity-title {
  margin: 1rem 0;
}

.btn {
  border-radius: var(--bs-border-radius, 0.5rem);
  transition: all 0.2s ease-in-out;
}
.btn.btn-orange {
  background: #ff7e80;
  border: none;
  color: #fff;
}
.btn.btn-orange:hover {
  background: rgb(255, 100.5, 102.8953488372);
}
.btn.btn-green {
  background: #308478;
  border: none;
  color: #fff;
}
.btn.btn-green:hover {
  background: rgb(41.2, 113.3, 103);
}

/* Sortable.js styling for draggable pills */
.sortable-ghost {
  display: none !important;
}

.sortable-chosen {
  opacity: 0.5;
}

.sortable-drag {
  opacity: 1;
}

.activity-builder-drag-ghost {
  opacity: 0.5;
  background: #e7f1ff !important;
  border: 2px dashed #0d6efd !important;
}

.activity-component-card.is-collapsed > .card-body {
  display: none;
}

.question-drag-handle {
  cursor: grab;
  color: #6c757d;
  padding: 0.125rem 0.25rem;
}
.question-drag-handle:active {
  cursor: grabbing;
}

.activity-scoring-section.is-survey .scoring-graded-only {
  display: none;
}

.score-range-slider__pips {
  position: relative;
  height: 32px;
  margin-bottom: 4px;
}
.score-range-slider__pip {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  bottom: 0;
  transition: left 0.05s linear;
}
.score-range-slider__pip-label {
  font-size: 0.75rem;
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: var(--bs-border-radius, 4px);
  line-height: 1.5;
}
.score-range-slider__pip-arrow {
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.score-range-slider__pip--min .score-range-slider__pip-label {
  background: #e0a800;
  color: #000;
}
.score-range-slider__pip--min .score-range-slider__pip-arrow {
  border-top: 5px solid #e0a800;
}
.score-range-slider__pip--max .score-range-slider__pip-label {
  background: #198754;
  color: #fff;
}
.score-range-slider__pip--max .score-range-slider__pip-arrow {
  border-top: 5px solid #198754;
}
.score-range-slider__rail {
  position: relative;
  height: 36px;
}
.score-range-slider__track {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  height: 8px;
  border-radius: var(--bs-border-radius, 4px);
  display: flex;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.score-range-slider__fill {
  flex-shrink: 0;
}
.score-range-slider__fill--fail {
  background: #dc3545;
}
.score-range-slider__fill--pass {
  background: #ffc107;
}
.score-range-slider__fill--optimum {
  background: #198754;
  flex: 1;
}
.score-range-slider__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  z-index: 2;
  margin: 0;
  padding: 0;
}
.score-range-slider__input:focus {
  outline: none;
}
.score-range-slider__input::-webkit-slider-runnable-track {
  background: transparent;
  height: 0;
}
.score-range-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: grab;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.score-range-slider__input:active::-webkit-slider-thumb {
  cursor: grabbing;
}
.score-range-slider__input::-moz-range-track {
  background: transparent;
  height: 8px;
  border-radius: var(--bs-border-radius, 4px);
}
.score-range-slider__input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: grab;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.score-range-slider__input:active::-moz-range-thumb {
  cursor: grabbing;
}
.score-range-slider__input--min::-webkit-slider-thumb {
  background: #e0a800;
}
.score-range-slider__input--min::-moz-range-thumb {
  background: #e0a800;
}
.score-range-slider__input--max::-webkit-slider-thumb {
  background: #198754;
}
.score-range-slider__input--max::-moz-range-thumb {
  background: #198754;
}
.score-range-slider__legend {
  display: flex;
  gap: 1rem;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: #6c757d;
}
.score-range-slider__swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--bs-border-radius, 2px);
  margin-right: 0.3rem;
  vertical-align: middle;
}
.score-range-slider__swatch--fail {
  background: #dc3545;
}
.score-range-slider__swatch--pass {
  background: #ffc107;
}
.score-range-slider__swatch--optimum {
  background: #198754;
}
.score-range-slider--single .score-range-slider__pip--max {
  display: none;
}

.learning-section {
  justify-content: space-evenly;
  padding: 4rem 2rem;
  min-height: 300px;
  position: relative;
}
.learning-section .learning-card {
  display: flex;
  flex-direction: row;
  border: 1px solid #ccc;
  border-radius: var(--bs-border-radius, 6px);
  overflow: hidden;
  background: var(--bs-card-bg, #fff);
  color: var(--bs-card-color, inherit);
  margin-bottom: 16px;
  padding: 0 !important;
}
.learning-section .learning-card .card-left {
  flex: 0 0 40%;
}
.learning-section .learning-card .card-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.learning-section .learning-card .card-middle {
  flex: 1;
  padding: 14px 12px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  background: var(--bs-card-bg, #fff);
  color: var(--bs-card-color, inherit);
}
.learning-section .learning-card .card-middle .card-label {
  color: #999;
  margin-bottom: 0.25rem;
}
.learning-section .learning-card .card-middle .card-title {
  font-weight: bold;
  color: #ff6600;
  margin-bottom: 6px;
}
.learning-section .learning-card .card-middle .card-description,
.learning-section .learning-card .card-middle .card-attempts {
  color: #555;
  margin: 2px 0;
}
.learning-section .learning-card .card-middle .card-requirement {
  font-style: italic;
  color: #888;
  margin-bottom: 8px;
}
.learning-section .learning-card .card-middle .card-score {
  color: #333;
  font-weight: 600;
}
.learning-section .learning-card .card-middle .start-button {
  margin-top: auto;
  padding: 10px 12px;
  border-radius: var(--bs-border-radius, 20px);
  width: 100%;
  text-align: center;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s;
}
.learning-section .learning-card .card-middle .start-button.green {
  background-color: #a5e214;
  color: #000;
}
.learning-section .learning-card .card-middle .start-button.green:hover {
  background-color: #92c511;
}
.learning-section .learning-card .card-middle .start-button.orange {
  background-color: #ff9900;
  color: white;
}
.learning-section .learning-card .card-middle .start-button.orange:hover {
  background-color: #e48000;
}
.learning-section .learning-card .card-middle .start-button.resume {
  background-color: #f4c542;
  color: #333;
}
.learning-section .learning-card .card-middle .start-button.resume:hover {
  background-color: #e0b636;
}
.learning-section .learning-card .card-middle .btn.download-cert {
  display: inline-block;
  background: #eefae4;
  color: #2c7b00;
  padding: 10px 12px;
  border-radius: var(--bs-border-radius, 12px);
  text-decoration: none;
  margin-top: auto;
  border: 1px solid #a5e214;
}
.learning-section .learning-card .card-right {
  flex: 0 0 30px;
  background: #e5e5e5;
  border-left: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: #333;
  letter-spacing: 0.6px;
  padding: 8px 4px;
}
.learning-section .learning-card .card-right.complete {
  background-color: #80c342 !important;
  color: white;
}
.learning-section .learning-card .card-right.incomplete {
  background-color: #e5e5e5;
  color: #333;
}

@media (max-width: 1024px) {
  .learning-section {
    padding: 2rem;
  }
  .learning-section .learning-card {
    flex-direction: column;
    height: auto;
    border-radius: var(--bs-border-radius, 10px);
    overflow: hidden;
  }
  .learning-section .learning-card .card-left {
    width: 100%;
    height: auto;
  }
  .learning-section .learning-card .card-left img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
  }
  .learning-section .learning-card .card-middle {
    padding: 1.25rem;
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: white;
  }
  .learning-section .learning-card .card-middle .card-title {
    color: #ff6600;
    margin-bottom: 0.5rem;
  }
  .learning-section .learning-card .card-middle .card-description,
  .learning-section .learning-card .card-middle .card-attempts {
    margin: 0.2rem 0;
  }
  .learning-section .learning-card .card-middle .card-requirement {
    margin-bottom: 1rem;
    color: #777;
  }
  .learning-section .learning-card .card-middle .start-button {
    padding: 10px 16px;
    border-radius: var(--bs-border-radius, 25px);
  }
  .learning-section .learning-card .card-right {
    writing-mode: horizontal-tb;
    border-left: none;
    border-top: 1px solid #ccc;
    padding: 0.75rem 1.25rem;
    justify-content: center;
    background: #f0f0f0;
  }
}
.learning-card.border-success {
  border: 2px solid #80c342;
}

/* Main quiz container */
.quiz-card {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: var(--bs-border-radius, 8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Header row */
.quiz-card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.quiz-card-header .btn {
  padding: 0.4rem 1rem;
}

/* Title */
.activity-title {
  color: #222;
}

/* ============ Each Question as a Card ============ */
.sortable-block {
  background: #f9fafc;
  border: 1px solid #e1e5ea;
  border-radius: var(--bs-border-radius, 6px);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  transition: box-shadow 0.2s ease;
}
.sortable-block:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}

/* Question text (the label) */
.sortable-block > .d-flex > label {
  margin-bottom: 0rem;
}

/* Answers list */
.sortable-block .form-check {
  margin-bottom: 0.5rem;
}
.sortable-block .form-check .form-check-input {
  margin-right: 0.5rem;
}

/* Submit / pagination buttons */
.form-button--next.btn-primary {
  background-color: #308478;
  border: none;
}
.form-button--next.btn-primary:hover {
  background-color: #246c61;
}

/* =========================
   Completion Toast Modal
   ========================= */
.toast-container {
  position: fixed !important;
  z-index: 1055;
}
.toast-container #notificationToast {
  background: #fff;
  border-radius: var(--bs-border-radius, 10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  overflow: visible;
}
.toast-container #notificationToast .rt-header {
  position: relative;
  padding: 1rem 1.5rem;
  text-align: center;
  color: #fff;
}
.toast-container #notificationToast .rt-header.rt-pass {
  background: linear-gradient(135deg, #308478, #2c5f5c);
}
.toast-container #notificationToast .rt-header.rt-fail {
  background: linear-gradient(135deg, #c62828, #8b0000);
}
.toast-container #notificationToast .rt-header.rt-partial {
  background: linear-gradient(135deg, #ff8150, #e06a38);
}
.toast-container #notificationToast .rt-header .rt-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}
.toast-container #notificationToast .rt-body {
  padding: 1.2rem 1.5rem 0.5rem;
  text-align: center;
}
.toast-container #notificationToast .rt-body .rt-badges {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.toast-container #notificationToast .rt-body .rt-badges .rt-badge {
  background: #f1f3f5;
  color: #333;
  padding: 0.4rem 0.9rem;
  border-radius: var(--bs-border-radius, 1rem);
}
.toast-container #notificationToast .rt-actions {
  padding: 1rem 1.5rem 1.25rem;
  text-align: center;
  background: #fafafa;
  border-top: 1px solid #eee;
  position: relative;
  overflow: visible;
}
.toast-container #notificationToast .rt-actions .dropdown-menu {
  z-index: 1060;
}
.toast-container #notificationToast .rt-actions .btn.orange {
  display: inline-block;
  background: #ff8150;
  color: #fff !important;
  padding: 0.5rem 1.5rem;
  border-radius: var(--bs-border-radius, 6px);
  text-decoration: none;
  transition: background 0.2s ease;
}
.toast-container #notificationToast .rt-actions .btn.orange:hover {
  background: #e36c3f;
}
.toast-container #notificationToast .rt-actions {
  /* remove link look for btn-link inside .orange */
}
.toast-container #notificationToast .rt-actions .btn-link.btn.orange {
  border: none;
}

#incompleteModal {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
#incompleteModal .modal-content {
  background-color: #fff;
  padding: 2rem;
  border-radius: var(--bs-border-radius, 12px);
  max-width: 500px;
  width: 90%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  text-align: center;
  margin: 5rem auto;
}
#incompleteModal .modal-content h3 {
  margin-bottom: 1rem;
}
#incompleteModal .modal-content p {
  margin-bottom: 1.5rem;
}
#incompleteModal .modal-content .modal-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
#incompleteModal .modal-content .modal-buttons button {
  padding: 0.6rem 1.2rem;
  border-radius: var(--bs-border-radius, 6px);
  border: 2px solid #374955;
  background-color: #fff;
  color: #374955;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#incompleteModal .modal-content .modal-buttons button:hover {
  background-color: #374955;
  color: #fff;
}

/* ===== Fullscreen overlay remains ===== */
#toastOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 1054;
}

/* ===== Toast card ===== */
.result-toast {
  background: #fff;
  border-radius: var(--bs-border-radius, 16px);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  max-height: 100%;
  /* card fits container */
  /* ===== Scrollable inner area ===== */
}
.result-toast .rt-body, .result-toast .rt-actions {
  flex-shrink: 0;
}
.result-toast .rt-scroll {
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  flex: 1 1 auto;
  min-height: 0;
  /* important for flexbox scroll */
}

#moduleModal .modal-content {
  border-radius: var(--bs-border-radius, 14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  border: none;
}
#moduleModal .modal-header {
  padding: 1.5rem 1.75rem 0.75rem;
}
#moduleModal .modal-header .modal-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.25rem;
}
#moduleModal .modal-header .modal-subtitle {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}
#moduleModal .modal-header .btn-close {
  opacity: 0.4;
}
#moduleModal .modal-header .btn-close:hover {
  opacity: 0.7;
}
#moduleModal .modal-body {
  padding: 0.75rem 1.75rem 1.75rem;
}
#moduleModal .modal-body label {
  font-size: 0.8rem;
  font-weight: 500;
  color: #374955;
  margin-bottom: 0.35rem;
}
#moduleModal .modal-body .form-control,
#moduleModal .modal-body .form-select {
  border-radius: var(--bs-border-radius, 10px);
  border: 1px solid #d1d5db;
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  transition: all 0.15s ease;
}
#moduleModal .modal-body .form-control:focus,
#moduleModal .modal-body .form-select:focus {
  border-color: #308478;
  box-shadow: 0 0 0 3px rgba(48, 132, 120, 0.15);
}
#moduleModal .modal-body .form-control::placeholder,
#moduleModal .modal-body .form-select::placeholder {
  color: #9ca3af;
}
#moduleModal .modal-body .field-hint {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 0.4rem;
}
#moduleModal .btn-primary,
#moduleModal .btn-success {
  background-color: #308478;
  border-color: #308478;
  border-radius: var(--bs-border-radius, 8px);
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
}
#moduleModal .btn-primary:hover,
#moduleModal .btn-success:hover {
  background-color: #256e66;
  border-color: #256e66;
}

.quiz-instructions-content {
  border: none;
  border-radius: var(--bs-border-radius, 12px);
  overflow: hidden;
}
.quiz-instructions-content .modal-header {
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  padding: 1.25rem 1.75rem;
}
.quiz-instructions-content .modal-header .modal-title {
  color: #1a1a2e;
  font-weight: 700;
  font-size: 1.35rem;
}
.quiz-instructions-content .modal-body {
  padding: 1.75rem;
}
.quiz-instructions-content .modal-body .instructions-headline {
  font-size: 0.85rem;
  color: #999;
  margin-bottom: 1rem;
  font-style: italic;
}
.quiz-instructions-content .modal-body .instructions-intro {
  font-size: 1rem;
  color: #333;
  margin-bottom: 1.25rem;
  line-height: 1.6;
}
.quiz-instructions-content .modal-body .instructions-intro strong {
  color: #1a1a2e;
}
.quiz-instructions-content .modal-body .instructions-structure {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.quiz-instructions-content .modal-body .instructions-structure .structure-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: #f8f9fa;
  border-radius: var(--bs-border-radius, 8px);
  font-size: 0.9rem;
  color: #444;
  border: 1px solid #eee;
}
.quiz-instructions-content .modal-body .instructions-structure .structure-step::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6c757d;
  flex-shrink: 0;
}
.quiz-instructions-content .modal-body .instructions-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (max-width: 576px) {
  .quiz-instructions-content .modal-body .instructions-cards {
    grid-template-columns: 1fr;
  }
}
.quiz-instructions-content .modal-body .instructions-cards .instruction-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid #e9ecef;
  border-radius: var(--bs-border-radius, 10px);
  background: #fff;
  transition: border-color 0.2s;
}
.quiz-instructions-content .modal-body .instructions-cards .instruction-card:hover {
  border-color: #ced4da;
}
.quiz-instructions-content .modal-body .instructions-cards .instruction-card .instruction-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--bs-border-radius, 8px);
  background: #f1f3f5;
  flex-shrink: 0;
}
.quiz-instructions-content .modal-body .instructions-cards .instruction-card .instruction-card-icon i {
  font-size: 1.1rem;
  color: #495057;
}
.quiz-instructions-content .modal-body .instructions-cards .instruction-card .instruction-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.quiz-instructions-content .modal-body .instructions-cards .instruction-card .instruction-card-body strong {
  font-size: 0.85rem;
  color: #1a1a2e;
}
.quiz-instructions-content .modal-body .instructions-cards .instruction-card .instruction-card-body span {
  font-size: 0.8rem;
  color: #6c757d;
  line-height: 1.4;
}
.quiz-instructions-content .modal-footer {
  border-top: 1px solid #e9ecef;
  padding: 1rem 1.75rem;
}
.quiz-instructions-content .modal-footer .btn-primary {
  background: #1a1a2e;
  border-color: #1a1a2e;
  border-radius: var(--bs-border-radius, 8px);
  padding: 0.5rem 2rem;
  font-weight: 600;
}
.quiz-instructions-content .modal-footer .btn-primary:hover {
  background: #2d2d44;
  border-color: #2d2d44;
}

/* ── Sequencing tree/detail editor — mounted into the path editor's "Courses &
   sequencing" tab (see sequencing_editor.js SequencingEditor.attachTo). Kept
   self-contained and host-agnostic (no modal-specific selectors) on purpose: do
   NOT depend on core's admin.css .pb-tree* rules — admin.css is filtered off any
   route that doesn't start with "admin" (see filterPhpFiles in
   core/config/include.php), so it never loads on the portal manager dashboard
   this editor lives on. This file has no such page-name collision (no page is
   named "activities"), so it's safe here. */
.seq-editor-wrap {
  min-height: 100%;
  max-width: 1160px;
  width: 100%;
  margin: 0 auto;
}

.seq-main {
  min-height: 420px;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: var(--bs-border-radius, 16px);
  overflow: hidden;
}

.seq-layout {
  flex: 1 1 auto;
  min-height: 420px;
}

.seq-tree-pane {
  width: 340px;
  flex: 0 0 340px;
  background: var(--bs-tertiary-bg);
}

.seq-detail {
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.seq-detail-head {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.seq-toolbar-card {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color-translucent);
}
.seq-toolbar-card .form-check-label {
  cursor: pointer;
}

.seq-empty-cta {
  border: 1.5px dashed var(--bs-border-color);
  max-width: 480px;
  margin: 3rem auto;
  padding: 3rem 2rem;
}
.seq-empty-cta .seq-empty-icon {
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.5rem;
}

.seq-empty-icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
}

.seq-cond-row .form-select,
.seq-cond-row .form-control {
  max-width: 100%;
}

/* ── Path editor modal (paths_manager.js) ─────────────────────────────────────
   A large, bounded, centered dialog (modal-xl) rather than a true fullscreen
   modal — fullscreen left oceans of empty space around a short form. A fixed
   viewport-relative height gives the power-mode tree editor plenty of room
   while keeping the whole thing a contained, designed panel; the flex chain
   below fills that height and hands each region its own internal scroll.

   IMPORTANT: the outer wizard tabs (Details / Courses / Who-can-see-it) use
   Bootstrap .tab-pane, and so does the power-mode detail panel INSIDE the
   Courses tab (Navigation / Rules / …). The layout rules that make a wizard
   tab a full-height flex column must therefore be scoped to the OUTER tab set
   only (`.path-editor-tabs > .tab-pane`), or they leak into the inner panel
   and stretch its buttons/fields full-width. */
.path-editor-modal {
  height: 85vh;
  max-height: 920px;
}
.path-editor-modal .modal-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.path-editor-modal .path-editor-layout {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.path-editor-modal .path-editor-rail {
  flex: 0 0 230px;
  width: 230px;
  overflow-y: auto;
  padding: 1.5rem 0.75rem;
  background: var(--bs-tertiary-bg);
  border-right: 1px solid var(--bs-border-color-translucent);
}
.path-editor-modal .path-editor-rail .nav-item {
  margin-bottom: 2px;
}
.path-editor-modal .path-editor-rail .nav-link {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.65rem;
  border-radius: var(--bs-border-radius, 10px);
  border: 0;
  background: transparent;
  color: inherit;
}
.path-editor-modal .path-editor-rail .nav-link:hover:not(.disabled) {
  background: var(--bs-body-bg);
}
.path-editor-modal .path-editor-rail .nav-link.active {
  background: var(--bs-primary-bg-subtle);
}
.path-editor-modal .path-editor-rail .nav-link.active .path-editor-rail-dot {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: var(--bs-white, #fff);
}
.path-editor-modal .path-editor-rail .nav-link.active .path-editor-rail-label strong {
  color: var(--bs-primary-text-emphasis, var(--bs-primary));
}
.path-editor-modal .path-editor-rail .nav-link.disabled {
  opacity: 0.55;
}
.path-editor-modal .path-editor-rail-dot {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--bs-body-bg);
  border: 1.5px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
}
.path-editor-modal .path-editor-rail-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 1px;
}
.path-editor-modal .path-editor-rail-label strong {
  font-size: 0.8rem;
  font-weight: 600;
}
.path-editor-modal .path-editor-rail-label span {
  font-size: 0.7rem;
  color: var(--bs-secondary-color);
}
.path-editor-modal .path-editor-tabs {
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bs-tertiary-bg);
}
.path-editor-modal .path-editor-tabs > .tab-pane {
  overflow-y: auto;
}
.path-editor-modal .path-editor-tabs > .tab-pane.show.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.path-editor-modal .path-editor-tabs > #pathTabCourses {
  overflow: hidden;
  padding: 0;
}
.path-editor-modal #pathSequencingHost {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.path-editor-modal .nav-link.disabled {
  pointer-events: none;
}
.path-editor-modal .path-editor-pane {
  max-width: 760px;
  width: 100%;
  margin: 1.75rem auto;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: var(--bs-border-radius, 16px);
  box-shadow: 0 1px 3px rgba(20, 20, 40, 0.06), 0 8px 24px rgba(20, 20, 40, 0.04);
  padding: 2rem 2.25rem;
}
.path-editor-modal #speModeBar {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0.25rem 0.25rem 0;
  margin-bottom: 0;
}
.path-editor-modal .path-editor-pane.path-editor-pane-wide {
  max-width: 1160px;
}

.seq-tree-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.seq-tree-node {
  margin-bottom: 0.15rem;
}

.seq-tree-subnodes {
  list-style: none;
  margin: 0;
  padding-left: 1.1rem;
  border-left: 2px solid #dee2e6;
}

.seq-tree-collapse {
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
  cursor: pointer;
}

.seq-tree-label {
  border: 1px solid transparent;
  border-radius: var(--bs-border-radius, 0.375rem);
}

.seq-tree-node--hover > .seq-tree-label {
  border-color: #d0d7de;
  background: #f8f9fa;
}

.seq-tree-node--dragging > .seq-tree-label {
  opacity: 0.5;
}

.seq-tree-node--drop-before {
  border-top: 2px solid #0d6efd;
}

.seq-tree-node--drop-inside > .seq-tree-label {
  border-color: #0d6efd;
  background: #e8f0fe;
}

.seq-tree-node--drop-after {
  border-bottom: 2px solid #0d6efd;
}

.seq-tree-label-inner {
  border: 1px solid transparent;
  border-radius: var(--bs-border-radius, 0.375rem);
  cursor: pointer;
}
.seq-tree-label-inner:hover {
  background: rgba(13, 110, 253, 0.06);
}

.seq-tree-selected {
  background: rgba(13, 110, 253, 0.12);
  border-color: rgba(13, 110, 253, 0.35);
}

.seq-tree-node-actions {
  opacity: 0;
  transition: opacity 0.12s ease;
}

.seq-tree-label-inner:hover .seq-tree-node-actions,
.seq-tree-selected .seq-tree-node-actions {
  opacity: 1;
}

/* Activity picker (multiform's searchable-dropdown, reused outside a multiform).
   Its floating menu (submodules/multiform/src/assets/js/multiform_dropdowns.js
   attachSearchableDropdownMenu) is reparented to document.body with
   position:absolute and NO z-index of its own — fine on a plain page, but the
   picker here opens inside a *stacked* Bootstrap modal (z-index ~1055+ per
   modal), so without this override the menu would render invisibly behind it. */
.seq-activity-dropdown-menu {
  z-index: 2000;
}

/* Same fix, same reason, for simple_path_editor.js's own activity picker —
   it isn't stacked inside a second modal like the sequencing editor's, but it
   still sits inside the path editor's own Bootstrap modal, which is enough to
   trigger the same z-index problem. */
.spe-course-dropdown-menu {
  z-index: 2000;
}

.spe-course-row {
  transition: border-color 0.12s ease, background 0.12s ease;
}
.spe-course-row:hover {
  border-color: var(--bs-border-color-translucent);
  background: var(--bs-tertiary-bg);
}

.spe-empty-panel {
  border: 1.5px dashed var(--bs-border-color);
}

.spe-empty-icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
}



/* admin_media_library.css */
@charset "UTF-8";
/* Media Library admin page (/admin/media). Everything is scoped under
   #adminMediaLibrary (page) and #mlibEditPanel / #mlibDeleteModal (overlays)
   so this file can ride the global bundle without leaking.

   .mlib-scope is that same page scope for markup index.js re-parents OUT of
   #adminMediaLibrary — the filter block, which moves into the shared admin
   filters shell (a sibling of .module-body). Without it those controls would
   lose every rule below the moment they were moved. */
#adminMediaLibrary,
.mlib-scope {
  --mlib-brand: #09083a;
  --mlib-brand-hover: #12114e;
  --mlib-surface: var(--bs-body-bg, #fff);
  --ml-image: #0e7c6b;
  --ml-video: #b3324b;
  --ml-audio: #5b3fa8;
  --ml-document: #a86b1f;
  --ml-font: #1f6fa8;
  --ml-file: #475569;
}
#adminMediaLibrary [data-type=image],
.mlib-scope [data-type=image] {
  --t: var(--ml-image);
}
#adminMediaLibrary [data-type=video],
.mlib-scope [data-type=video] {
  --t: var(--ml-video);
}
#adminMediaLibrary [data-type=audio],
.mlib-scope [data-type=audio] {
  --t: var(--ml-audio);
}
#adminMediaLibrary [data-type=document],
.mlib-scope [data-type=document] {
  --t: var(--ml-document);
}
#adminMediaLibrary [data-type=font],
.mlib-scope [data-type=font] {
  --t: var(--ml-font);
}
#adminMediaLibrary [data-type=file],
.mlib-scope [data-type=file] {
  --t: var(--ml-file);
}
#adminMediaLibrary .mlib-subtitle,
.mlib-scope .mlib-subtitle {
  font-size: 0.9rem;
}
#adminMediaLibrary .mlib-count-badge,
.mlib-scope .mlib-count-badge {
  background: color-mix(in srgb, var(--mlib-brand) 10%, var(--mlib-surface));
  color: var(--mlib-brand);
  font-size: 0.85rem;
  font-weight: 600;
  vertical-align: middle;
}
#adminMediaLibrary,
.mlib-scope {
  /* ---------------- Type pill rail ---------------- */
}
#adminMediaLibrary .mlib-pill,
.mlib-scope .mlib-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bs-body-color);
  background: transparent;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
#adminMediaLibrary .mlib-pill:hover,
.mlib-scope .mlib-pill:hover {
  background: color-mix(in srgb, var(--mlib-brand) 6%, transparent);
}
#adminMediaLibrary .mlib-pill.active,
.mlib-scope .mlib-pill.active {
  background: var(--mlib-brand);
  border-color: var(--mlib-brand);
  color: #fff;
}
#adminMediaLibrary .mlib-pill.active .mlib-dot,
.mlib-scope .mlib-pill.active .mlib-dot {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
#adminMediaLibrary .mlib-dot,
.mlib-scope .mlib-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
#adminMediaLibrary [data-dot=image],
.mlib-scope [data-dot=image] {
  background: var(--ml-image);
}
#adminMediaLibrary [data-dot=video],
.mlib-scope [data-dot=video] {
  background: var(--ml-video);
}
#adminMediaLibrary [data-dot=audio],
.mlib-scope [data-dot=audio] {
  background: var(--ml-audio);
}
#adminMediaLibrary [data-dot=document],
.mlib-scope [data-dot=document] {
  background: var(--ml-document);
}
#adminMediaLibrary [data-dot=font],
.mlib-scope [data-dot=font] {
  background: var(--ml-font);
}
#adminMediaLibrary [data-dot=file],
.mlib-scope [data-dot=file] {
  background: var(--ml-file);
}
#adminMediaLibrary,
.mlib-scope {
  /* ---------------- Sticky toolbar ---------------- */
}
#adminMediaLibrary .mlib-stick-sentinel,
.mlib-scope .mlib-stick-sentinel {
  height: 1px;
}
#adminMediaLibrary .mlib-toolbar,
.mlib-scope .mlib-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--mlib-surface);
  transition: box-shadow 200ms ease;
}
#adminMediaLibrary .mlib-toolbar.is-stuck,
.mlib-scope .mlib-toolbar.is-stuck {
  border-bottom: 1px solid var(--bs-border-color);
  box-shadow: 0 4px 8px -4px rgba(9, 8, 58, 0.08);
}
#adminMediaLibrary .mlib-toolbar.is-stuck .mlib-toolbar-upload,
.mlib-scope .mlib-toolbar.is-stuck .mlib-toolbar-upload {
  display: inline-flex;
}
#adminMediaLibrary .mlib-toolbar-upload,
.mlib-scope .mlib-toolbar-upload {
  display: none;
  width: 31px;
  height: 31px;
  align-items: center;
  justify-content: center;
  padding: 0;
  animation: mlibFadeIn 150ms ease;
}
#adminMediaLibrary .mlib-search,
.mlib-scope .mlib-search {
  width: clamp(220px, 32vw, 360px);
}
#adminMediaLibrary .mlib-search .mlib-search-input,
.mlib-scope .mlib-search .mlib-search-input {
  padding-left: 36px;
  padding-right: 36px;
}
#adminMediaLibrary .mlib-search .mlib-search-icon,
.mlib-scope .mlib-search .mlib-search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bs-secondary-color);
  pointer-events: none;
}
#adminMediaLibrary .mlib-search .mlib-search-kbd,
.mlib-scope .mlib-search .mlib-search-kbd {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  padding: 1px 6px;
  color: var(--bs-secondary-color);
  background: transparent;
  border: 1px solid var(--bs-border-color);
  border-radius: 4px;
  pointer-events: none;
  transition: opacity 120ms ease;
}
#adminMediaLibrary .mlib-search:focus-within .mlib-search-kbd,
.mlib-scope .mlib-search:focus-within .mlib-search-kbd {
  opacity: 0;
}
#adminMediaLibrary .mlib-search .mlib-search-clear,
.mlib-scope .mlib-search .mlib-search-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 8px;
  color: var(--bs-secondary-color);
  border: 0;
}
#adminMediaLibrary .mlib-search .mlib-search-clear:hover,
.mlib-scope .mlib-search .mlib-search-clear:hover {
  color: var(--bs-body-color);
}
#adminMediaLibrary,
.mlib-scope {
  /* Inside the shared filters shell the search owns its own row, so it fills
     the card rather than keeping the toolbar-sized clamp above. */
}
#adminMediaLibrary [data-mlib-filters] .mlib-search,
.mlib-scope [data-mlib-filters] .mlib-search {
  width: 100%;
}
#adminMediaLibrary .mlib-view-toggle .btn,
.mlib-scope .mlib-view-toggle .btn {
  border: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
}
#adminMediaLibrary .mlib-view-toggle .btn.active,
.mlib-scope .mlib-view-toggle .btn.active {
  background: var(--mlib-brand);
  border-color: var(--mlib-brand);
  color: #fff;
}
#adminMediaLibrary,
.mlib-scope {
  /* ---------------- Upload queue ---------------- */
}
#adminMediaLibrary .mlib-queue,
.mlib-scope .mlib-queue {
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--mlib-brand) 2%, var(--mlib-surface));
}
#adminMediaLibrary .mlib-queue-row,
.mlib-scope .mlib-queue-row {
  position: relative;
  min-height: 36px;
  padding: 4px 2px 8px;
}
#adminMediaLibrary .mlib-queue-name,
.mlib-scope .mlib-queue-name {
  max-width: 50%;
}
#adminMediaLibrary .mlib-queue-pct,
.mlib-scope .mlib-queue-pct {
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  text-align: right;
}
#adminMediaLibrary .mlib-queue-bar,
.mlib-scope .mlib-queue-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--bs-border-color);
  overflow: hidden;
}
#adminMediaLibrary .mlib-queue-fill,
.mlib-scope .mlib-queue-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--mlib-brand);
  transition: width 200ms linear;
}
#adminMediaLibrary .mlib-queue-fill.mlib-queue-fill-done,
.mlib-scope .mlib-queue-fill.mlib-queue-fill-done {
  background: var(--bs-success);
}
#adminMediaLibrary .mlib-queue-fill.mlib-queue-fill-error,
.mlib-scope .mlib-queue-fill.mlib-queue-fill-error {
  background: var(--bs-danger);
}
#adminMediaLibrary,
.mlib-scope {
  /* ---------------- Grid + tiles ---------------- */
}
#adminMediaLibrary .mlib-content,
.mlib-scope .mlib-content {
  min-height: 320px;
}
#adminMediaLibrary .mlib-grid,
.mlib-scope .mlib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  padding-top: 12px;
}
#adminMediaLibrary,
.mlib-scope {
  /* Compact view: denser tiles than the default grid. The 180px default only
     fits one column below ~430px, so on phones this pins to exactly two —
     which is the whole point of the mode — and just runs denser above that. */
}
#adminMediaLibrary .mlib-grid--compact,
.mlib-scope .mlib-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
@media (max-width: 575.98px) {
  #adminMediaLibrary .mlib-grid--compact,
  .mlib-scope .mlib-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}
#adminMediaLibrary .mlib-tile,
.mlib-scope .mlib-tile {
  position: relative;
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  background: var(--mlib-surface);
  box-shadow: 0 1px 3px rgba(9, 8, 58, 0.06);
  overflow: hidden;
  cursor: pointer;
  transition: transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
#adminMediaLibrary .mlib-tile:hover, #adminMediaLibrary .mlib-tile:focus-visible,
.mlib-scope .mlib-tile:hover,
.mlib-scope .mlib-tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(9, 8, 58, 0.12);
}
#adminMediaLibrary .mlib-tile:focus-visible,
.mlib-scope .mlib-tile:focus-visible {
  outline: 2px solid var(--mlib-brand);
  outline-offset: 2px;
}
#adminMediaLibrary .mlib-tile.mlib-selected,
.mlib-scope .mlib-tile.mlib-selected {
  box-shadow: 0 0 0 2px var(--mlib-brand);
}
#adminMediaLibrary .mlib-tile.mlib-active,
.mlib-scope .mlib-tile.mlib-active {
  box-shadow: 0 0 0 2px var(--mlib-brand), 0 6px 16px rgba(9, 8, 58, 0.12);
}
#adminMediaLibrary .mlib-tile.mlib-out,
.mlib-scope .mlib-tile.mlib-out {
  transform: scale(0.9);
  opacity: 0;
  transition: transform 180ms ease-in, opacity 180ms ease-in;
}
#adminMediaLibrary .mlib-tile.mlib-cascade,
.mlib-scope .mlib-tile.mlib-cascade {
  animation: mlibCascade 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 24ms);
}
#adminMediaLibrary .mlib-tile.mlib-arrived,
.mlib-scope .mlib-tile.mlib-arrived {
  animation: mlibArrive 240ms cubic-bezier(0.16, 1, 0.3, 1) both, mlibHalo 1.5s ease-out 240ms;
}
#adminMediaLibrary .mlib-tile.mlib-arrived-reveal .mlib-overlay,
.mlib-scope .mlib-tile.mlib-arrived-reveal .mlib-overlay {
  opacity: 1;
}
#adminMediaLibrary .mlib-tile.mlib-arrived-reveal .mlib-ov-copy,
.mlib-scope .mlib-tile.mlib-arrived-reveal .mlib-ov-copy {
  animation: mlibPulse 700ms ease-in-out;
}
#adminMediaLibrary .mlib-tile.mlib-copy-ring,
.mlib-scope .mlib-tile.mlib-copy-ring {
  animation: mlibCopyRing 600ms ease-out;
}
#adminMediaLibrary .mlib-thumb,
.mlib-scope .mlib-thumb {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bs-tertiary-bg, #f1f3f5);
}
#adminMediaLibrary .mlib-img,
.mlib-scope .mlib-img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease-out;
}
#adminMediaLibrary .mlib-tile[data-type=image]:not(.mlib-img-broken) .mlib-img,
.mlib-scope .mlib-tile[data-type=image]:not(.mlib-img-broken) .mlib-img {
  display: block;
}
#adminMediaLibrary .mlib-tile[data-type=image]:not(.mlib-img-broken) .mlib-plate,
.mlib-scope .mlib-tile[data-type=image]:not(.mlib-img-broken) .mlib-plate {
  display: none;
}
#adminMediaLibrary .mlib-tile:hover .mlib-img,
.mlib-scope .mlib-tile:hover .mlib-img {
  transform: scale(1.03);
}
#adminMediaLibrary,
.mlib-scope {
  /* Duotone type plate */
}
#adminMediaLibrary .mlib-plate,
.mlib-scope .mlib-plate {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--t) 4%, transparent) 0 1px, transparent 1px 12px), color-mix(in srgb, var(--t) 8%, var(--mlib-surface));
}
#adminMediaLibrary .mlib-chip,
.mlib-scope .mlib-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--t) 14%, var(--mlib-surface));
}
#adminMediaLibrary .mlib-chip i,
.mlib-scope .mlib-chip i {
  font-size: 18px;
  color: var(--t);
}
#adminMediaLibrary .mlib-ext,
.mlib-scope .mlib-ext {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-family: var(--bs-font-monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--t);
  background: color-mix(in srgb, var(--t) 12%, var(--mlib-surface));
}
#adminMediaLibrary .mlib-mono,
.mlib-scope .mlib-mono {
  position: absolute;
  right: -6px;
  bottom: -10px;
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--t) 18%, transparent);
  user-select: none;
}
#adminMediaLibrary .mlib-play,
.mlib-scope .mlib-play {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  align-items: center;
  justify-content: center;
  transition: transform 160ms ease;
}
#adminMediaLibrary .mlib-play i,
.mlib-scope .mlib-play i {
  font-size: 24px;
  color: var(--ml-video);
  margin-left: 2px;
}
#adminMediaLibrary .mlib-tile[data-type=video] .mlib-play,
.mlib-scope .mlib-tile[data-type=video] .mlib-play {
  display: flex;
}
#adminMediaLibrary .mlib-tile[data-type=video]:hover .mlib-play,
.mlib-scope .mlib-tile[data-type=video]:hover .mlib-play {
  transform: translate(-50%, -50%) scale(1.08);
}
#adminMediaLibrary .mlib-wave,
.mlib-scope .mlib-wave {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  align-items: flex-end;
  gap: 3px;
  height: 24px;
}
#adminMediaLibrary .mlib-wave i,
.mlib-scope .mlib-wave i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: var(--ml-audio);
  opacity: 0.35;
  transform-origin: bottom;
}
#adminMediaLibrary .mlib-wave i:nth-child(1),
.mlib-scope .mlib-wave i:nth-child(1) {
  height: 8px;
}
#adminMediaLibrary .mlib-wave i:nth-child(2),
.mlib-scope .mlib-wave i:nth-child(2) {
  height: 16px;
}
#adminMediaLibrary .mlib-wave i:nth-child(3),
.mlib-scope .mlib-wave i:nth-child(3) {
  height: 22px;
}
#adminMediaLibrary .mlib-wave i:nth-child(4),
.mlib-scope .mlib-wave i:nth-child(4) {
  height: 14px;
}
#adminMediaLibrary .mlib-wave i:nth-child(5),
.mlib-scope .mlib-wave i:nth-child(5) {
  height: 9px;
}
#adminMediaLibrary .mlib-tile[data-type=audio] .mlib-wave,
.mlib-scope .mlib-tile[data-type=audio] .mlib-wave {
  display: flex;
}
#adminMediaLibrary .mlib-tile[data-type=audio]:hover .mlib-wave i,
.mlib-scope .mlib-tile[data-type=audio]:hover .mlib-wave i {
  animation: mlibWave 600ms ease-in-out;
}
#adminMediaLibrary .mlib-tile[data-type=audio]:hover .mlib-wave i:nth-child(2),
.mlib-scope .mlib-tile[data-type=audio]:hover .mlib-wave i:nth-child(2) {
  animation-delay: 60ms;
}
#adminMediaLibrary .mlib-tile[data-type=audio]:hover .mlib-wave i:nth-child(3),
.mlib-scope .mlib-tile[data-type=audio]:hover .mlib-wave i:nth-child(3) {
  animation-delay: 120ms;
}
#adminMediaLibrary .mlib-tile[data-type=audio]:hover .mlib-wave i:nth-child(4),
.mlib-scope .mlib-tile[data-type=audio]:hover .mlib-wave i:nth-child(4) {
  animation-delay: 180ms;
}
#adminMediaLibrary .mlib-tile[data-type=audio]:hover .mlib-wave i:nth-child(5),
.mlib-scope .mlib-tile[data-type=audio]:hover .mlib-wave i:nth-child(5) {
  animation-delay: 240ms;
}
#adminMediaLibrary,
.mlib-scope {
  /* Document dog-ear fold */
}
#adminMediaLibrary .mlib-tile[data-type=document] .mlib-plate::after,
.mlib-scope .mlib-tile[data-type=document] .mlib-plate::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(225deg, var(--mlib-surface) 0 50%, color-mix(in srgb, var(--t) 30%, var(--mlib-surface)) 50% 100%);
  border-bottom-left-radius: 6px;
  filter: drop-shadow(-1px 1px 1px rgba(0, 0, 0, 0.06));
}
#adminMediaLibrary .mlib-lock,
.mlib-scope .mlib-lock {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(9, 8, 58, 0.75);
  color: #fff;
  font-size: 11px;
}
#adminMediaLibrary .mlib-tile[data-type=document] .mlib-lock,
.mlib-scope .mlib-tile[data-type=document] .mlib-lock {
  right: 24px;
}
#adminMediaLibrary,
.mlib-scope {
  /* Selection checkbox */
}
#adminMediaLibrary .mlib-check,
.mlib-scope .mlib-check {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 120ms ease, transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
#adminMediaLibrary .mlib-check:checked,
.mlib-scope .mlib-check:checked {
  background-color: var(--mlib-brand);
  border-color: var(--mlib-brand);
}
#adminMediaLibrary .mlib-tile:hover .mlib-check,
#adminMediaLibrary .mlib-tile:focus-within .mlib-check, #adminMediaLibrary.mlib-selecting .mlib-check,
#adminMediaLibrary .mlib-check:checked,
.mlib-scope .mlib-tile:hover .mlib-check,
.mlib-scope .mlib-tile:focus-within .mlib-check,
.mlib-scope.mlib-selecting .mlib-check,
.mlib-scope .mlib-check:checked {
  opacity: 1;
  transform: scale(1);
}
#adminMediaLibrary,
.mlib-scope {
  /* Hover overlay actions */
}
#adminMediaLibrary .mlib-overlay,
.mlib-scope .mlib-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px;
  background: linear-gradient(transparent 55%, rgba(9, 8, 58, 0.55));
  opacity: 0;
  transition: opacity 150ms ease;
}
#adminMediaLibrary .mlib-tile:hover .mlib-overlay,
#adminMediaLibrary .mlib-tile:focus-within .mlib-overlay,
.mlib-scope .mlib-tile:hover .mlib-overlay,
.mlib-scope .mlib-tile:focus-within .mlib-overlay {
  opacity: 1;
}
@media (hover: none) {
  #adminMediaLibrary .mlib-overlay,
  .mlib-scope .mlib-overlay {
    opacity: 0.7;
  }
}
#adminMediaLibrary .mlib-ov-btn,
.mlib-scope .mlib-ov-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--mlib-brand);
  border: 0;
  transition: transform 120ms ease, background-color 120ms ease;
}
#adminMediaLibrary .mlib-ov-btn:hover,
.mlib-scope .mlib-ov-btn:hover {
  background: #fff;
  color: var(--mlib-brand-hover);
  transform: scale(1.08);
}
#adminMediaLibrary .mlib-ov-btn i,
.mlib-scope .mlib-ov-btn i {
  font-size: 14px;
}
#adminMediaLibrary .mlib-ov-btn.mlib-ov-copy,
.mlib-scope .mlib-ov-btn.mlib-ov-copy {
  width: 32px;
  height: 32px;
}
#adminMediaLibrary .mlib-ov-btn.mlib-ov-copy i,
.mlib-scope .mlib-ov-btn.mlib-ov-copy i {
  font-size: 17px;
}
#adminMediaLibrary .mlib-copied,
.mlib-scope .mlib-copied {
  color: var(--bs-success) !important;
  animation: mlibCopyPop 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
#adminMediaLibrary .mlib-caption,
.mlib-scope .mlib-caption {
  padding: 8px 10px 10px;
}
#adminMediaLibrary .mlib-caption .mlib-name,
.mlib-scope .mlib-caption .mlib-name {
  font-size: 13.5px;
  font-weight: 500;
}
#adminMediaLibrary .mlib-caption .mlib-meta,
.mlib-scope .mlib-caption .mlib-meta {
  font-size: 12px;
}
#adminMediaLibrary,
.mlib-scope {
  /* Anchored delete confirm */
}
#adminMediaLibrary .mlib-confirm,
.mlib-scope .mlib-confirm {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--mlib-surface);
  border: 1px solid var(--bs-border-color);
  animation: mlibFadeIn 120ms ease;
}
#adminMediaLibrary .mlib-confirm span,
.mlib-scope .mlib-confirm span {
  margin-right: auto;
  font-weight: 600;
}
#adminMediaLibrary,
.mlib-scope {
  /* ---------------- Skeletons ---------------- */
}
#adminMediaLibrary .mlib-skel,
.mlib-scope .mlib-skel {
  pointer-events: none;
}
#adminMediaLibrary .mlib-skel .mlib-thumb,
#adminMediaLibrary .mlib-skel .mlib-skel-line,
.mlib-scope .mlib-skel .mlib-thumb,
.mlib-scope .mlib-skel .mlib-skel-line {
  background: linear-gradient(100deg, var(--bs-tertiary-bg, #f1f3f5) 40%, color-mix(in srgb, var(--bs-body-color) 5%, var(--bs-tertiary-bg, #f1f3f5)) 50%, var(--bs-tertiary-bg, #f1f3f5) 60%);
  background-size: 200% 100%;
  animation: mlibShimmer 1.4s linear infinite;
  animation-delay: calc(var(--i, 0) * 90ms);
}
#adminMediaLibrary .mlib-skel .mlib-skel-line,
.mlib-scope .mlib-skel .mlib-skel-line {
  display: block;
  height: 12px;
  border-radius: 6px;
  margin-bottom: 6px;
}
#adminMediaLibrary .mlib-skel .mlib-skel-line-short,
.mlib-scope .mlib-skel .mlib-skel-line-short {
  width: 55%;
  margin-bottom: 0;
}
#adminMediaLibrary,
.mlib-scope {
  /* ---------------- Table view ---------------- */
}
#adminMediaLibrary .mlib-table tbody tr,
.mlib-scope .mlib-table tbody tr {
  cursor: pointer;
}
#adminMediaLibrary .mlib-table .mlib-th-check,
.mlib-scope .mlib-table .mlib-th-check {
  width: 36px;
}
#adminMediaLibrary .mlib-table .mlib-th-thumb,
.mlib-scope .mlib-table .mlib-th-thumb {
  width: 56px;
}
#adminMediaLibrary .mlib-row-thumb,
.mlib-scope .mlib-row-thumb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  background: color-mix(in srgb, var(--t, var(--ml-file)) 10%, var(--mlib-surface));
}
#adminMediaLibrary .mlib-row-thumb .mlib-img,
.mlib-scope .mlib-row-thumb .mlib-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#adminMediaLibrary .mlib-row-thumb .mlib-row-icon,
.mlib-scope .mlib-row-thumb .mlib-row-icon {
  font-size: 17px;
  color: var(--t, var(--ml-file));
}
#adminMediaLibrary .mlib-row-names,
.mlib-scope .mlib-row-names {
  max-width: 320px;
}
#adminMediaLibrary .mlib-table .mlib-check,
.mlib-scope .mlib-table .mlib-check {
  position: static;
  opacity: 1;
  transform: none;
  width: 16px;
  height: 16px;
}
#adminMediaLibrary .mlib-row.mlib-selected,
.mlib-scope .mlib-row.mlib-selected {
  background: color-mix(in srgb, var(--mlib-brand) 6%, transparent);
}
#adminMediaLibrary .mlib-type-pill,
.mlib-scope .mlib-type-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  color: var(--t, var(--ml-file));
  background: color-mix(in srgb, var(--t, var(--ml-file)) 12%, var(--mlib-surface));
}
#adminMediaLibrary .mlib-private-text,
.mlib-scope .mlib-private-text {
  font-weight: 500;
}
#adminMediaLibrary,
.mlib-scope {
  /* ---------------- States ---------------- */
}
#adminMediaLibrary .mlib-empty,
.mlib-scope .mlib-empty {
  padding: 64px 24px;
}
#adminMediaLibrary .mlib-empty-copy,
.mlib-scope .mlib-empty-copy {
  max-width: 420px;
}
#adminMediaLibrary .mlib-empty-art,
.mlib-scope .mlib-empty-art {
  display: flex;
  justify-content: center;
}
#adminMediaLibrary .mlib-empty-art .mlib-empty-plate,
.mlib-scope .mlib-empty-art .mlib-empty-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 88px;
  border-radius: 8px;
  font-size: 26px;
  box-shadow: 0 4px 12px rgba(9, 8, 58, 0.1);
  border: 1px solid var(--bs-border-color);
}
#adminMediaLibrary .mlib-empty-art .mlib-empty-plate[data-plate=image],
.mlib-scope .mlib-empty-art .mlib-empty-plate[data-plate=image] {
  background: color-mix(in srgb, var(--ml-image) 15%, var(--mlib-surface));
  color: var(--ml-image);
  transform: rotate(-6deg) translateX(10px);
}
#adminMediaLibrary .mlib-empty-art .mlib-empty-plate[data-plate=video],
.mlib-scope .mlib-empty-art .mlib-empty-plate[data-plate=video] {
  background: color-mix(in srgb, var(--ml-video) 15%, var(--mlib-surface));
  color: var(--ml-video);
  z-index: 1;
}
#adminMediaLibrary .mlib-empty-art .mlib-empty-plate[data-plate=audio],
.mlib-scope .mlib-empty-art .mlib-empty-plate[data-plate=audio] {
  background: color-mix(in srgb, var(--ml-audio) 15%, var(--mlib-surface));
  color: var(--ml-audio);
  transform: rotate(6deg) translateX(-10px);
}
#adminMediaLibrary .mlib-io-sentinel,
.mlib-scope .mlib-io-sentinel {
  height: 1px;
  width: 100%;
}
#adminMediaLibrary,
.mlib-scope {
  /* ---------------- Selection command bar ---------------- */
}
#adminMediaLibrary .mlib-selectbar,
.mlib-scope .mlib-selectbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 18px;
  border-radius: 999px;
  background: var(--mlib-brand);
  color: #fff;
  box-shadow: 0 8px 24px rgba(9, 8, 58, 0.35);
  animation: mlibBarIn 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
#adminMediaLibrary .mlib-selectbar-btn,
.mlib-scope .mlib-selectbar-btn {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  white-space: nowrap;
}
#adminMediaLibrary .mlib-selectbar-btn:hover,
.mlib-scope .mlib-selectbar-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
#adminMediaLibrary .mlib-selectbar-danger,
.mlib-scope .mlib-selectbar-danger {
  border-color: rgba(255, 130, 140, 0.55);
  color: #ffd2d6;
}
#adminMediaLibrary .mlib-selectbar-danger:hover,
.mlib-scope .mlib-selectbar-danger:hover {
  background: rgba(220, 53, 69, 0.35);
  color: #fff;
}
#adminMediaLibrary .mlib-count-pulse,
.mlib-scope .mlib-count-pulse {
  animation: mlibCountPulse 150ms ease;
  display: inline-block;
}
#adminMediaLibrary,
.mlib-scope {
  /* ---------------- Drop veil ---------------- */
}
#adminMediaLibrary .mlib-dropveil,
.mlib-scope .mlib-dropveil {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 8, 58, 0.06);
  backdrop-filter: none;
  animation: mlibFadeIn 150ms ease;
  pointer-events: none;
}
#adminMediaLibrary .mlib-dropveil-inner,
.mlib-scope .mlib-dropveil-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 64px;
  border: 2px dashed var(--mlib-brand);
  border-radius: 16px;
  background: color-mix(in srgb, var(--mlib-surface) 92%, transparent);
  color: var(--mlib-brand);
  animation: mlibBorderPulse 1.4s ease-in-out infinite;
}
#adminMediaLibrary .mlib-dropveil-inner i,
.mlib-scope .mlib-dropveil-inner i {
  font-size: 40px;
  animation: mlibBob 1.4s ease-in-out infinite;
}

/* ---------------- Edit offcanvas ---------------- */
#mlibEditPanel {
  --mlib-brand: #09083a;
  --mlib-surface: var(--bs-body-bg, #fff);
  --ml-image: #0e7c6b;
  --ml-video: #b3324b;
  --ml-audio: #5b3fa8;
  --ml-document: #a86b1f;
  --ml-font: #1f6fa8;
  --ml-file: #475569;
  width: 400px;
  max-width: 92vw;
  box-shadow: -8px 0 24px rgba(9, 8, 58, 0.12);
}
#mlibEditPanel .mlib-panel-accent {
  height: 3px;
  flex: 0 0 auto;
  background: var(--ml-file);
}
#mlibEditPanel .mlib-panel-accent[data-type=image] {
  background: var(--ml-image);
}
#mlibEditPanel .mlib-panel-accent[data-type=video] {
  background: var(--ml-video);
}
#mlibEditPanel .mlib-panel-accent[data-type=audio] {
  background: var(--ml-audio);
}
#mlibEditPanel .mlib-panel-accent[data-type=document] {
  background: var(--ml-document);
}
#mlibEditPanel .mlib-panel-accent[data-type=font] {
  background: var(--ml-font);
}
#mlibEditPanel .mlib-panel-nav {
  width: 30px;
  height: 30px;
  padding: 0;
}
#mlibEditPanel [data-mlib-panel-body] {
  transition: opacity 120ms ease;
}
#mlibEditPanel [data-mlib-panel-body].mlib-panel-fading {
  opacity: 0.25;
}
#mlibEditPanel .mlib-panel-preview {
  text-align: center;
}
#mlibEditPanel .mlib-panel-preview img,
#mlibEditPanel .mlib-panel-preview video {
  max-width: 100%;
  max-height: 220px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--bs-tertiary-bg, #f1f3f5);
}
#mlibEditPanel .mlib-preview-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  border-radius: 8px;
  background: var(--bs-tertiary-bg, #f1f3f5);
}
#mlibEditPanel .mlib-preview-plate i {
  font-size: 48px;
  color: var(--bs-secondary-color);
}
#mlibEditPanel .mlib-font-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  border-radius: 8px;
  background: var(--bs-tertiary-bg, #f1f3f5);
}
#mlibEditPanel .mlib-font-preview .mlib-font-sample {
  font-size: 56px;
  line-height: 1;
  color: var(--ml-font);
  transition: font-family 150ms ease;
}
#mlibEditPanel .mlib-url-input,
#mlibEditPanel .mlib-mono-input {
  font-size: 12.5px;
}
#mlibEditPanel .mlib-panel-footer {
  background: var(--bs-body-bg);
}

/* ---------------- Dark mode token overrides ---------------- */
[data-bs-theme=dark] #adminMediaLibrary,
[data-bs-theme=dark] #mlibEditPanel {
  --ml-image: #38c7ab;
  --ml-video: #f4738c;
  --ml-audio: #b39bf0;
  --ml-document: #e0ab62;
  --ml-font: #6cb6ec;
  --ml-file: #9fb0c3;
}
[data-bs-theme=dark] #adminMediaLibrary .mlib-dropveil-inner {
  border-color: var(--bs-emphasis-color, #fff);
  color: var(--bs-emphasis-color, #fff);
}

/* ---------------- Keyframes ---------------- */
@keyframes mlibCascade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes mlibArrive {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes mlibHalo {
  0% {
    box-shadow: 0 0 0 0 rgba(9, 8, 58, 0.15);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(9, 8, 58, 0.15);
  }
  100% {
    box-shadow: 0 0 0 6px rgba(9, 8, 58, 0);
  }
}
@keyframes mlibCopyPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes mlibCopyRing {
  0% {
    box-shadow: 0 0 0 1px rgba(25, 135, 84, 0.7);
  }
  100% {
    box-shadow: 0 0 0 1px rgba(25, 135, 84, 0);
  }
}
@keyframes mlibPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}
@keyframes mlibWave {
  0%, 100% {
    transform: scaleY(1);
  }
  40% {
    transform: scaleY(1.6);
  }
  70% {
    transform: scaleY(0.7);
  }
}
@keyframes mlibShimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@keyframes mlibFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mlibBarIn {
  from {
    opacity: 0;
    transform: translate(-50%, 16px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@keyframes mlibCountPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes mlibBob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
@keyframes mlibBorderPulse {
  0%, 100% {
    border-color: rgba(9, 8, 58, 0.4);
  }
  50% {
    border-color: rgb(9, 8, 58);
  }
}
/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  #adminMediaLibrary *,
  #adminMediaLibrary *::before,
  #adminMediaLibrary *::after,
  #mlibEditPanel * {
    animation: none !important;
    transition: none !important;
  }
}
/* ==========================================================================
   Tags + groups (media revamp): tag chips/rail, tag inputs with autocomplete,
   group popovers and the group-view header bar.
   ========================================================================== */
#adminMediaLibrary .mlib-tag-chip,
.mlib-scope .mlib-tag-chip,
#mlibEditPanel .mlib-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid color-mix(in srgb, var(--mlib-brand, #09083a) 25%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--mlib-brand, #09083a) 6%, var(--mlib-surface, #fff));
  color: var(--mlib-brand, #09083a);
  font-size: 0.78rem;
  line-height: 1.2;
  padding: 0.15rem 0.6rem;
  max-width: 100%;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
#adminMediaLibrary .mlib-tag-chip:hover,
.mlib-scope .mlib-tag-chip:hover,
#mlibEditPanel .mlib-tag-chip:hover {
  background: color-mix(in srgb, var(--mlib-brand, #09083a) 14%, var(--mlib-surface, #fff));
}
#adminMediaLibrary .mlib-tag-chip.active,
.mlib-scope .mlib-tag-chip.active,
#mlibEditPanel .mlib-tag-chip.active {
  background: var(--mlib-brand, #09083a);
  border-color: var(--mlib-brand, #09083a);
  color: #fff;
}
#adminMediaLibrary .mlib-tag-chip-sm,
.mlib-scope .mlib-tag-chip-sm,
#mlibEditPanel .mlib-tag-chip-sm {
  font-size: 0.7rem;
  padding: 0.05rem 0.45rem;
}
#adminMediaLibrary .mlib-tag-chip-static,
.mlib-scope .mlib-tag-chip-static,
#mlibEditPanel .mlib-tag-chip-static {
  cursor: default;
}
#adminMediaLibrary .mlib-tag-x,
.mlib-scope .mlib-tag-x,
#mlibEditPanel .mlib-tag-x {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  margin-left: 0.1rem;
  cursor: pointer;
  opacity: 0.6;
}
#adminMediaLibrary .mlib-tag-x:hover,
.mlib-scope .mlib-tag-x:hover,
#mlibEditPanel .mlib-tag-x:hover {
  opacity: 1;
}
#adminMediaLibrary .mlib-taginput,
.mlib-scope .mlib-taginput,
#mlibEditPanel .mlib-taginput {
  position: relative;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.5rem;
  background: var(--mlib-surface, #fff);
  padding: 0.3rem 0.5rem;
}
#adminMediaLibrary .mlib-taginput:focus-within,
.mlib-scope .mlib-taginput:focus-within,
#mlibEditPanel .mlib-taginput:focus-within {
  border-color: color-mix(in srgb, var(--mlib-brand, #09083a) 55%, transparent);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--mlib-brand, #09083a) 15%, transparent);
}
#adminMediaLibrary .mlib-taginput-field,
.mlib-scope .mlib-taginput-field,
#mlibEditPanel .mlib-taginput-field {
  border: 0;
  outline: 0;
  background: transparent;
  flex: 1 1 8ch;
  min-width: 8ch;
  font-size: 0.85rem;
  padding: 0.15rem 0.1rem;
  color: inherit;
}
#adminMediaLibrary .mlib-tag-suggest,
.mlib-scope .mlib-tag-suggest,
#mlibEditPanel .mlib-tag-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1090;
  background: var(--mlib-surface, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
}
#adminMediaLibrary .mlib-tag-suggest-item,
.mlib-scope .mlib-tag-suggest-item,
#mlibEditPanel .mlib-tag-suggest-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 0.85rem;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
}
#adminMediaLibrary .mlib-tag-suggest-item:hover, #adminMediaLibrary .mlib-tag-suggest-item.active,
.mlib-scope .mlib-tag-suggest-item:hover,
.mlib-scope .mlib-tag-suggest-item.active,
#mlibEditPanel .mlib-tag-suggest-item:hover,
#mlibEditPanel .mlib-tag-suggest-item.active {
  background: color-mix(in srgb, var(--mlib-brand, #09083a) 8%, var(--mlib-surface, #fff));
}

#adminMediaLibrary .mlib-tagrail .mlib-tag-chip,
.mlib-scope .mlib-tagrail .mlib-tag-chip {
  margin-bottom: 0.1rem;
}
#adminMediaLibrary .mlib-tile-tags,
.mlib-scope .mlib-tile-tags {
  margin-top: 0.15rem;
  display: flex !important;
  flex-wrap: nowrap;
  gap: 0.25rem;
  overflow: hidden;
}
#adminMediaLibrary .mlib-tile-tags:empty,
.mlib-scope .mlib-tile-tags:empty {
  display: none !important;
}
#adminMediaLibrary .mlib-tag-more,
.mlib-scope .mlib-tag-more {
  flex: 0 0 auto;
}
#adminMediaLibrary .mlib-pop,
.mlib-scope .mlib-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1091;
  width: min(320px, 90vw);
  background: var(--mlib-surface, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.75rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16);
}
#adminMediaLibrary .mlib-pop-up,
.mlib-scope .mlib-pop-up {
  top: auto;
  bottom: calc(100% + 10px);
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}
#adminMediaLibrary,
.mlib-scope {
  /* On phones the Groups button sits in a wrapped toolbar row near the left
     edge, so anchoring a 320px panel with `right: 0` pushed its left edge off
     screen (measured -141px at 390px wide) where it was clipped, not
     scrollable. Below `sm`, anchor to the viewport instead of the button so it
     can never overflow; `bottom` clears the fixed mobile tab bar. */
}
@media (max-width: 575.98px) {
  #adminMediaLibrary .mlib-pop,
  #adminMediaLibrary .mlib-pop.mlib-pop-up,
  .mlib-scope .mlib-pop,
  .mlib-scope .mlib-pop.mlib-pop-up {
    position: fixed;
    inset: auto 0.75rem calc(5rem + env(safe-area-inset-bottom, 0px)) 0.75rem;
    width: auto;
    max-width: none;
    max-height: 60vh;
    overflow-y: auto;
    transform: none;
  }
}
#adminMediaLibrary .mlib-pop-list,
.mlib-scope .mlib-pop-list {
  max-height: 240px;
  overflow-y: auto;
  padding: 0.25rem 0;
}
#adminMediaLibrary .mlib-pop-item,
.mlib-scope .mlib-pop-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 0.88rem;
  padding: 0.45rem 1rem;
  cursor: pointer;
}
#adminMediaLibrary .mlib-pop-item:hover,
.mlib-scope .mlib-pop-item:hover {
  background: color-mix(in srgb, var(--mlib-brand) 8%, var(--mlib-surface));
}
#adminMediaLibrary .mlib-groupbar,
.mlib-scope .mlib-groupbar {
  border: 1px solid color-mix(in srgb, var(--mlib-brand) 22%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--mlib-brand) 5%, var(--mlib-surface));
}
#adminMediaLibrary .mlib-groupbar .bi-collection,
.mlib-scope .mlib-groupbar .bi-collection {
  color: var(--mlib-brand);
}
#adminMediaLibrary .mlib-groupbar-rename,
.mlib-scope .mlib-groupbar-rename {
  max-width: 320px;
}
#adminMediaLibrary .mlib-queue .mlib-taginput,
.mlib-scope .mlib-queue .mlib-taginput {
  padding: 0.15rem 0.4rem;
}



/* demo-persona-bar.css */
.demo-persona-bar {
  z-index: 1020 !important;
}

@media (max-width: 991.98px) {
  .demo-persona-bar {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 1rem) !important;
  }
}



/* dyn-spreadsheet.css */
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
.dyn-spreadsheet-toolbar .dyn-spreadsheet-refresh-calculations-button {
  min-width: 8.5rem;
}
.dyn-spreadsheet-toolbar .dyn-spreadsheet-column-button {
  min-width: 8.5rem;
}
.dyn-spreadsheet-toolbar .dyn-spreadsheet-column-menu {
  min-width: 15rem;
  max-height: 20rem;
  overflow-y: auto;
}
.dyn-spreadsheet-toolbar .dyn-spreadsheet-column-hidden-count {
  min-width: 1.35rem;
}
.dyn-spreadsheet-toolbar .dyn-spreadsheet-column-option:last-child {
  margin-bottom: 0 !important;
}

.dyn-spreadsheet--headerless > thead {
  display: none;
}

.dyn-spreadsheet-row--helper {
  display: none;
}

.dyn-spreadsheet {
  width: 100%;
  position: relative;
  border-collapse: collapse;
  font-family: "Ubuntu Mono", monospace;
}
.dyn-spreadsheet th.dyn-spreadsheet-column-hidden,
.dyn-spreadsheet td.dyn-spreadsheet-column-hidden {
  display: none !important;
}
.dyn-spreadsheet th {
  background-color: #666666;
  color: white;
  font-weight: 400;
  padding: 0.5rem;
}
.dyn-spreadsheet th label {
  font-variation-settings: "wdth" 80;
}
.dyn-spreadsheet td:has(.cellButtons) {
  padding-right: 1rem;
}
.dyn-spreadsheet td {
  min-width: 80px;
  padding: 0.5rem;
  position: relative;
}
.dyn-spreadsheet td label {
  vertical-align: super;
  font-weight: normal;
  font-variation-settings: "wdth" 80;
}
.dyn-spreadsheet td input {
  width: 100%;
  border-radius: 0;
  border: 1px solid var(--border-dark);
  font-family: "Ubuntu Mono", monospace;
  transition: width 0.3s ease-out;
}
.dyn-spreadsheet td input.negative {
  border: 2px solid var(--bs-danger);
  color: var(--bs-danger);
}
.dyn-spreadsheet td input[type=number] {
  text-align: right;
}
.dyn-spreadsheet td input {
  /* Chrome, Safari, Edge, Opera */
}
.dyn-spreadsheet td input::-webkit-outer-spin-button, .dyn-spreadsheet td input::-webkit-inner-spin-button {
  margin-left: 0.5rem;
}
.dyn-spreadsheet td .cellContents {
  display: flex;
  align-items: center;
}
.dyn-spreadsheet td .cellButtons {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  width: 25%;
  width: 0;
  display: inline-block;
  transform: translateY(-50%);
  overflow: hidden;
  transition: width 0.3s ease-out;
}
.dyn-spreadsheet td .cellButtons .btn {
  margin: 0;
  padding: 0;
  border-radius: 0;
  border: 0;
  background-color: transparent;
  font-size: 1rem;
  align-self: center;
}
.dyn-spreadsheet td .cellButtons .btn:hover {
  background-color: transparent;
}
.dyn-spreadsheet td .cellButtons i {
  display: inline-block;
  max-width: 50%;
  max-height: 50%;
  color: var(--secondary);
  opacity: 0.35;
}
.dyn-spreadsheet td .cellButtons i:hover {
  opacity: 1;
}
.dyn-spreadsheet td .cellButtons .spreadsheet-selected-indicator {
  display: none;
  pointer-events: none;
}
.dyn-spreadsheet td .cellButtons .spreadsheet-selected-indicator i {
  color: black;
  opacity: 1;
}
.dyn-spreadsheet td.potentially-selectable:hover input[data-enable_custom_formulas="1"]:not([disabled=true]) {
  width: calc(100% - 1.5rem);
}
.dyn-spreadsheet td.potentially-selectable:hover input[data-enable_custom_formulas="1"]:not([disabled=true]) ~ .cellButtons {
  width: 2rem;
}
.dyn-spreadsheet td.selectable:hover, .dyn-spreadsheet td.selectable.selected {
  background-color: var(--highlight) !important;
}
.dyn-spreadsheet td.selectable:hover input, .dyn-spreadsheet td.selectable.selected input {
  width: calc(100% - 1.5rem);
}
.dyn-spreadsheet td.selectable:hover .cellButtons, .dyn-spreadsheet td.selectable.selected .cellButtons {
  width: 2rem;
}
.dyn-spreadsheet td.selectable:hover .spreadsheet-selected-indicator, .dyn-spreadsheet td.selectable.selected .spreadsheet-selected-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dyn-spreadsheet td.selectable.selected input {
  width: calc(100% - 1.5rem);
}
.dyn-spreadsheet td.selectable.selected-loops {
  background-color: var(--bs-danger) !important;
}
.dyn-spreadsheet td.selectable.main-selected .spreadsheet-selected-indicator {
  display: none;
}
.dyn-spreadsheet td.selectable.main-selected input {
  width: calc(100% - 1.5rem);
}
.dyn-spreadsheet td.selectable.main-selected .cellButtons {
  width: 2rem;
}
.dyn-spreadsheet td.selectable.main-selected .cellButtons .currentlyEditing {
  color: grey;
}
.dyn-spreadsheet td.selectable.main-selected .cellButtons .currentlyEditing:hover {
  color: white;
}
.dyn-spreadsheet td.selectable.main-selected {
  background-color: var(--success) !important;
}
.dyn-spreadsheet tr {
  position: relative;
}
.dyn-spreadsheet tr:nth-child(odd of :not([hidden])) {
  background-color: #e6f7ff;
}
.dyn-spreadsheet tr:nth-child(odd of :not([hidden])) td.custom-formula {
  background-color: #ccefff;
}
.dyn-spreadsheet tr:nth-child(even of :not([hidden])) {
  background-color: #ffffff;
}
.dyn-spreadsheet tr:nth-child(even of :not([hidden])) td.custom-formula {
  background-color: #e5e5e5;
}
.dyn-spreadsheet tr td.dyn-spreadsheet-cell--formula-problem {
  box-shadow: inset 0 0 0 2px var(--bs-warning);
}
.dyn-spreadsheet tr td.dyn-spreadsheet-cell--circular {
  box-shadow: inset 0 0 0 2px var(--bs-danger);
}
.dyn-spreadsheet tr .dyn-spreadsheet-locked-cell {
  background-color: transparent;
  cursor: default;
  padding-right: 1rem;
}
.dyn-spreadsheet tr .dyn-spreadsheet-locked-cell input,
.dyn-spreadsheet tr .dyn-spreadsheet-locked-cell textarea {
  background-color: rgba(239, 239, 239, 0.3);
  color: rgb(84, 84, 84);
  cursor: default;
  pointer-events: none;
}
.dyn-spreadsheet tr .dyn-spreadsheet-locked-cell textarea {
  width: 100%;
  height: 28px;
  padding: 1px 2px;
  border: 1px solid var(--border-dark);
  border-radius: 0;
  font-family: "Ubuntu Mono", monospace;
  resize: none;
  overflow: hidden;
}
.dyn-spreadsheet tr .dyn-spreadsheet-locked-cell.dyn-spreadsheet-row-name-cell input,
.dyn-spreadsheet tr .dyn-spreadsheet-locked-cell.dyn-spreadsheet-row-name-cell textarea {
  height: 24px;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: rgb(51, 51, 51);
  font-variation-settings: "wdth" 80;
}
.dyn-spreadsheet tr .undo-remove-row-btn {
  display: none;
}
.dyn-spreadsheet tr.queued-for-removal .undo-remove-row-btn {
  display: block;
  position: absolute;
  inset: 0;
  height: fit-content;
  margin: auto auto;
  width: fit-content;
  opacity: 0;
  z-index: 1001;
  transition: all 0.3s ease-out;
  transform-origin: top left;
}
.dyn-spreadsheet tr.queued-for-removal.visible {
  left: 0px;
}
.dyn-spreadsheet tr.queued-for-removal.visible .undo-remove-row-btn {
  opacity: 1;
  z-index: 1001;
}
.dyn-spreadsheet .row-overlay {
  position: absolute;
  background: rgb(255, 0, 0);
  color: white;
  pointer-events: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  z-index: 1000;
  transition: all 0.3s ease-out;
  transform-origin: top left;
}
.dyn-spreadsheet .row-overlay .row-overlay-countdown {
  font-weight: 700;
}
.dyn-spreadsheet .row-overlay.visible {
  left: 0 !important;
}
.dyn-spreadsheet .dyn-spreadsheet-total label {
  font-size: 1.25rem;
  font-variation-settings: "wdth" 100;
  font-weight: 700;
}
.dyn-spreadsheet td:has(.cellContents .default-calculation-indicator) {
  position: relative;
}
.dyn-spreadsheet td:has(.cellContents .default-calculation-indicator) .default-calculation-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: help;
  z-index: 3;
  overflow: hidden;
}
.dyn-spreadsheet td:has(.cellContents .default-calculation-indicator) .default-calculation-indicator::before {
  content: "";
  background-color: #22b4ee;
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
  transform: rotate(45deg);
}
.dyn-spreadsheet td:has(.cellContents .default-calculation-indicator) .default-calculation-indicator:focus-visible {
  outline: 2px solid rgba(34, 180, 238, 0.45);
  outline-offset: 1px;
}
.dyn-spreadsheet td:has(.cellContents .default-calculation-indicator) .default-calculation-indicator:hover::before,
.dyn-spreadsheet td:has(.cellContents .default-calculation-indicator) .default-calculation-indicator:focus-visible::before {
  background-color: #1697cd;
}
.dyn-spreadsheet td:has(.cellContents .default-calculation-indicator) .default-calculation-indicator.is-custom-calculation::before {
  background-color: var(--bs-warning);
}
.dyn-spreadsheet td:has(.cellContents .default-calculation-indicator) .default-calculation-indicator.is-custom-calculation:hover::before,
.dyn-spreadsheet td:has(.cellContents .default-calculation-indicator) .default-calculation-indicator.is-custom-calculation:focus-visible::before {
  background-color: #d39e00;
}
.dyn-spreadsheet td:has(.cellContents .default-calculation-indicator) .default-calculation-indicator.is-manual-override::before {
  background-color: var(--bs-success);
}
.dyn-spreadsheet td:has(.cellContents .default-calculation-indicator) .default-calculation-indicator.is-manual-override:hover::before,
.dyn-spreadsheet td:has(.cellContents .default-calculation-indicator) .default-calculation-indicator.is-manual-override:focus-visible::before {
  background-color: #146c43;
}
.dyn-spreadsheet td:has(.cellContents .default-calculation-indicator) .default-calculation-indicator::after {
  position: absolute;
  inset: 0;
  content: "";
}

.dyn-spreadsheet-group .module-section-header {
  padding: 0;
}
.dyn-spreadsheet-group .multi-collapse.show {
  margin-bottom: 1rem;
}
.dyn-spreadsheet-group .entire-module:nth-child(odd).entire-module-colored {
  background-color: #e6f7ff;
}
.dyn-spreadsheet-group .entire-module:nth-child(even).entire-module-colored {
  background-color: #ffffff;
}

.spreadsheet-toolbar {
  display: flex;
  gap: 0;
}

.spreadsheet-toolbar-btn {
  border: 1px solid #308478;
  color: #308478;
  background-color: transparent;
  font-weight: 500;
}
.spreadsheet-toolbar-btn.spreadsheet-toolbar-btn--warning {
  border-color: #ff7e80;
  color: #ff7e80;
}

.spreadsheet-instructions-menu {
  min-width: 375px;
  max-width: 425px;
}

.spreadsheet-default-calc-text {
  color: #22b4ee;
}

.spreadsheet-title-row {
  margin-top: -6rem;
}

.spreadsheet-calc-info-icon {
  cursor: pointer;
}

.spreadsheet-equation-container {
  min-height: 50px;
}

.spreadsheet-calculation-options {
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
}

.tenancy-option[data-detail]::after {
  content: " · " attr(data-detail);
  opacity: 0.6;
  font-size: 0.85em;
}

.tenancy-new-button {
  display: none;
  position: absolute;
  top: 50%;
  right: 0.25rem;
  transform: translateY(-50%);
  z-index: 2;
  padding: 0 0.35rem;
  line-height: 1.4;
}

.cellContents:hover .tenancy-new-button,
.cellContents:focus-within .tenancy-new-button {
  display: inline-flex;
}



/* generic_contests.css */
/* ==========================================
   Contest Details Group
   ========================================== */
.contest-details-group.form-group-wrapper {
  background: #fff;
  border: 1px solid #ddd;
  border-left: 4px solid var(--contest-group-accent, #ff7e80);
  border-radius: var(--bs-border-radius, 8px);
  padding: 2rem 2.25rem;
}
.contest-details-group.form-group-wrapper .form-group-title {
  color: var(--contest-group-accent-text, #475569);
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.contest-details-group.form-group-wrapper .form-group-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* top full-width input */
}
.contest-details-group.form-group-wrapper .form-group-inner .contest-name-field {
  flex: 1 1 100%;
}
.contest-details-group.form-group-wrapper .form-group-inner {
  /* bottom row layout */
}
.contest-details-group.form-group-wrapper .form-group-inner .contest-image-field {
  flex: 1 1 45%;
  min-width: 320px;
}
.contest-details-group.form-group-wrapper .form-group-inner .contest-image-field .upload-area {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contest-details-group.form-group-wrapper .form-group-inner .contest-desc-field {
  flex: 1 1 50%;
  min-width: 320px;
}
.contest-details-group.form-group-wrapper .form-group-inner .contest-desc-field textarea.form-control {
  min-height: 160px;
  resize: vertical;
}
.contest-details-group.form-group-wrapper label.form-label {
  font-weight: 600;
  color: #374955;
}
.contest-details-group.form-group-wrapper > small.text-muted,
.contest-details-group.form-group-wrapper .text-muted.small,
.contest-details-group.form-group-wrapper p.text-muted.small {
  display: block;
  background: var(--contest-group-accent-soft, rgb(255, 242.1, 242.3));
  border-left: 3px solid var(--contest-group-accent, #ff7e80);
  border-radius: 0 var(--bs-border-radius, 6px) var(--bs-border-radius, 6px) 0;
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
  color: var(--contest-group-accent-text, #475569);
  font-weight: 500;
  line-height: 1.5;
}
.contest-details-group.form-group-wrapper .form-control,
.contest-details-group.form-group-wrapper textarea.form-control {
  border-radius: var(--bs-border-radius, 6px);
  font-size: 1rem;
  padding: 0.6rem 0.75rem;
  width: 100%;
}

/* ==========================================
   Contest Dates Group (special field rules)
   ========================================== */
.contest-dates-group.form-group-duplicate .form-control[type=datetime-local] {
  font-size: 0.95rem;
  max-width: 100%;
  border-radius: var(--bs-border-radius, 6px);
}

/* ==========================================
   Global spacing & consistency
   ========================================== */
.contest-multiform {
  --contest-group-accent: #ff7e80;
  --contest-group-accent-text: rgb(199, 111.16, 115.96);
  --contest-group-accent-soft: rgb(255, 242.1, 242.3);
  --contest-group-accent-soft-border: rgb(233.25, 205.5, 212);
}
.contest-multiform .form-page[data-page] {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.contest-multiform .form-page > *:nth-child(12n+1) {
  --contest-group-accent: #ff7e80;
  --contest-group-accent-text: rgb(199, 111.16, 115.96);
  --contest-group-accent-soft: rgb(255, 242.1, 242.3);
  --contest-group-accent-soft-border: rgb(233.25, 205.5, 212);
}
.contest-multiform .form-page > *:nth-child(12n+2) {
  --contest-group-accent: #308478;
  --contest-group-accent-text: rgb(49.96, 115.48, 110.2);
  --contest-group-accent-soft: rgb(234.3, 242.7, 241.5);
  --contest-group-accent-soft-border: rgb(181.5, 207, 210);
}
.contest-multiform .form-page > *:nth-child(12n+3) {
  --contest-group-accent: #4a90e2;
  --contest-group-accent-text: rgb(68.68, 124.12, 186.52);
  --contest-group-accent-soft: rgb(236.9, 243.9, 252.1);
  --contest-group-accent-soft-border: rgb(188, 210, 236.5);
}
.contest-multiform .form-page > *:nth-child(12n+4) {
  --contest-group-accent: #ffa64c;
  --contest-group-accent-text: rgb(199, 139.96, 78.52);
  --contest-group-accent-soft: rgb(255, 246.1, 237.1);
  --contest-group-accent-soft-border: rgb(233.25, 215.5, 199);
}
.contest-multiform .form-page > *:nth-child(12n+5) {
  --contest-group-accent: #6c63ff;
  --contest-group-accent-text: rgb(93.16, 91.72, 207.4);
  --contest-group-accent-soft: rgb(240.3, 239.4, 255);
  --contest-group-accent-soft-border: rgb(196.5, 198.75, 243.75);
}
.contest-multiform .form-page > *:nth-child(12n+6) {
  --contest-group-accent: #3bb273;
  --contest-group-accent-text: rgb(57.88, 148.6, 106.6);
  --contest-group-accent-soft: rgb(235.4, 247.3, 241);
  --contest-group-accent-soft-border: rgb(184.25, 218.5, 208.75);
}
.contest-multiform .form-page > *:nth-child(12n+7) {
  --contest-group-accent: #d96c75;
  --contest-group-accent-text: rgb(171.64, 98.2, 108.04);
  --contest-group-accent-soft: rgb(251.2, 240.3, 241.2);
  --contest-group-accent-soft-border: rgb(223.75, 201, 209.25);
}
.contest-multiform .form-page > *:nth-child(12n+8) {
  --contest-group-accent: #5b8def;
  --contest-group-accent-text: rgb(80.92, 121.96, 195.88);
  --contest-group-accent-soft: rgb(238.6, 243.6, 253.4);
  --contest-group-accent-soft-border: rgb(192.25, 209.25, 239.75);
}
.contest-multiform .form-page > *:nth-child(12n+9) {
  --contest-group-accent: #c58a2b;
  --contest-group-accent-text: rgb(157.24, 119.8, 54.76);
  --contest-group-accent-soft: rgb(249.2, 243.3, 233.8);
  --contest-group-accent-soft-border: rgb(218.75, 208.5, 190.75);
}
.contest-multiform .form-page > *:nth-child(12n+10) {
  --contest-group-accent: #7d8597;
  --contest-group-accent-text: rgb(105.4, 116.2, 132.52);
  --contest-group-accent-soft: rgb(242, 242.8, 244.6);
  --contest-group-accent-soft-border: rgb(200.75, 207.25, 217.75);
}
.contest-multiform .form-page > *:nth-child(12n+11) {
  --contest-group-accent: #e76f51;
  --contest-group-accent-text: rgb(181.72, 100.36, 82.12);
  --contest-group-accent-soft: rgb(252.6, 240.6, 237.6);
  --contest-group-accent-soft-border: rgb(227.25, 201.75, 200.25);
}
.contest-multiform .form-page > *:nth-child(12n+12) {
  --contest-group-accent: #2a9d8f;
  --contest-group-accent-text: rgb(45.64, 133.48, 126.76);
  --contest-group-accent-soft: rgb(233.7, 245.2, 243.8);
  --contest-group-accent-soft-border: rgb(180, 213.25, 215.75);
}
.contest-multiform .form-control,
.contest-multiform textarea.form-control {
  border-radius: var(--bs-border-radius, 6px);
}
.contest-multiform .form-group-wrapper + .form-group-wrapper {
  margin-top: 1.25rem;
}

/* ==========================================
   Entry Fields Group (fieldset version)
   ========================================== */
.entry-fields-group.form-group-duplicate {
  background: #fff;
  border: 1px solid #ddd;
  border-left: 4px solid var(--contest-group-accent, #ff7e80);
  border-radius: var(--bs-border-radius, 8px);
  margin-bottom: 2rem;
}
.entry-fields-group.form-group-duplicate legend {
  color: var(--contest-group-accent-text, #475569);
  font-weight: 700;
  margin-bottom: 1rem;
}
.entry-fields-group.form-group-duplicate {
  /* each checkbox item */
}
.entry-fields-group.form-group-duplicate > .mb-3.row {
  flex: 1 1 calc(33.333% - 2rem);
  max-width: calc(33.333% - 2rem);
  min-width: 260px;
  margin-bottom: 0 !important;
  display: flex;
  align-items: center;
  padding: 0.25rem 0;
  /* hide duplicate top label */
}
.entry-fields-group.form-group-duplicate > .mb-3.row .form-label {
  display: none;
}
.entry-fields-group.form-group-duplicate > .mb-3.row {
  /* checkbox + label inline */
}
.entry-fields-group.form-group-duplicate > .mb-3.row .form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.entry-fields-group.form-group-duplicate > .mb-3.row .form-check .form-check-input {
  border: 2px solid var(--contest-group-accent, #ff7e80);
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.entry-fields-group.form-group-duplicate > .mb-3.row .form-check .form-check-input:checked {
  background-color: var(--contest-group-accent, #ff7e80);
  border-color: var(--contest-group-accent, #ff7e80);
}
.entry-fields-group.form-group-duplicate > .mb-3.row .form-check .form-check-label {
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
}
.entry-fields-group.form-group-duplicate > .mb-3.row .form-check .form-check-label:hover {
  color: #374955;
}

/* ==========================================
   Contest Form Builder
   ========================================== */
.contest-multiform .form-page[data-page="4"]:not(.d-none) .entry-fields-group {
  border: none !important;
  padding: 0 !important;
  background: transparent;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .entry-fields-group > legend {
  color: var(--contest-group-accent-text, #475569);
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-source-pill:not(.used) {
  border-color: #93c5fd !important;
  background: #f0f7ff !important;
  color: #1e40af;
  font-weight: 600;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-source-pill:not(.used):hover {
  background: #dbeafe !important;
  border-color: #3b82f6 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2);
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-preview-wrapper:empty::after,
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-preview-wrapper:not(:has(.masonry-field))::after {
  content: "Click fields on the left to add them here";
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  color: #94a3b8;
  font-size: 0.85rem;
  font-style: italic;
  text-align: center;
  padding: 20px;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-preview-wrapper {
  border: 2px dashed #cbd5e1;
  border-radius: var(--bs-border-radius, 10px);
  padding: 16px;
  min-height: 300px;
  background: #fffbeb;
  border-color: #fbbf24;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-preview-wrapper:has(.masonry-field) {
  background: #fafbfc;
  border-color: #cbd5e1;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-live-preview {
  border-color: #e2e8f0 !important;
  background: #fff !important;
  padding: 0;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-live-preview > div {
  padding: 24px;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-source-pill {
  margin: 0 !important;
  text-align: center;
  padding: 8px 10px !important;
  font-size: 1rem;
  border: 1px solid #d1d5db !important;
  border-radius: var(--bs-border-radius, 6px) !important;
  background: #fff !important;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-source-pill:hover:not(.used) {
  border-color: #818cf8 !important;
  background: #eef2ff !important;
  color: #4338ca;
  box-shadow: 0 1px 4px rgba(99, 102, 241, 0.15);
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-source-pill.used {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8;
  cursor: default;
  opacity: 0.6;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-source-pill.used .pill-label {
  text-decoration: line-through;
  text-decoration-color: #cbd5e1;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .form-group-wrapper[data-group-label="Custom Question or Field"] {
  max-width: 100%;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .custom-questions-group {
  background: #fafbfc;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid var(--contest-group-accent, #ff7e80) !important;
  border-radius: var(--bs-border-radius, 10px);
  padding: 16px 18px !important;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .custom-questions-group > small.text-muted:first-of-type {
  display: block;
  background: var(--contest-group-accent-soft, rgb(255, 242.1, 242.3));
  border-left: 3px solid var(--contest-group-accent, #ff7e80);
  border-radius: 0 var(--bs-border-radius, 6px) var(--bs-border-radius, 6px) 0;
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
  color: var(--contest-group-accent-text, #475569);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 14px;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .custom-questions-group > legend {
  color: var(--contest-group-accent-text, #475569);
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .custom-questions-group .form-label {
  font-size: 1rem;
  font-weight: 600;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .custom-questions-group .form-control,
.contest-multiform .form-page[data-page="4"]:not(.d-none) .custom-questions-group .form-select,
.contest-multiform .form-page[data-page="4"]:not(.d-none) .custom-questions-group .searchable-input {
  font-size: 1rem;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .custom-questions-group .custom-question-actions {
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
  margin-top: 6px;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .custom-questions-group .custom-question-actions .add-to-masonry {
  width: 100%;
  background: #8b5cf6;
  border-color: #8b5cf6;
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  border-radius: var(--bs-border-radius, 6px);
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .custom-questions-group .custom-question-actions .add-to-masonry:hover {
  background: #7c3aed;
  border-color: #7c3aed;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-field {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: var(--bs-border-radius, 8px);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-field:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-field-header {
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  padding: 8px 12px;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-field-body {
  padding: 12px;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-field-translator {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-top: 1px solid #f1f5f9;
  background: #fafbfc;
  gap: 8px;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-view-tabs {
  margin-bottom: 12px;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-view-tabs .masonry-view-tab {
  font-size: 1rem;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: var(--bs-border-radius, 6px);
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-view-tabs .masonry-view-tab.active {
  background: #1e293b;
  color: #fff;
  border-color: #1e293b;
}
@media (max-width: 991px) {
  .contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-builder {
    flex-wrap: wrap !important;
    gap: 1rem;
  }
  .contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-left,
  .contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-right,
  .contest-multiform .form-page[data-page="4"]:not(.d-none) .form-group-wrapper[data-group-label="Custom Question or Field"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
  .contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-field,
  .contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-live-preview .d-flex.flex-wrap.gap-3 > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}
.contest-multiform #form_builder_layout_source .masonry-source-pill:not(.used) {
  border-color: #fcd34d !important;
  background: #fffbeb !important;
  color: #92400e;
  border-style: dashed !important;
}

/* ==========================================
   Contest Setup Groups (fieldset version)
   ========================================== */
.contest-details-group.form-group-duplicate,
.contest-entry-rules-group.form-group-duplicate,
.contest-dates-group.form-group-duplicate,
.contest-draw-verification-group.form-group-duplicate,
.contest-settings-group.form-group-duplicate {
  background: #fafafa;
  border: 1px solid #e1e1e1;
  border-left: 4px solid var(--contest-group-accent, #ff7e80);
  border-radius: var(--bs-border-radius, 8px);
  padding: 1.75rem 2rem;
  margin-bottom: 1.25rem;
}
.contest-details-group.form-group-duplicate legend,
.contest-entry-rules-group.form-group-duplicate legend,
.contest-dates-group.form-group-duplicate legend,
.contest-draw-verification-group.form-group-duplicate legend,
.contest-settings-group.form-group-duplicate legend {
  font-weight: 700;
  color: var(--contest-group-accent-text, #475569);
  margin-bottom: 1rem;
}
.contest-details-group.form-group-duplicate > .mb-3.row,
.contest-entry-rules-group.form-group-duplicate > .mb-3.row,
.contest-dates-group.form-group-duplicate > .mb-3.row,
.contest-draw-verification-group.form-group-duplicate > .mb-3.row,
.contest-settings-group.form-group-duplicate > .mb-3.row {
  margin-bottom: 1.25rem;
}
.contest-details-group.form-group-duplicate .form-control,
.contest-details-group.form-group-duplicate textarea.form-control,
.contest-entry-rules-group.form-group-duplicate .form-control,
.contest-entry-rules-group.form-group-duplicate textarea.form-control,
.contest-dates-group.form-group-duplicate .form-control,
.contest-dates-group.form-group-duplicate textarea.form-control,
.contest-draw-verification-group.form-group-duplicate .form-control,
.contest-draw-verification-group.form-group-duplicate textarea.form-control,
.contest-settings-group.form-group-duplicate .form-control,
.contest-settings-group.form-group-duplicate textarea.form-control {
  border-radius: var(--bs-border-radius, 6px);
}
.contest-details-group.form-group-duplicate label.form-label,
.contest-entry-rules-group.form-group-duplicate label.form-label,
.contest-dates-group.form-group-duplicate label.form-label,
.contest-draw-verification-group.form-group-duplicate label.form-label,
.contest-settings-group.form-group-duplicate label.form-label {
  margin-bottom: 0.35rem;
  font-weight: 600;
}
.contest-details-group.form-group-duplicate > small.text-muted,
.contest-details-group.form-group-duplicate .text-muted.small,
.contest-details-group.form-group-duplicate p.text-muted.small,
.contest-entry-rules-group.form-group-duplicate > small.text-muted,
.contest-entry-rules-group.form-group-duplicate .text-muted.small,
.contest-entry-rules-group.form-group-duplicate p.text-muted.small,
.contest-dates-group.form-group-duplicate > small.text-muted,
.contest-dates-group.form-group-duplicate .text-muted.small,
.contest-dates-group.form-group-duplicate p.text-muted.small,
.contest-draw-verification-group.form-group-duplicate > small.text-muted,
.contest-draw-verification-group.form-group-duplicate .text-muted.small,
.contest-draw-verification-group.form-group-duplicate p.text-muted.small,
.contest-settings-group.form-group-duplicate > small.text-muted,
.contest-settings-group.form-group-duplicate .text-muted.small,
.contest-settings-group.form-group-duplicate p.text-muted.small {
  display: block;
  background: var(--contest-group-accent-soft, rgb(255, 242.1, 242.3));
  border-left: 3px solid var(--contest-group-accent, #ff7e80);
  border-radius: 0 var(--bs-border-radius, 6px) var(--bs-border-radius, 6px) 0;
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
  color: var(--contest-group-accent-text, #475569);
  font-weight: 500;
  line-height: 1.5;
}

.custom-question-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ==========================================
   Contest Entry Detail
   ========================================== */
.contest-entry-detail {
  max-width: 1680px;
  margin: 0 auto;
}
.contest-entry-detail__shell {
  background: linear-gradient(180deg, #f7f8fc 0%, #ffffff 18%);
  border: 1px solid rgba(22, 25, 37, 0.08);
  border-radius: var(--bs-border-radius, 20px);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}
.contest-entry-detail__hero {
  border-bottom: 1px solid rgba(22, 25, 37, 0.08);
  padding: 1.5rem 1.5rem 1.25rem;
  background: radial-gradient(circle at top right, rgba(3, 127, 176, 0.1), transparent 28%), linear-gradient(135deg, rgba(9, 8, 58, 0.04), rgba(3, 127, 176, 0.02));
}
.contest-entry-detail__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--bs-border-radius, 999px);
  background: rgba(9, 8, 58, 0.06);
  color: #09083a;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contest-entry-detail__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
  margin-top: 1rem;
}
.contest-entry-detail__title {
  margin: 0;
  color: #161925;
  font-size: clamp(1.55rem, 2vw, 2.2rem);
  line-height: 1.08;
}
.contest-entry-detail__subtitle {
  margin-top: 0.45rem;
  color: #677184;
  font-size: 0.92rem;
}
.contest-entry-detail__entry-chip {
  min-width: 140px;
  padding: 0.8rem 1rem;
  border-radius: var(--bs-border-radius, 16px);
  border: 1px solid rgba(22, 25, 37, 0.08);
  background: #fff;
  text-align: right;
}
.contest-entry-detail__entry-chip-label {
  color: #7a8194;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contest-entry-detail__entry-chip-value {
  margin-top: 0.25rem;
  color: #161925;
  font-size: 1.2rem;
  font-weight: 700;
}
.contest-entry-detail__content {
  padding: 1.25rem;
}
.contest-entry-detail__panel {
  height: 100%;
  border: 1px solid rgba(22, 25, 37, 0.08);
  border-radius: var(--bs-border-radius, 18px);
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}
.contest-entry-detail__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.85rem;
  border-bottom: 1px solid rgba(22, 25, 37, 0.07);
}
.contest-entry-detail__panel-title {
  margin: 0;
  color: #161925;
  font-size: 1rem;
  font-weight: 700;
}
.contest-entry-detail__panel-subtitle {
  margin: 0.2rem 0 0;
  color: #7a8194;
  font-size: 0.78rem;
}
.contest-entry-detail__panel-body {
  padding: 1rem;
}
.contest-entry-detail__meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.contest-entry-detail__meta-item, .contest-entry-detail__field-item {
  border: 1px solid rgba(22, 25, 37, 0.08);
  border-radius: var(--bs-border-radius, 14px);
  background: #fbfcfe;
}
.contest-entry-detail__meta-item {
  padding: 0.7rem 0.85rem;
}
.contest-entry-detail__meta-label, .contest-entry-detail__field-label {
  display: block;
  margin: 0 0 0.3rem;
  color: #7a8194;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contest-entry-detail__meta-value {
  color: #161925;
  font-size: 0.88rem;
  line-height: 1.35;
  word-break: break-word;
}
.contest-entry-detail__meta-value .text-muted, .contest-entry-detail__field-value .text-muted {
  font-size: inherit;
}
.contest-entry-detail__fields-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.contest-entry-detail__field-item {
  padding: 0.65rem 0.75rem;
}
.contest-entry-detail__field-value {
  color: #161925;
  font-size: 0.84rem;
  line-height: 1.35;
  word-break: break-word;
}
.contest-entry-detail__field-value ul {
  margin-bottom: 0;
  padding-left: 1.1rem;
}
@media (max-width: 1199.98px) {
  .contest-entry-detail__fields-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .contest-entry-detail__hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .contest-entry-detail__entry-chip {
    text-align: left;
  }
}
@media (max-width: 767.98px) {
  .contest-entry-detail__content {
    padding: 1rem;
  }
  .contest-entry-detail__hero {
    padding: 1.15rem 1rem 1rem;
  }
  .contest-entry-detail__meta-grid, .contest-entry-detail__fields-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rebate-thank-you {
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  text-align: center;
  padding: 6rem 1rem;
}
.rebate-thank-you h1 {
  color: #374955;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.rebate-thank-you p.lead {
  color: #374955;
  font-size: 1.25rem;
  font-weight: 500;
  max-width: 700px;
  margin: 0 auto 1.5rem;
}
.rebate-thank-you p.text-muted {
  color: #6c757d;
  font-size: 1rem;
  max-width: 600px;
  margin: 0 auto 2rem;
}
.rebate-thank-you .btn-primary {
  background-color: #ff7e80;
  border: none;
  border-radius: var(--bs-border-radius, 50px);
  font-size: 1.1rem;
  padding: 0.75rem 2.5rem;
  font-weight: 600;
  transition: all 0.25s ease;
}
.rebate-thank-you .btn-primary:hover {
  background-color: rgb(255, 85.2, 87.8325581395);
  transform: translateY(-2px);
}
.rebate-thank-you .btn-primary:active {
  background-color: rgb(255, 49.5, 52.6860465116);
  transform: translateY(0);
}
.rebate-thank-you::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/public/img/rebate-bg-texture.jpg") center/cover no-repeat;
  opacity: 0.05;
  pointer-events: none;
}
@media (max-width: 768px) {
  .rebate-thank-you {
    padding: 4rem 1rem;
  }
  .rebate-thank-you h1 {
    font-size: 2rem;
  }
  .rebate-thank-you p.lead {
    font-size: 1.1rem;
  }
}

.decision-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 2000;
}

.decision-modal.visible {
  opacity: 1;
  pointer-events: all;
}

.decision-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.decision-modal-content {
  position: relative;
  background: #fff;
  padding: 28px 40px;
  border-radius: var(--bs-border-radius, 8px);
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 1;
  font-size: 18px;
  font-weight: 600;
}

.rebate-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 1rem;
}
.rebate-tabs .reason-col {
  display: none;
  white-space: pre-wrap;
  color: #dc3545;
  font-weight: 500;
}
.rebate-tabs .tab-btn {
  background: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: var(--bs-border-radius, 4px);
  padding: 6px 14px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}
.rebate-tabs .tab-btn.active {
  background: #308478;
  border-color: #308478;
  color: #fff;
}
.rebate-tabs .tab-btn:hover {
  background: #80f9c0;
  color: #374955;
}

#contestMultiform .row.mb-3 {
  margin-bottom: 0 !important;
}
#contestMultiform {
  /* remove extra padding resets so columns can use gutter */
}
#contestMultiform .col-md-12.mb-3,
#contestMultiform .col-md-6.mb-3,
#contestMultiform .col-md-3.mb-3,
#contestMultiform .col-12.mb-3 {
  margin-bottom: 0 !important;
}
#contestMultiform .form-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
  font-weight: 500;
}
#contestMultiform .form-control,
#contestMultiform .searchable-input {
  height: 42px;
  padding: 0.45rem 0.75rem;
  font-size: 0.95rem;
  border-radius: var(--bs-border-radius, 4px);
}
#contestMultiform .file-upload-container {
  display: block;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  width: 100%;
}
#contestMultiform .file-upload-container .upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ccc;
  padding: 0.75rem;
  text-align: center;
  border-radius: var(--bs-border-radius, 4px);
  font-size: 0.9rem;
  width: 100%;
}
#contestMultiform .file-upload-container .file-preview-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 0.75rem;
  margin-left: 0;
  margin-right: 0;
  justify-content: center;
}
#contestMultiform .file-upload-container .file-preview-list > .file-item {
  padding-left: 0;
  padding-right: 0;
}
#contestMultiform .file-upload-container .file-preview-list > .file-item.col-4.mx-auto {
  flex: 0 0 100%;
  width: 100%;
  max-width: 20rem;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#contestMultiform .file-upload-container .file-preview-list > .file-item.col-4.mx-auto .card {
  width: 100%;
}
#contestMultiform .form-check {
  display: flex;
  align-items: center;
  margin: 0.5rem 0;
}
#contestMultiform .form-check .form-check-input {
  margin-right: 0.5rem;
  margin-top: 0;
}
#contestMultiform .form-check .form-check-label {
  font-size: 0.9rem;
}
#contestMultiform .row.col-12 .form-check {
  justify-content: flex-start;
  align-self: self-start;
}
#contestMultiform .invalid-feedback {
  margin-top: 0.25rem;
  font-size: 0.8rem;
}
#contestMultiform .form-button--next {
  min-width: 120px;
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
}
#contestMultiform.multiform--final-page .multiform-navigation {
  display: none !important;
}
#contestMultiform .submitbtn-contest {
  width: 100%;
  margin-top: 1.5rem;
}
#contestMultiform .submitbtn-contest__prev {
  white-space: nowrap;
}
#contestMultiform:not(.multiform--has-previous-page) .submitbtn-contest__prev {
  display: none !important;
}
#contestMultiform .submitbtn-contest--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
#contestMultiform .submitbtn-contest--center .submitbtn-contest__prev--link {
  padding: 0;
  font-size: 0.9rem;
  color: #6c757d;
  text-decoration: underline;
}
#contestMultiform .submitbtn-contest--right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}
#contestMultiform .submitbtn-contest--right .submitbtn-contest__submit {
  margin-left: auto;
}
@media (max-width: 575.98px) {
  #contestMultiform .submitbtn-contest--right {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  #contestMultiform .submitbtn-contest--right .submitbtn-contest__submit,
  #contestMultiform .submitbtn-contest--right .submitbtn-contest__prev {
    width: 100%;
  }
}
#contestMultiform .card.p-4 {
  padding: 2rem 1.5rem !important;
}

.contest-form .container {
  padding-left: 0;
  padding-right: 0;
}



/* landing.css */
.navbar.fixed-top {
  position: fixed !important;
}

.page-sidebar {
  flex: 0 0 280px;
  width: 280px;
  transition: flex-basis 0.22s cubic-bezier(0.2, 0, 0, 1), width 0.22s cubic-bezier(0.2, 0, 0, 1);
}
.page-sidebar.collapsed {
  flex-basis: 80px;
  width: 80px;
}
@media (max-width: 767.98px) {
  .page-sidebar {
    flex: 1 1 auto;
    width: 100%;
  }
}

.page-sidebar__inner {
  position: fixed;
  top: 72px;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 280px;
  height: calc(100vh - 72px);
  background: #09083a;
  z-index: 1020;
  transition: flex-basis 0.22s cubic-bezier(0.2, 0, 0, 1), width 0.22s cubic-bezier(0.2, 0, 0, 1);
}
.page-sidebar__inner .page-sidebar__nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.page-sidebar__inner .nav-item {
  width: 100%;
}
.page-sidebar__inner .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.75rem;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 600;
  text-align: start;
  border-radius: 0.375rem;
  color: rgba(255, 255, 255, 0.85);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.page-sidebar__inner .nav-link i {
  margin-right: 0.5rem;
  flex-shrink: 0;
}
.page-sidebar__inner .nav-link:hover {
  background-color: #12114e;
  color: #fff;
  border-radius: 0;
}
.page-sidebar__inner .page-sidebar__toggle {
  flex-shrink: 0;
  width: 100%;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background-color: transparent;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.page-sidebar__inner .page-sidebar__toggle i {
  display: inline-block;
  transition: transform 0.2s ease;
}
.page-sidebar__inner .page-sidebar__toggle:hover {
  background-color: #12114e;
  color: #fff;
}
.page-sidebar__inner .page-sidebar__toggle:focus {
  outline: 2px solid #12114e;
  outline-offset: -2px;
}
.page-sidebar__inner.collapsed {
  width: 80px;
}
.page-sidebar__inner.collapsed .nav-link {
  padding: 0.75rem 0.5rem;
}
.page-sidebar__inner.collapsed .nav-link span {
  display: none;
}
.page-sidebar__inner.collapsed .nav-link i {
  margin-right: 0;
}
.page-sidebar__inner.collapsed .page-sidebar__toggle i {
  transform: rotate(180deg);
}
@media (max-width: 767.98px) {
  .page-sidebar__inner {
    position: static;
    width: 100%;
    height: auto;
  }
  .page-sidebar__inner .page-sidebar__nav {
    overflow-y: visible;
  }
}

.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.hero video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}
.hero .hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}
.hero .hero-content .hero-title {
  font-size: 2.8rem;
  font-weight: 700;
}
.hero .hero-content .hero-title .word {
  opacity: 0;
  display: inline-block;
  margin: 0 0.5rem;
  transform: translateY(30px);
  animation: wordIn 1s forwards;
}
.hero .hero-content .hero-title .word:nth-child(1) {
  animation-delay: 0s;
}
.hero .hero-content .hero-title .word:nth-child(2) {
  animation-delay: 1s;
}
.hero .hero-content .hero-title .word:nth-child(3) {
  animation-delay: 2s;
}
.hero .hero-content p {
  margin: 1rem 0 2rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
}
.hero .hero-content .btn-cta {
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: var(--bs-border-radius, 30px);
}

@keyframes wordIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.news-resources {
  background: #f9fafb;
}
.news-resources .section-header h2 {
  font-size: 2rem;
  color: #222;
}
.news-resources .section-header p {
  font-size: 1rem;
  color: #555;
}

.contest-section {
  background: #f2f1ff url("/assets/images/contest-bg.svg") no-repeat bottom right;
  background-size: cover;
  position: relative;
}
.contest-section .section-header h2 {
  font-size: 2rem;
  color: #222;
}
.contest-section .section-header p {
  font-size: 1rem;
  color: #555;
}
.contest-section .contest-info h4 {
  font-size: 1.25rem;
  color: #ff6600;
  margin-top: 1rem;
}
.contest-section .contest-info p {
  font-size: 1rem;
  color: #333;
  margin-bottom: 1rem;
}
.contest-section .contest-info ul li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: #444;
}
.contest-section .contest-form {
  border: 1px solid #ddd;
}
.contest-section .contest-form .form-label {
  font-size: 0.9rem;
  color: #333;
}
.contest-section .contest-form .form-control {
  border-radius: var(--bs-border-radius, 6px);
}
.contest-section .contest-form .form-control:focus {
  border-color: #ff6600;
  box-shadow: 0 0 0 0.2rem rgba(255, 102, 0, 0.25);
}
.contest-section .contest-form button {
  background: #ff6600;
  border: none;
  border-radius: var(--bs-border-radius, 6px);
  font-weight: bold;
  transition: background-color 0.3s ease;
}
.contest-section .contest-form button:hover {
  background: #e05500;
}



/* nav.css */
/* Keep nav vertical + let collapse be in normal flow */
.navbar-nav.flex-column .collapse {
  position: static;
  width: 100%;
}

/* Make nested items expand full width in a sidebar */
.navbar-nav .nav-item .nav-link {
  display: block;
  width: 100%;
}

#nav-tree-container .pb-tree-node {
  margin-left: 2rem;
}
#nav-tree-container .pb-tree-node .pb-tree-label {
  height: 100%;
}
#nav-tree-container .pb-tree-node .pb-tree-label-inner {
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  flex-direction: row;
}
#nav-tree-container .pb-tree-subnodes {
  margin-left: unset;
}
#nav-tree-container .pb-tree-node-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem;
}
#nav-tree-container .pb-tree-node-actions .btn {
  font-size: 1rem;
}



/* portfolio.css */
.portfolio {
  color: #212529;
}
.portfolio .portfolio-card {
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  color: #212529;
}
.portfolio .portfolio-card .card-header {
  background-color: #f1f3f5;
  border-bottom: 1px solid #dee2e6;
}
.portfolio .portfolio-table,
.portfolio .portfolio-units {
  --bs-table-bg: #ffffff;
  --bs-table-color: #212529;
  --bs-table-border-color: #dee2e6;
  color: #212529;
}
.portfolio .portfolio-unit-column {
  width: 12rem;
}
.portfolio .portfolio-building-name {
  min-width: 12rem;
  max-width: 24rem;
}
.portfolio .portfolio-company-input {
  min-width: 14rem;
}
.portfolio .portfolio-date-input {
  max-width: 11rem;
}
.portfolio .portfolio-cru {
  color: #212529;
}
.portfolio .portfolio-highlight {
  background-color: rgba(48, 132, 120, 0.2);
  border-radius: 0.375rem;
  transition: background-color 0.4s ease;
}
.portfolio .portfolio-picker {
  flex: 1 1 auto;
}
.portfolio .portfolio-picker-menu {
  left: 0;
  margin: 0;
  max-height: 16rem;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 1050;
}
.portfolio .portfolio-picker-menu .list-group-item {
  color: #212529;
  cursor: pointer;
}



/* spreadsheet-template-editor.css */
.spreadsheet-template-editor .spreadsheet-template-section,
.spreadsheet-template-editor .spreadsheet-template-inspector {
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  color: #212529;
}
.spreadsheet-template-editor .spreadsheet-template-section-header {
  background-color: #f1f3f5;
  border-bottom: 1px solid #dee2e6;
  color: #212529;
}
.spreadsheet-template-editor .spreadsheet-template-title {
  color: #212529;
}
.spreadsheet-template-editor .spreadsheet-template-section .card-body {
  background-color: #ffffff;
}
.spreadsheet-template-editor [data-node] {
  cursor: pointer;
}
.spreadsheet-template-editor [data-node]:hover {
  background-color: rgba(48, 132, 120, 0.14);
}
.spreadsheet-template-editor [data-node].is-selected {
  outline: 2px solid #308478;
  outline-offset: -2px;
}
.spreadsheet-template-editor .spreadsheet-template-handle {
  cursor: grab;
  opacity: 0.45;
}
.spreadsheet-template-editor .spreadsheet-template-handle:hover {
  opacity: 1;
}
.spreadsheet-template-editor .spreadsheet-template-inspector {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
.spreadsheet-template-editor .spreadsheet-template-table {
  --bs-table-bg: #ffffff;
  --bs-table-color: #212529;
  --bs-table-border-color: #dee2e6;
  color: #212529;
  font-size: 0.85rem;
}
.spreadsheet-template-editor .spreadsheet-template-fixed,
.spreadsheet-template-editor .spreadsheet-template-column,
.spreadsheet-template-editor .spreadsheet-template-row-label,
.spreadsheet-template-editor .spreadsheet-template-linked {
  background-color: #f1f3f5;
  color: #212529;
  font-weight: 600;
  vertical-align: middle;
}
.spreadsheet-template-editor .spreadsheet-template-row-label {
  font-weight: 500;
  min-width: 12rem;
}
.spreadsheet-template-editor .spreadsheet-template-linked,
.spreadsheet-template-editor .spreadsheet-template-linked-cell {
  background-color: #e3f4fb;
  color: #212529;
  font-style: italic;
  font-weight: 400;
}
.spreadsheet-template-editor .spreadsheet-template-cell {
  background-color: #ffffff;
  color: #212529;
  min-width: 3rem;
}
.spreadsheet-template-editor .spreadsheet-template-cell.has-default {
  background-color: #fff3cd;
}
.spreadsheet-template-editor .spreadsheet-template-row--heading,
.spreadsheet-template-editor .spreadsheet-template-row--banner,
.spreadsheet-template-editor .spreadsheet-template-row--major_total {
  font-weight: 700;
}
.spreadsheet-template-editor .spreadsheet-template-row--label .spreadsheet-template-row-label {
  background-color: #dfe6ea;
}
.spreadsheet-template-editor .spreadsheet-template-row--spacer {
  opacity: 0.5;
}
.spreadsheet-template-editor .spreadsheet-template-row--helper {
  opacity: 0.6;
  font-style: italic;
}
.spreadsheet-template-editor .spreadsheet-template-formula {
  font-family: monospace;
}
.spreadsheet-template-editor .spreadsheet-template-behaviour .form-control,
.spreadsheet-template-editor .spreadsheet-template-behaviour .form-select {
  min-width: 6rem;
}



/* admin-notifications.css */
@charset "UTF-8";
/*
 * /admin/notifications — send to people, a group, or a saved profile.
 *
 * Scoped under #notifSender so it can ride the global admin bundle, same
 * arrangement as points.scss, user-journey.scss and user-segments.scss.
 * Colours come from Bootstrap CSS variables where one exists so the screen
 * follows the admin theme rather than pinning its own.
 */
#notifSender {
  --notif-brand: #b45309;
  --notif-brand-soft: rgba(180, 83, 9, 0.1);
  --notif-send: #e2573b;
  --notif-line: var(--bs-border-color, #dee2e6);
  /* ---------------- Header ---------------- */
}
#notifSender .notif-header-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.85rem;
  font-size: 1.2rem;
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #b45309);
  box-shadow: 0 6px 18px rgba(180, 83, 9, 0.32);
}
#notifSender .notif-subtitle {
  font-size: 0.92rem;
}
#notifSender {
  /* ---------------- Panels ---------------- */
}
#notifSender .notif-panel {
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--notif-line);
  overflow: hidden;
}
#notifSender .notif-panel-head {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--notif-line);
  background: var(--bs-tertiary-bg, #f8f9fa);
  font-size: 0.95rem;
}
#notifSender .notif-tabs .nav-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}
#notifSender .notif-tabs .nav-link.active {
  background: var(--notif-brand);
  color: #fff;
}
#notifSender {
  /* ---------------- People picker ---------------- */
}
#notifSender .notif-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bs-secondary-color);
  pointer-events: none;
}
#notifSender .notif-search-input {
  padding-left: 2.2rem;
}
#notifSender .notif-user-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 15rem;
  overflow-y: auto;
  border: 1px solid var(--notif-line);
  border-radius: 0.6rem;
}
#notifSender .notif-user-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid var(--bs-tertiary-bg, #f1f3f5);
}
#notifSender .notif-user-row:last-child {
  border-bottom: 0;
}
#notifSender .notif-user-row:hover {
  background: var(--notif-brand-soft);
}
#notifSender .notif-user-row:focus-visible {
  outline: 2px solid var(--notif-brand);
  outline-offset: -2px;
}
#notifSender .notif-user-row.is-on .notif-user-action {
  color: var(--notif-brand);
}
#notifSender .notif-user-name {
  font-weight: 600;
  font-size: 0.88rem;
}
#notifSender .notif-user-email {
  font-size: 0.78rem;
  color: var(--bs-secondary-color);
}
#notifSender .notif-user-action {
  margin-left: auto;
  color: var(--bs-secondary-color);
}
#notifSender .notif-user-empty {
  padding: 0.6rem 0.75rem;
}
#notifSender .notif-chosen-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
#notifSender .notif-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem 0.2rem 0.6rem;
  border-radius: 2rem;
  font-size: 0.78rem;
  color: #fff;
  background: var(--notif-brand);
}
#notifSender .notif-chip-x {
  border: 0;
  background: transparent;
  color: #fff;
  line-height: 1;
  font-size: 1rem;
  padding: 0;
  opacity: 0.8;
}
#notifSender .notif-chip-x:hover {
  opacity: 1;
}
#notifSender .notif-count-badge {
  background: var(--notif-brand);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
#notifSender {
  /* ---------------- Resolved audience preview ---------------- */
}
#notifSender .notif-preview {
  padding: 0.85rem 1rem;
  background: var(--notif-brand-soft);
  border: 1px solid rgba(180, 83, 9, 0.22);
}
#notifSender .notif-preview-names {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  max-height: 9rem;
  overflow-y: auto;
}
#notifSender .notif-name-chip {
  font-size: 0.75rem;
  padding: 0.12rem 0.45rem;
  border-radius: 1rem;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--notif-line);
}
#notifSender .notif-name-chip.is-more {
  font-weight: 700;
  color: var(--notif-brand);
}
#notifSender {
  /* ---------------- Compose ---------------- */
}
#notifSender .notif-secondary-btn {
  border: 1px solid var(--notif-brand);
  color: var(--notif-brand);
  background: transparent;
  font-weight: 600;
}
#notifSender .notif-secondary-btn:hover {
  background: var(--notif-brand);
  color: #fff;
}
#notifSender .notif-secondary-btn:disabled {
  opacity: 0.6;
}
#notifSender .notif-send-btn {
  color: #fff;
  background: var(--notif-send);
  border: 0;
  font-weight: 600;
}
#notifSender .notif-send-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  color: #fff;
}
#notifSender .notif-send-btn:disabled {
  opacity: 0.5;
}
#notifSender {
  /* A rough preview of the learner-facing card, so the sender can see the
     shape of what lands rather than guessing from two form fields. */
}
#notifSender .notif-mock {
  padding: 0.85rem 1rem;
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px dashed var(--notif-line);
}
#notifSender .notif-mock-card {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.6rem;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--notif-line);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
#notifSender .notif-mock-icon {
  color: var(--notif-brand);
  font-size: 1.05rem;
  margin-top: 0.1rem;
}
#notifSender .notif-mock-title {
  font-weight: 700;
  font-size: 0.9rem;
}
#notifSender .notif-mock-body {
  font-size: 0.82rem;
  color: var(--bs-secondary-color);
}
#notifSender {
  /* ---------------- History ---------------- */
}
#notifSender .notif-history {
  max-height: 32rem;
  overflow-y: auto;
}
#notifSender .notif-history-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--bs-tertiary-bg, #f1f3f5);
}
#notifSender .notif-history-row:last-child {
  border-bottom: 0;
}
#notifSender .notif-history-icon {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.8rem;
  color: var(--notif-brand);
  background: var(--notif-brand-soft);
}
#notifSender .notif-history-title {
  font-weight: 600;
  font-size: 0.86rem;
}
#notifSender .notif-history-meta {
  font-size: 0.74rem;
  color: var(--bs-secondary-color);
}



/* admin-suggestions.css */
@charset "UTF-8";
/*
 * /admin/suggestions — profile suggestion campaigns.
 *
 * Everything is scoped under #sugScreen so this can ride the global admin
 * bundle without leaking, same arrangement as user-segments.scss and
 * admin-notifications.scss. Colours come from Bootstrap CSS variables
 * wherever one exists so the screen follows the admin theme (including dark
 * mode) rather than pinning its own palette.
 *
 * Mobile: edge padding never exceeds p-2 (0.5rem) and the radius tier runs
 * outer-to-inner rounded-4 panel -> rounded-3 tile -> unrounded control, per
 * the admin spacing rules in CLAUDE.md. Those come from Bootstrap utility
 * classes in the markup; nothing here overrides them.
 */
#sugScreen {
  --sug-brand: #b45309;
  --sug-brand-soft: rgba(180, 83, 9, 0.1);
  --sug-good: #2f9e6f;
  --sug-warn: #b45309;
  --sug-surface: var(--bs-body-bg, #fff);
  --sug-line: var(--bs-border-color, #dee2e6);
  /* ---------------- Header ---------------- */
}
#sugScreen .sug-header-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  color: #fff;
  background: var(--sug-brand);
  font-size: 1.1rem;
}
#sugScreen .sug-subtitle {
  max-width: 60ch;
}
#sugScreen {
  /* ---------------- Panels ---------------- */
}
#sugScreen .sug-panel {
  background: var(--sug-surface);
  border: 1px solid var(--sug-line);
  overflow: hidden;
}
#sugScreen .sug-panel-head {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--sug-line);
  background: var(--bs-tertiary-bg, #f8f9fa);
  color: var(--sug-brand);
}
#sugScreen .sug-count-badge {
  color: #fff;
  background: var(--sug-brand);
  font-variant-numeric: tabular-nums;
}
#sugScreen .sug-empty {
  padding: 0.5rem 0;
}
#sugScreen {
  /* ---------------- Ready to send ---------------- */
}
#sugScreen .sug-ready-group-head {
  color: var(--bs-secondary-color);
}
#sugScreen .sug-ready-item {
  border: 1px solid var(--sug-line);
  background: var(--bs-tertiary-bg, #f8f9fa);
}
#sugScreen .sug-ready-icon {
  color: var(--sug-brand);
  font-size: 1.1rem;
  line-height: 1.4;
  /* A bare inline <i> takes its box from the glyph, which throws the icon
     out of line with the first row of text. */
  display: inline-block;
}
#sugScreen .sug-ready-name {
  font-weight: 600;
}
#sugScreen .sug-ready-note {
  margin-top: 0.15rem;
  font-style: italic;
}
#sugScreen .sug-used {
  color: var(--sug-good);
}
#sugScreen .sug-use-btn {
  flex: 0 0 auto;
  color: #fff;
  background: var(--sug-brand);
  border: 1px solid var(--sug-brand);
  white-space: nowrap;
}
#sugScreen .sug-use-btn:hover {
  filter: brightness(1.08);
  color: #fff;
}
#sugScreen {
  /* ---------------- Campaigns ---------------- */
}
#sugScreen .sug-campaign {
  border: 1px solid var(--sug-line);
  background: var(--bs-tertiary-bg, #f8f9fa);
}
#sugScreen .sug-state {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.5rem;
  border-radius: 1rem;
  color: var(--bs-secondary-color);
  background: var(--bs-secondary-bg, #e9ecef);
  border: 1px solid var(--sug-line);
}
#sugScreen .sug-state.is-scheduled {
  color: #fff;
  background: var(--sug-warn);
  border-color: var(--sug-warn);
}
#sugScreen .sug-state.is-playing {
  color: #fff;
  background: #16a34a;
  border-color: #16a34a;
}
#sugScreen .sug-state.is-paused {
  color: #fff;
  background: #6b7280;
  border-color: #6b7280;
}
#sugScreen .sug-state.is-cancelled {
  color: #fff;
  background: #b91c1c;
  border-color: #b91c1c;
}
#sugScreen .sug-state.is-done {
  color: #fff;
  background: #2563eb;
  border-color: #2563eb;
}
#sugScreen .sug-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  padding: 0.1rem 0.45rem;
  border-radius: 1rem;
  color: var(--bs-secondary-color);
  background: var(--sug-surface);
  border: 1px solid var(--sug-line);
}
#sugScreen .sug-act-group {
  flex: 0 0 auto;
  flex-wrap: wrap;
}
#sugScreen .sug-act-btn {
  color: var(--bs-body-color);
  background: var(--sug-surface);
  border: 1px solid var(--sug-line);
  white-space: nowrap;
}
#sugScreen .sug-act-btn:hover {
  background: var(--bs-secondary-bg, #e9ecef);
}
#sugScreen .sug-act-btn.is-danger {
  color: #b91c1c;
}
#sugScreen {
  /* The grace window. Deliberately loud: it is the one place where a mistake
     is still recoverable, and it disappears on its own. */
}
#sugScreen .sug-grace {
  color: var(--sug-warn);
  background: var(--sug-brand-soft);
  border: 1px solid rgba(180, 83, 9, 0.3);
}
#sugScreen .sug-countdown {
  font-variant-numeric: tabular-nums;
}
#sugScreen .sug-send-now-btn {
  flex: 0 0 auto;
  color: #fff;
  background: var(--sug-good);
  border: 1px solid var(--sug-good);
}
#sugScreen .sug-send-now-btn:hover {
  filter: brightness(1.08);
  color: #fff;
}
#sugScreen .sug-undo-btn {
  flex: 0 0 auto;
  color: #fff;
  background: var(--sug-warn);
  border: 1px solid var(--sug-warn);
}
#sugScreen .sug-undo-btn:hover {
  filter: brightness(1.08);
  color: #fff;
}
#sugScreen .sug-stats {
  align-items: center;
}
#sugScreen {
  /* ---------------- Delivery log ---------------- */
}
#sugScreen .sug-log-table {
  font-size: 0.82rem;
}
#sugScreen .sug-log-table th {
  font-weight: 600;
}
#sugScreen .sug-send-state {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}
#sugScreen .sug-send-state.is-sent {
  color: var(--sug-good);
}
#sugScreen .sug-send-state.is-skipped {
  color: var(--bs-secondary-color);
}
#sugScreen .sug-send-state.is-failed {
  color: #b91c1c;
}
#sugScreen {
  /* ---------------- Compose ---------------- */
}
#sugScreen .sug-compose-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem 0.5rem;
  overflow-y: auto;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}
#sugScreen .sug-compose {
  width: 100%;
  max-width: 44rem;
  margin: auto;
  background: var(--sug-surface);
  border: 1px solid var(--sug-line);
  box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.25);
  overflow: hidden;
}
#sugScreen .sug-compose-context {
  background: var(--sug-brand-soft);
  border: 1px solid rgba(180, 83, 9, 0.25);
}
#sugScreen .sug-compose-sub {
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--sug-line);
}
#sugScreen .sug-compose-foot {
  border-top: 1px solid var(--sug-line);
  background: var(--bs-tertiary-bg, #f8f9fa);
}
#sugScreen .sug-primary-btn {
  color: #fff;
  background: var(--sug-brand);
  border: 1px solid var(--sug-brand);
}
#sugScreen .sug-primary-btn:hover {
  filter: brightness(1.08);
  color: #fff;
}



/* admin-table.css */
@charset "UTF-8";
/* ============================================================
   The shared admin table standard.

   Every table inside .admin-wrapper is claimed by page/js/admin-table.js,
   which adds .admin-table and the per-column/per-cell classes the rules below
   key off. Tables opt out with .admin-table-exempt.

   Bootstrap already covers alignment (text-end), striping (table-striped),
   hover (table-hover), compact rows (table-sm) and truncation (text-truncate),
   so this file is only what Bootstrap has no equivalent for: the comfortable
   density, the sticky first column, the sticky header, and the width the
   truncation measures against.

   Everything is scoped to .admin-wrapper because the compiled admin-table.css
   is served on every page, admin or not (see AssetCache's public/ scan).
   ============================================================ */
.admin-wrapper {
  /* Bootstrap 5.3 writes table cell padding as literal values rather than
     custom properties, so density needs a variable of our own. */
  --admin-table-cell-padding-y: 0.5rem;
  --admin-table-cell-padding-x: 0.75rem;
  /* How wide a cell's text may get before it ellipsises. */
  --admin-table-truncate-width: 22rem;
  /* How tall a scrolling table may get before its header pins. */
  --admin-table-max-height: min(32rem, 70vh);
  /* The header band, shared by every admin table. */
  --admin-table-header-bg: var(--bs-tertiary-bg);
  /* What a sticky cell paints over the rows it covers. Not --bs-body-bg:
     admin tables live in cards, whose background differs from the body's in
     dark mode (#1b1f2d against #11131d), and the body colour drew the pinned
     column as a visibly darker stripe. --bs-card-bg is set by Bootstrap on
     .card and inherits down to the cells; the fallback covers a table that
     isn't in a card. */
  --admin-table-sticky-bg: var(--bs-card-bg, var(--bs-body-bg));
}

.admin-wrapper[data-admin-table-density=compact] {
  --admin-table-cell-padding-y: 0.25rem;
  --admin-table-cell-padding-x: 0.5rem;
}

.admin-wrapper[data-admin-table-density=comfortable] {
  --admin-table-cell-padding-y: 0.9rem;
  --admin-table-cell-padding-x: 1rem;
}

/* Matches Bootstrap's own `.table > :not(caption) > * > *` shape so this wins
   on specificity without !important and without touching <caption>. */
.admin-wrapper .admin-table > :not(caption) > * > * {
  padding: var(--admin-table-cell-padding-y) var(--admin-table-cell-padding-x);
}

/* ------------------------------------------------------------
   Header row

   This used to live on #moduleTable alone, so the metadata-driven lists had
   small uppercase grey headers on a tinted band while every hand-built table
   kept plain black body text on white — the most visible way admin tables
   didn't match. It belongs to all of them.

   The tint is also what the sticky header paints over the rows it covers, so
   it has to stay opaque.
   ------------------------------------------------------------ */
.admin-wrapper .admin-table > thead > tr > * {
  font-size: 0.78rem;
  font-weight: 700;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: manual;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-secondary-color);
  background-color: var(--admin-table-header-bg);
  vertical-align: bottom;
}

/* ------------------------------------------------------------
   Rule 9 — truncation
   The enhancer wraps a text-only cell's contents in this span and adds
   Bootstrap's .text-truncate; the max-width is what gives the ellipsis
   something to measure against. The title attribute (set only when the text
   actually overflows) is the hover tooltip.
   ------------------------------------------------------------ */
.admin-wrapper .admin-table .admin-table-truncate {
  display: inline-block;
  max-width: var(--admin-table-truncate-width);
  vertical-align: bottom;
}

/* ------------------------------------------------------------
   Rule 8 — the dash standing in for a missing value
   ------------------------------------------------------------ */
.admin-wrapper .admin-table .admin-table-empty {
  color: var(--bs-secondary-color);
}

/* ------------------------------------------------------------
   Rules 6 & 7 — sticky first column and sticky header

   A sticky cell needs an opaque background, or the cells it scrolls over show
   through it. Bootstrap 5.3 paints striping and hover as an inset box-shadow
   rather than a background-color, so both still show on top of one.
   ------------------------------------------------------------ */
.admin-wrapper .admin-table-scroll {
  max-height: var(--admin-table-max-height);
  overflow: auto;
}

.admin-wrapper .admin-table-scroll .admin-table > thead > tr > * {
  position: sticky;
  top: 0;
  z-index: 2;
}

.admin-wrapper .admin-table .admin-table-pinned-column {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--admin-table-sticky-bg);
}

/* The header's own first cell sits in both sticky contexts at once, so it
   needs to outrank each of them individually — and to keep the header's tint
   rather than the pinned column's surface colour, which would otherwise win
   on specificity and leave one pale cell in the header band. */
.admin-wrapper .admin-table > thead > tr > .admin-table-pinned-column {
  z-index: 3;
  background-color: var(--admin-table-header-bg);
}

/* A hairline that only appears once the table is actually scrolled sideways,
   so a pinned column reads as pinned rather than as an arbitrary border. */
.admin-wrapper .admin-table-scrolled-x .admin-table .admin-table-pinned-column::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--bs-border-color);
}

/* ------------------------------------------------------------
   Rule 5 — the density control

   Sits in the module toolbar, which is a flex row: without this it stretches
   to the row's height alongside the page title.
   ------------------------------------------------------------ */
.admin-wrapper .admin-table-density {
  flex: 0 0 auto;
  align-self: center;
  display: none !important;
}



/* alert-modal.css */
.alert-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
  background: rgba(9, 8, 30, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: alert-modal-backdrop-in 0.25s ease forwards;
}
.alert-modal-overlay.alert-modal-out {
  animation: alert-modal-backdrop-out 0.25s ease forwards;
}
.alert-modal-overlay.alert-modal-out .alert-modal-card {
  animation: alert-modal-card-out 0.25s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

@keyframes alert-modal-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes alert-modal-backdrop-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes alert-modal-card-pop {
  from {
    transform: scale(0.85) translateY(20px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
@keyframes alert-modal-card-out {
  from {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  to {
    transform: scale(0.9) translateY(-10px);
    opacity: 0;
  }
}
.alert-modal-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  border-radius: 20px;
  padding: 2rem 1.75rem 1.75rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.92);
  color: #1b1f2d;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: alert-modal-card-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
[data-bs-theme=dark] .alert-modal-card {
  background: rgba(27, 31, 45, 0.92);
  color: var(--bs-body-color);
}

.alert-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.15rem;
}
.alert-modal-close:hover {
  opacity: 1;
}

.alert-modal-icon-wrap {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
}
.alert-modal-icon-wrap--success {
  background: linear-gradient(135deg, #16a34a, #22c55e);
}
.alert-modal-icon-wrap--error {
  background: linear-gradient(135deg, #b91c1c, #ef4444);
}
.alert-modal-icon-wrap--warning {
  background: linear-gradient(135deg, #b45309, #d97706);
}
.alert-modal-icon-wrap--info {
  background: linear-gradient(135deg, #1d4ed8, #3b82f6);
}

.alert-modal-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.alert-modal-message {
  font-size: 0.95rem;
  line-height: 1.45;
  margin-bottom: 1.5rem;
  white-space: pre-line;
}

.alert-modal-input-wrap {
  text-align: left;
  margin-bottom: 1.5rem;
}

.alert-modal-input-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.alert-modal-input-error {
  color: #dc3545;
  font-size: 0.8rem;
  margin-top: 0.35rem;
}

.alert-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.alert-modal-btn {
  border-radius: 8px;
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid transparent;
}
.alert-modal-btn--primary {
  background: #1d4ed8;
  color: #fff;
}
.alert-modal-btn--primary:hover {
  background: #1e40af;
}
.alert-modal-btn--secondary {
  background: var(--bs-secondary-bg, #e9ecef);
  color: inherit;
}
.alert-modal-btn--secondary:hover {
  background: var(--bs-tertiary-bg, #dee2e6);
}
.alert-modal-btn--danger {
  background: #dc3545;
  color: #fff;
}
.alert-modal-btn--danger:hover {
  background: #bb2d3b;
}
.alert-modal-btn--ghost {
  background: transparent;
  border-color: var(--bs-border-color, rgba(0, 0, 0, 0.2));
  color: inherit;
}
.alert-modal-btn--ghost:hover {
  background: rgba(0, 0, 0, 0.05);
}



/* barcode-labels.css */
.barcode-label-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}

.barcode-label {
  border: 1px dashed #999;
  border-radius: 6px;
  padding: 1rem;
  text-align: center;
}
.barcode-label__svg {
  width: 100%;
  max-height: 70px;
}
.barcode-label__code {
  font-family: "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 1px;
  margin-top: 2px;
}
.barcode-label__title {
  font-weight: 600;
  font-size: 13px;
  margin-top: 4px;
}
.barcode-label__subtitle {
  font-size: 11px;
  color: #666;
}

@media print {
  body.printing-barcode-labels > :not(#barcodeLabelsModal) {
    display: none !important;
  }
  body.printing-barcode-labels #barcodeLabelsModal {
    position: static !important;
    display: block !important;
  }
  body.printing-barcode-labels #barcodeLabelsModal .modal-dialog {
    max-width: 100% !important;
    margin: 0 !important;
  }
  body.printing-barcode-labels #barcodeLabelsModal .modal-content {
    border: 0 !important;
    box-shadow: none !important;
  }
  body.printing-barcode-labels #barcodeLabelsModal .modal-header,
  body.printing-barcode-labels #barcodeLabelsModal .modal-footer {
    display: none !important;
  }
  body.printing-barcode-labels #barcodeLabelsModal .barcode-label {
    border: 1px solid #ccc;
    page-break-inside: avoid;
  }
}



/* campaign-banner.css */
.pb-campaign-banner {
  --pb-campaign-eyebrow-color: currentColor;
  --pb-campaign-headline-color: currentColor;
  --pb-campaign-subhead-color: currentColor;
  --pb-campaign-legal-color: currentColor;
  --pb-campaign-headline-font: inherit;
  --pb-campaign-headline-size: clamp(2.5rem, 6.5vw, 5.5rem);
  --pb-campaign-art-max: 100%;
  display: grid;
  align-items: center;
  justify-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-areas: "product copy event";
}
.pb-campaign-banner__art {
  max-width: var(--pb-campaign-art-max);
}
.pb-campaign-banner__art img {
  display: block;
  width: 100%;
  height: auto;
  max-height: var(--pb-campaign-art-height, 60vh);
  object-fit: contain;
  margin-inline: auto;
}
.pb-campaign-banner__art--product {
  grid-area: product;
}
.pb-campaign-banner__art--event {
  grid-area: event;
}
.pb-campaign-banner__copy {
  grid-area: copy;
  text-align: center;
  max-width: 34rem;
}
.pb-campaign-banner__eyebrow {
  margin: 0 0 0.35em;
  color: var(--pb-campaign-eyebrow-color);
  font-size: clamp(0.95rem, 1.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}
.pb-campaign-banner__headline {
  margin: 0 0 0.25em;
  color: var(--pb-campaign-headline-color);
  font-family: var(--pb-campaign-headline-font);
  font-size: var(--pb-campaign-headline-size);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.pb-campaign-banner__subhead {
  margin: 0;
  color: var(--pb-campaign-subhead-color);
  font-size: clamp(1.05rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
}
.pb-campaign-banner__legal {
  margin: 1em 0 0;
  color: var(--pb-campaign-legal-color);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.4;
}

@media (max-width: 767.98px) {
  .pb-campaign-banner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "copy copy" "product event";
    --pb-campaign-art-height: 34vh;
  }
}
.pb-language-toggle {
  --pb-language-toggle-color: currentColor;
  --pb-language-toggle-active-color: currentColor;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.pb-language-toggle__item {
  color: var(--pb-language-toggle-color);
  text-decoration: none;
  padding: 0.15rem 0.35rem;
  border-radius: 0.2rem;
  opacity: 0.55;
}
.pb-language-toggle__item:hover, .pb-language-toggle__item:focus-visible {
  opacity: 1;
  text-decoration: underline;
}
.pb-language-toggle__item--active {
  color: var(--pb-language-toggle-active-color);
  background: var(--pb-language-toggle-active-background, transparent);
  opacity: 1;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.pb-language-toggle__separator {
  opacity: 0.55;
}



/* core.css */
@charset "UTF-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/css2?family=Zalando+Sans:ital,wght@0,200..900;1,200..900&display=swap");
/* Bootstrap Overrides */
:root {
  --primary: #0d6efd;
  --primary-dark: rgb(1.7442622951, 86.3409836066, 211.0557377049);
  --primary-darker: rgb(1.3081967213, 64.7557377049, 158.2918032787);
  --primary-darkest: rgb(0.8721311475, 43.1704918033, 105.5278688525);
  --primary-light: rgb(61.4, 139, 253.4);
  --primary-lighter: rgb(109.8, 168, 253.8);
  --primary-lightest: rgb(158.2, 197, 254.2);
  --primary-rgb: 13, 110, 253;
  --primary-rgb-dark: 1.7442622951, 86.3409836066, 211.0557377049;
  --primary-rgb-darker: 1.3081967213, 64.7557377049, 158.2918032787;
  --primary-rgb-darkest: 0.8721311475, 43.1704918033, 105.5278688525;
  --primary-rgb-light: 61.4, 139, 253.4;
  --primary-rgb-lighter: 109.8, 168, 253.8;
  --primary-rgb-lightest: 158.2, 197, 254.2;
  --secondary: #161925;
  --secondary-dark: rgb(17.6, 20, 29.6);
  --secondary-darker: rgb(13.2, 15, 22.2);
  --secondary-darkest: rgb(8.8, 10, 14.8);
  --secondary-light: rgb(55.6338983051, 63.2203389831, 93.5661016949);
  --secondary-lighter: rgb(89.2677966102, 101.4406779661, 150.1322033898);
  --secondary-lightest: rgb(141.8677966102, 151.0406779661, 187.7322033898);
  --secondary-rgb: 22, 25, 37;
  --secondary-rgb-dark: 17.6, 20, 29.6;
  --secondary-rgb-darker: 13.2, 15, 22.2;
  --secondary-rgb-darkest: 8.8, 10, 14.8;
  --secondary-rgb-light: 55.6338983051, 63.2203389831, 93.5661016949;
  --secondary-rgb-lighter: 89.2677966102, 101.4406779661, 150.1322033898;
  --secondary-rgb-lightest: 141.8677966102, 151.0406779661, 187.7322033898;
  --accent: #ff6600;
  --accent-dark: rgb(204, 81.6, 0);
  --accent-darker: rgb(153, 61.2, 0);
  --accent-darkest: rgb(102, 40.8, 0);
  --accent-light: rgb(255, 132.6, 51);
  --accent-lighter: rgb(255, 163.2, 102);
  --accent-lightest: rgb(255, 193.8, 153);
  --accent-rgb: 255, 102, 0;
  --accent-rgb-dark: 204, 81.6, 0;
  --accent-rgb-darker: 153, 61.2, 0;
  --accent-rgb-darkest: 102, 40.8, 0;
  --accent-rgb-light: 255, 132.6, 51;
  --accent-rgb-lighter: 255, 163.2, 102;
  --accent-rgb-lightest: 255, 193.8, 153;
  --text-light: #000;
  --text-light-dark: black;
  --text-light-darker: black;
  --text-light-darkest: black;
  --text-light-light: #333333;
  --text-light-lighter: #666666;
  --text-light-lightest: #999999;
  --text-light-rgb: 0, 0, 0;
  --text-light-rgb-dark: 0, 0, 0;
  --text-light-rgb-darker: 0, 0, 0;
  --text-light-rgb-darkest: 0, 0, 0;
  --text-light-rgb-light: 51, 51, 51;
  --text-light-rgb-lighter: 102, 102, 102;
  --text-light-rgb-lightest: 153, 153, 153;
  --text-dark: #fff;
  --text-dark-dark: #cccccc;
  --text-dark-darker: #999999;
  --text-dark-darkest: #666666;
  --text-dark-light: white;
  --text-dark-lighter: white;
  --text-dark-lightest: white;
  --text-dark-rgb: 255, 255, 255;
  --text-dark-rgb-dark: 204, 204, 204;
  --text-dark-rgb-darker: 153, 153, 153;
  --text-dark-rgb-darkest: 102, 102, 102;
  --text-dark-rgb-light: 255, 255, 255;
  --text-dark-rgb-lighter: 255, 255, 255;
  --text-dark-rgb-lightest: 255, 255, 255;
  --light: rgba(228, 220, 203, 0.7960784314);
  --light-dark: rgba(198.5392405063, 181.8101265823, 146.2607594937, 0.7960784314);
  --light-darker: rgba(169.0784810127, 143.6202531646, 89.5215189873, 0.7960784314);
  --light-darkest: rgba(113.4784810127, 96.0202531646, 58.9215189873, 0.7960784314);
  --light-light: rgba(233.4, 227, 213.4, 0.7960784314);
  --light-lighter: rgba(238.8, 234, 223.8, 0.7960784314);
  --light-lightest: rgba(244.2, 241, 234.2, 0.7960784314);
  --light-rgb: 228, 220, 203;
  --light-rgb-dark: 198.5392405063, 181.8101265823, 146.2607594937;
  --light-rgb-darker: 169.0784810127, 143.6202531646, 89.5215189873;
  --light-rgb-darkest: 113.4784810127, 96.0202531646, 58.9215189873;
  --light-rgb-light: 233.4, 227, 213.4;
  --light-rgb-lighter: 238.8, 234, 223.8;
  --light-rgb-lightest: 244.2, 241, 234.2;
  --dark: rgba(0, 0, 0, 0.5333333333);
  --dark-dark: rgba(0, 0, 0, 0.5333333333);
  --dark-darker: rgba(0, 0, 0, 0.5333333333);
  --dark-darkest: rgba(0, 0, 0, 0.5333333333);
  --dark-light: rgba(51, 51, 51, 0.5333333333);
  --dark-lighter: rgba(102, 102, 102, 0.5333333333);
  --dark-lightest: rgba(153, 153, 153, 0.5333333333);
  --dark-rgb: 0, 0, 0;
  --dark-rgb-dark: 0, 0, 0;
  --dark-rgb-darker: 0, 0, 0;
  --dark-rgb-darkest: 0, 0, 0;
  --dark-rgb-light: 51, 51, 51;
  --dark-rgb-lighter: 102, 102, 102;
  --dark-rgb-lightest: 153, 153, 153;
  --input-light: rgba(255, 255, 255, 0.5333333333);
  --input-light-dark: rgba(204, 204, 204, 0.5333333333);
  --input-light-darker: rgba(153, 153, 153, 0.5333333333);
  --input-light-darkest: rgba(102, 102, 102, 0.5333333333);
  --input-light-light: rgba(255, 255, 255, 0.5333333333);
  --input-light-lighter: rgba(255, 255, 255, 0.5333333333);
  --input-light-lightest: rgba(255, 255, 255, 0.5333333333);
  --input-light-rgb: 255, 255, 255;
  --input-light-rgb-dark: 204, 204, 204;
  --input-light-rgb-darker: 153, 153, 153;
  --input-light-rgb-darkest: 102, 102, 102;
  --input-light-rgb-light: 255, 255, 255;
  --input-light-rgb-lighter: 255, 255, 255;
  --input-light-rgb-lightest: 255, 255, 255;
  --input-dark: rgba(255, 255, 255, 0.0666666667);
  --input-dark-dark: rgba(204, 204, 204, 0.0666666667);
  --input-dark-darker: rgba(153, 153, 153, 0.0666666667);
  --input-dark-darkest: rgba(102, 102, 102, 0.0666666667);
  --input-dark-light: rgba(255, 255, 255, 0.0666666667);
  --input-dark-lighter: rgba(255, 255, 255, 0.0666666667);
  --input-dark-lightest: rgba(255, 255, 255, 0.0666666667);
  --input-dark-rgb: 255, 255, 255;
  --input-dark-rgb-dark: 204, 204, 204;
  --input-dark-rgb-darker: 153, 153, 153;
  --input-dark-rgb-darkest: 102, 102, 102;
  --input-dark-rgb-light: 255, 255, 255;
  --input-dark-rgb-lighter: 255, 255, 255;
  --input-dark-rgb-lightest: 255, 255, 255;
  --border-light: rgba(216, 216, 216, 0.4);
  --border-light-dark: rgba(172.8, 172.8, 172.8, 0.4);
  --border-light-darker: rgba(129.6, 129.6, 129.6, 0.4);
  --border-light-darkest: rgba(86.4, 86.4, 86.4, 0.4);
  --border-light-light: rgba(223.8, 223.8, 223.8, 0.4);
  --border-light-lighter: rgba(231.6, 231.6, 231.6, 0.4);
  --border-light-lightest: rgba(239.4, 239.4, 239.4, 0.4);
  --border-light-rgb: 216, 216, 216;
  --border-light-rgb-dark: 172.8, 172.8, 172.8;
  --border-light-rgb-darker: 129.6, 129.6, 129.6;
  --border-light-rgb-darkest: 86.4, 86.4, 86.4;
  --border-light-rgb-light: 223.8, 223.8, 223.8;
  --border-light-rgb-lighter: 231.6, 231.6, 231.6;
  --border-light-rgb-lightest: 239.4, 239.4, 239.4;
  --border-dark: rgba(51, 51, 51, 0.4);
  --border-dark-dark: rgba(40.8, 40.8, 40.8, 0.4);
  --border-dark-darker: rgba(30.6, 30.6, 30.6, 0.4);
  --border-dark-darkest: rgba(20.4, 20.4, 20.4, 0.4);
  --border-dark-light: rgba(91.8, 91.8, 91.8, 0.4);
  --border-dark-lighter: rgba(132.6, 132.6, 132.6, 0.4);
  --border-dark-lightest: rgba(173.4, 173.4, 173.4, 0.4);
  --border-dark-rgb: 51, 51, 51;
  --border-dark-rgb-dark: 40.8, 40.8, 40.8;
  --border-dark-rgb-darker: 30.6, 30.6, 30.6;
  --border-dark-rgb-darkest: 20.4, 20.4, 20.4;
  --border-dark-rgb-light: 91.8, 91.8, 91.8;
  --border-dark-rgb-lighter: 132.6, 132.6, 132.6;
  --border-dark-rgb-lightest: 173.4, 173.4, 173.4;
  --success: #5be5ac;
  --success-dark: rgb(35.7578947368, 220.2421052632, 144.0421052632);
  --success-darker: rgb(26.2736842105, 165.7263157895, 108.1263157895);
  --success-darkest: rgb(17.5157894737, 110.4842105263, 72.0842105263);
  --success-light: rgb(123.8, 234.2, 188.6);
  --success-lighter: rgb(156.6, 239.4, 205.2);
  --success-lightest: rgb(189.4, 244.6, 221.8);
  --success-rgb: 91, 229, 172;
  --success-rgb-dark: 35.7578947368, 220.2421052632, 144.0421052632;
  --success-rgb-darker: 26.2736842105, 165.7263157895, 108.1263157895;
  --success-rgb-darkest: 17.5157894737, 110.4842105263, 72.0842105263;
  --success-rgb-light: 123.8, 234.2, 188.6;
  --success-rgb-lighter: 156.6, 239.4, 205.2;
  --success-rgb-lightest: 189.4, 244.6, 221.8;
  --highlight: #fff3c4;
  --highlight-dark: rgb(255, 224.6542372881, 105.8);
  --highlight-darker: rgb(255, 206.3084745763, 15.6);
  --highlight-darkest: rgb(180.4, 143.7084745763, 0);
  --highlight-light: rgb(255, 245.4, 207.8);
  --highlight-lighter: rgb(255, 247.8, 219.6);
  --highlight-lightest: rgb(255, 250.2, 231.4);
  --highlight-rgb: 255, 243, 196;
  --highlight-rgb-dark: 255, 224.6542372881, 105.8;
  --highlight-rgb-darker: 255, 206.3084745763, 15.6;
  --highlight-rgb-darkest: 180.4, 143.7084745763, 0;
  --highlight-rgb-light: 255, 245.4, 207.8;
  --highlight-rgb-lighter: 255, 247.8, 219.6;
  --highlight-rgb-lightest: 255, 250.2, 231.4;
  --lightgrey: #8EA8C3;
  --lightgrey-dark: rgb(97.9757225434, 134.1052023121, 171.6242774566);
  --lightgrey-darker: rgb(70.1271676301, 100.5156069364, 132.0728323699);
  --lightgrey-darkest: rgb(46.7514450867, 67.0104046243, 88.0485549133);
  --lightgrey-light: rgb(164.6, 185.4, 207);
  --lightgrey-lighter: rgb(187.2, 202.8, 219);
  --lightgrey-lightest: rgb(209.8, 220.2, 231);
  --lightgrey-rgb: 142, 168, 195;
  --lightgrey-rgb-dark: 97.9757225434, 134.1052023121, 171.6242774566;
  --lightgrey-rgb-darker: 70.1271676301, 100.5156069364, 132.0728323699;
  --lightgrey-rgb-darkest: 46.7514450867, 67.0104046243, 88.0485549133;
  --lightgrey-rgb-light: 164.6, 185.4, 207;
  --lightgrey-rgb-lighter: 187.2, 202.8, 219;
  --lightgrey-rgb-lightest: 209.8, 220.2, 231;
  --mediumgrey: #406E8E;
  --mediumgrey-dark: rgb(51.2, 88, 113.6);
  --mediumgrey-darker: rgb(38.4, 66, 85.2);
  --mediumgrey-darkest: rgb(25.6, 44, 56.8);
  --mediumgrey-light: rgb(87.3572815534, 141.6640776699, 179.4427184466);
  --mediumgrey-lighter: rgb(129.267961165, 169.9980582524, 198.332038835);
  --mediumgrey-lightest: rgb(171.1786407767, 198.332038835, 217.2213592233);
  --mediumgrey-rgb: 64, 110, 142;
  --mediumgrey-rgb-dark: 51.2, 88, 113.6;
  --mediumgrey-rgb-darker: 38.4, 66, 85.2;
  --mediumgrey-rgb-darkest: 25.6, 44, 56.8;
  --mediumgrey-rgb-light: 87.3572815534, 141.6640776699, 179.4427184466;
  --mediumgrey-rgb-lighter: 129.267961165, 169.9980582524, 198.332038835;
  --mediumgrey-rgb-lightest: 171.1786407767, 198.332038835, 217.2213592233;
  --darkgrey: #23395B;
  --darkgrey-dark: rgb(28, 45.6, 72.8);
  --darkgrey-darker: rgb(21, 34.2, 54.6);
  --darkgrey-darkest: rgb(14, 22.8, 36.4);
  --darkgrey-light: rgb(56.3333333333, 91.7428571429, 146.4666666667);
  --darkgrey-lighter: rgb(88.6, 128.8285714286, 191);
  --darkgrey-lightest: rgb(144.0666666667, 170.8857142857, 212.3333333333);
  --darkgrey-rgb: 35, 57, 91;
  --darkgrey-rgb-dark: 28, 45.6, 72.8;
  --darkgrey-rgb-darker: 21, 34.2, 54.6;
  --darkgrey-rgb-darkest: 14, 22.8, 36.4;
  --darkgrey-rgb-light: 56.3333333333, 91.7428571429, 146.4666666667;
  --darkgrey-rgb-lighter: 88.6, 128.8285714286, 191;
  --darkgrey-rgb-lightest: 144.0666666667, 170.8857142857, 212.3333333333;
  --teal: #449F93;
  --teal-dark: rgb(54.4, 127.2, 117.6);
  --teal-darker: rgb(40.8, 95.4, 88.2);
  --teal-darkest: rgb(27.2, 63.6, 58.8);
  --teal-light: rgb(96.4202643172, 187.1797356828, 175.2114537445);
  --teal-lighter: rgb(136.0651982379, 204.1348017621, 195.1585903084);
  --teal-lightest: rgb(175.7101321586, 221.0898678414, 215.1057268722);
  --teal-rgb: 68, 159, 147;
  --teal-rgb-dark: 54.4, 127.2, 117.6;
  --teal-rgb-darker: 40.8, 95.4, 88.2;
  --teal-rgb-darkest: 27.2, 63.6, 58.8;
  --teal-rgb-light: 96.4202643172, 187.1797356828, 175.2114537445;
  --teal-rgb-lighter: 136.0651982379, 204.1348017621, 195.1585903084;
  --teal-rgb-lightest: 175.7101321586, 221.0898678414, 215.1057268722;
  --darkteal: #006153;
  --darkteal-dark: rgb(0, 77.6, 66.4);
  --darkteal-darker: rgb(0, 58.2, 49.8);
  --darkteal-darkest: rgb(0, 38.8, 33.2);
  --darkteal-light: rgb(0, 179.6, 153.6783505155);
  --darkteal-lighter: rgb(7.2, 255, 219.2350515464);
  --darkteal-lightest: rgb(89.8, 255, 231.1567010309);
  --darkteal-rgb: 0, 97, 83;
  --darkteal-rgb-dark: 0, 77.6, 66.4;
  --darkteal-rgb-darker: 0, 58.2, 49.8;
  --darkteal-rgb-darkest: 0, 38.8, 33.2;
  --darkteal-rgb-light: 0, 179.6, 153.6783505155;
  --darkteal-rgb-lighter: 7.2, 255, 219.2350515464;
  --darkteal-rgb-lightest: 89.8, 255, 231.1567010309;
  --cream: #EEE8A9;
  --cream-dark: rgb(224.5650485437, 213.8233009709, 101.0349514563);
  --cream-darker: rgb(203.8951456311, 189.6699029126, 40.3048543689);
  --cream-darkest: rgb(135.9300970874, 126.4466019417, 26.8699029126);
  --cream-light: rgb(241.4, 236.6, 186.2);
  --cream-lighter: rgb(244.8, 241.2, 203.4);
  --cream-lightest: rgb(248.2, 245.8, 220.6);
  --cream-rgb: 238, 232, 169;
  --cream-rgb-dark: 224.5650485437, 213.8233009709, 101.0349514563;
  --cream-rgb-darker: 203.8951456311, 189.6699029126, 40.3048543689;
  --cream-rgb-darkest: 135.9300970874, 126.4466019417, 26.8699029126;
  --cream-rgb-light: 241.4, 236.6, 186.2;
  --cream-rgb-lighter: 244.8, 241.2, 203.4;
  --cream-rgb-lightest: 248.2, 245.8, 220.6;
  --dark-bg: #161925;
  --dark-bg-dark: rgb(17.6, 20, 29.6);
  --dark-bg-darker: rgb(13.2, 15, 22.2);
  --dark-bg-darkest: rgb(8.8, 10, 14.8);
  --dark-bg-light: rgb(55.6338983051, 63.2203389831, 93.5661016949);
  --dark-bg-lighter: rgb(89.2677966102, 101.4406779661, 150.1322033898);
  --dark-bg-lightest: rgb(141.8677966102, 151.0406779661, 187.7322033898);
  --dark-bg-rgb: 22, 25, 37;
  --dark-bg-rgb-dark: 17.6, 20, 29.6;
  --dark-bg-rgb-darker: 13.2, 15, 22.2;
  --dark-bg-rgb-darkest: 8.8, 10, 14.8;
  --dark-bg-rgb-light: 55.6338983051, 63.2203389831, 93.5661016949;
  --dark-bg-rgb-lighter: 89.2677966102, 101.4406779661, 150.1322033898;
  --dark-bg-rgb-lightest: 141.8677966102, 151.0406779661, 187.7322033898;
  --yellow: #e2b12e;
  --yellow-dark: rgb(191.0857142857, 146.2857142857, 26.5142857143);
  --yellow-darker: rgb(143.3142857143, 109.7142857143, 19.8857142857);
  --yellow-darkest: rgb(95.5428571429, 73.1428571429, 13.2571428571);
  --yellow-light: rgb(231.8, 192.6, 87.8);
  --yellow-lighter: rgb(237.6, 208.2, 129.6);
  --yellow-lightest: rgb(243.4, 223.8, 171.4);
  --yellow-rgb: 226, 177, 46;
  --yellow-rgb-dark: 191.0857142857, 146.2857142857, 26.5142857143;
  --yellow-rgb-darker: 143.3142857143, 109.7142857143, 19.8857142857;
  --yellow-rgb-darkest: 95.5428571429, 73.1428571429, 13.2571428571;
  --yellow-rgb-light: 231.8, 192.6, 87.8;
  --yellow-rgb-lighter: 237.6, 208.2, 129.6;
  --yellow-rgb-lightest: 243.4, 223.8, 171.4;
  --error: #b92924;
  --error-dark: rgb(148, 32.8, 28.8);
  --error-darker: rgb(111, 24.6, 21.6);
  --error-darkest: rgb(74, 16.4, 14.4);
  --error-light: rgb(217.3384615385, 66.6923076923, 61.4615384615);
  --error-lighter: rgb(226.7538461538, 113.7692307692, 109.8461538462);
  --error-lightest: rgb(236.1692307692, 160.8461538462, 158.2307692308);
  --error-rgb: 185, 41, 36;
  --error-rgb-dark: 148, 32.8, 28.8;
  --error-rgb-darker: 111, 24.6, 21.6;
  --error-rgb-darkest: 74, 16.4, 14.4;
  --error-rgb-light: 217.3384615385, 66.6923076923, 61.4615384615;
  --error-rgb-lighter: 226.7538461538, 113.7692307692, 109.8461538462;
  --error-rgb-lightest: 236.1692307692, 160.8461538462, 158.2307692308;
  --rust: #C15450;
  --rust-dark: rgb(161.2658227848, 60.8202531646, 57.1341772152);
  --rust-darker: rgb(120.9493670886, 45.6151898734, 42.8506329114);
  --rust-darkest: rgb(80.6329113924, 30.4101265823, 28.5670886076);
  --rust-light: rgb(205.4, 118.2, 115);
  --rust-lighter: rgb(217.8, 152.4, 150);
  --rust-lightest: rgb(230.2, 186.6, 185);
  --rust-rgb: 193, 84, 80;
  --rust-rgb-dark: 161.2658227848, 60.8202531646, 57.1341772152;
  --rust-rgb-darker: 120.9493670886, 45.6151898734, 42.8506329114;
  --rust-rgb-darkest: 80.6329113924, 30.4101265823, 28.5670886076;
  --rust-rgb-light: 205.4, 118.2, 115;
  --rust-rgb-lighter: 217.8, 152.4, 150;
  --rust-rgb-lightest: 230.2, 186.6, 185;
}

body {
  font-weight: 400;
  color: #333;
  width: 100vw;
  max-width: 100%;
  background-color: rgba(var(--bs-light-rgb, var(--bs-bg-opacity)));
}

.template {
  display: none;
}

.hidden {
  display: unset !important;
}

.pcamessage, .pcalogoen, .pcaflagbutton {
  display: none !important;
}

.modal .modal-header {
  position: relative;
  display: flex;
  flex-direction: column;
}
.modal .modal-header .modal-subtitle {
  margin: 0;
}
.modal .modal-header .btn-close {
  position: absolute;
  right: 1rem;
}

.content-area {
  flex-grow: 1;
  transition: width 0.3s ease-in-out;
}

hr {
  border: none;
  border-bottom: 1px solid #D8D8D8;
  min-width: 100%;
  max-width: 100%;
}

/***************************************************************************************************
********************************* NAVBAR STYLES ****************************************************
***************************************************************************************************/
:root {
  --navbar-height: 80px;
}

.navbar-brand img {
  min-height: 40px;
  max-height: 80px;
}

.navbar-brand:has(> span) img {
  max-height: 60px;
}

/***************************************************************************************************
********************************* LOGIN STYLES ****************************************************
***************************************************************************************************/
login {
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  background-image: url(/public/img/background.png);
  background-size: cover;
  background-position: center;
}
login .card {
  background: var(--light);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  border: 1px solid var(--border-light);
  color: var(--text-light);
  width: 400px;
  max-width: calc(100% - 1rem);
  margin: 0 auto;
}
login .card form .input-group .input-group-text {
  background: var(--input-light);
  border-color: var(--border-dark);
  border-right: 0;
}
login .card form .input-group .input-group-text i {
  color: var(--text-light);
}
login .card form .input-group input {
  background: var(--input-light);
  color: var(--text-light);
  border-color: var(--border-dark);
  border-left: 0;
  margin-left: 0 !important;
}
login .card form .input-group input::placeholder {
  color: var(--text-light);
}
login .card form .input-group button[type=submit] {
  background: var(--primary);
  color: var(--text-dark);
  border: 1px solid var(--primary);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme]) login .card form .input-group .input-group-text {
    background: var(--input-dark);
    border-color: var(--border-light);
  }
  :root:not([data-bs-theme]) login .card form .input-group .input-group-text i {
    color: var(--text-dark);
  }
  :root:not([data-bs-theme]) login .card form .input-group input {
    background: var(--input-dark);
    color: var(--text-dark);
    border-color: var(--border-light);
  }
  :root:not([data-bs-theme]) login .card form .input-group input::placeholder {
    color: var(--text-dark);
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme]) login .card {
    color: var(--text-dark);
    background: var(--dark);
    border: 1px solid var(--dark);
  }
}

.toggle-password {
  position: absolute;
  right: 2rem;
  cursor: pointer;
  color: var(--text-light);
  background: transparent;
  border: none;
  height: 100%;
}

.infinite-scroll {
  min-height: 50px;
}

:invalid {
  content: "invalid";
}

.drag-placeholder {
  border: 2px dashed var(--bs-border-color);
  border-radius: 999px;
  min-height: 2.25rem;
  min-width: 6.5rem;
  margin: 0 0.5rem 0.5rem 0;
  display: inline-block;
  background: rgba(13, 110, 253, 0.06);
}

.drag-image-proxy {
  position: absolute;
  opacity: 0.5;
  pointer-events: none;
}

.draggable-btn-top-container {
  border-top: 1px solid;
  border-bottom: 1px solid;
}
.draggable-btn-top-container .draggable-btn-container .draggable-btn-container--container button {
  width: 100%;
}
.draggable-btn-top-container .draggable-btn-container .create-draggable-pill-btn {
  border: 1px solid;
  font-size: 5rem;
  font-weight: 900;
}

.drag-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: var(--bs-box-shadow-sm);
  user-select: none;
  cursor: grab;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.1s ease;
}
.drag-pill:hover {
  border-color: var(--primary);
  box-shadow: var(--bs-box-shadow);
  background: var(--bs-light-bg-subtle);
}
.drag-pill:active {
  cursor: grabbing;
  transform: scale(0.99);
}
.drag-pill.is-dragging {
  cursor: grabbing;
  transform: scale(0.99);
}
.drag-pill .pill-label {
  font-weight: 600;
  line-height: 1.1;
}
.drag-pill .pill-drag-handle {
  display: none;
}
.drag-pill .pill-delete-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(220, 53, 69, 0.35);
  border-radius: 50%;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1;
  background: #fff;
  color: #dc3545;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.drag-pill .pill-delete-btn:hover {
  background: #dc3545;
  color: #fff;
  border-color: #dc3545;
}

.draggable-pill-top-container {
  border-bottom: 1px solid;
}
.draggable-pill-top-container .create-draggable-pill-btn {
  border: 1px solid;
  font-size: 5rem;
  font-weight: 900;
}

.infinite-scroll {
  min-height: 50px;
  overflow-y: auto;
}

.spinner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  min-height: 200px;
  transition: opacity 0.3s ease;
}
.spinner-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
.spinner-overlay .spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #ccc;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* ==================================================================================
                            GENERIC PAGE COMPONENT STYLES
   ================================================================================== */
/* =========================
Slider Component
========================= */
.content-slider {
  padding: 2rem 0;
}
.content-slider .slider-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #333;
}
.content-slider .slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.content-slider .slider-nav {
  background: #374955;
  color: #fff;
  border: none;
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  z-index: 2;
}
.content-slider .slider-nav:hover {
  background: rgb(52.25, 69.35, 80.75);
}
.content-slider .slider-nav.prev {
  margin-right: 1rem;
}
.content-slider .slider-nav.next {
  margin-left: 1rem;
}
.content-slider .slider-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 0.5rem 0;
}
.content-slider .slider-track::-webkit-scrollbar {
  display: none;
}
.content-slider .slider-card {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease-in-out;
}
.content-slider .slider-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.content-slider .slider-card .card-thumb {
  position: relative;
}
.content-slider .slider-card .card-thumb .card-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: #f7f7f7;
  display: block;
}
.content-slider .slider-card .card-content {
  flex: 1;
  padding: 1rem;
}
.content-slider .slider-card .card-content .card-type {
  font-size: 0.8rem;
  font-weight: 600;
  color: #777;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}
.content-slider .slider-card .card-content .card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 0.5rem;
}
.content-slider .slider-card .card-content .card-description {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 0.75rem;
}
.content-slider .slider-card .card-content .card-meta {
  font-size: 0.8rem;
  color: #888;
}
.content-slider .slider-card .card-content .card-meta .card-date {
  font-style: italic;
}
.content-slider .slider-card .card-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0.75rem 1rem;
  background: #fafafa;
  border-top: 1px solid #eee;
}
.content-slider .slider-card .card-actions .btn-cta {
  background: #308478;
  color: #fff;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.content-slider .slider-card .card-actions .btn-cta:hover {
  background: rgb(45.6, 125.4, 114);
}

.tabs-section {
  padding: 4rem 0;
}
.tabs-section .tabs-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
.tabs-section .tabs-header {
  text-align: center;
  margin-bottom: 2rem;
}
.tabs-section .tabs-header .tabs-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #222;
}
.tabs-section .tabs-header .tabs-subtitle {
  font-size: 1rem;
  color: #666;
}
.tabs-section .tabs-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  margin-bottom: 2rem;
  padding: 0;
}
.tabs-section .tabs-nav .tabs-nav-btn {
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  border-bottom: 3px solid transparent;
  color: #555;
  cursor: pointer;
  transition: all 0.3s ease;
}
.tabs-section .tabs-nav .tabs-nav-btn.active {
  border-color: #ff7e80;
  color: #ff7e80;
}
.tabs-section .tabs-nav .tabs-nav-btn:hover {
  color: #308478;
}
.tabs-section .tabs-panels .tabs-panel .tabs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.tabs-section .tabs-card {
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tabs-section .tabs-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.tabs-section .tabs-card.upcoming {
  border: 1px solid #ff8150;
}
.tabs-section .tabs-card.closed {
  opacity: 0.7;
}
.tabs-section .tabs-card .tabs-thumb {
  width: 100%;
  height: 180px;
  overflow: hidden;
}
.tabs-section .tabs-card .tabs-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tabs-section .tabs-card .tabs-body {
  padding: 1rem;
}
.tabs-section .tabs-card .tabs-body .tabs-type {
  font-size: 0.875rem;
  font-weight: 600;
  color: #308478;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tabs-section .tabs-card .tabs-body .tabs-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0.5rem 0;
  color: #374955;
}
.tabs-section .tabs-card .tabs-body .tabs-card-desc {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 1rem;
}
.tabs-section .tabs-card .tabs-body .tabs-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 4px;
  background: #ff7e80;
  color: #fff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}
.tabs-section .tabs-card .tabs-body .tabs-btn:hover:not(.disabled) {
  background: rgb(255, 95.52, 97.9925581395);
}
.tabs-section .tabs-card .tabs-body .tabs-btn.disabled {
  background: #ccc;
  cursor: not-allowed;
}
@media (max-width: 768px) {
  .tabs-section .tabs-nav {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .tabs-section .tabs-card .tabs-thumb {
    height: 160px;
  }
}

.gallery-section {
  padding: 4rem 0;
}
.gallery-section .gallery-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
.gallery-section .gallery-header {
  text-align: center;
  margin-bottom: 2rem;
}
.gallery-section .gallery-header .gallery-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #222;
}
.gallery-section .gallery-header .gallery-subtitle {
  font-size: 1rem;
  color: #666;
}
.gallery-section .gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 10px;
  grid-auto-flow: dense;
  gap: 1rem;
}
.gallery-section .gallery-item {
  display: flex;
  flex-direction: column;
  background: var(--bs-card-bg, #fff);
  color: var(--bs-card-color, inherit);
  border-radius: var(--bs-border-radius, 0.5rem);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}
.gallery-section .gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.gallery-section .gallery-item .gallery-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.gallery-section .gallery-item .gallery-thumb {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.gallery-section .gallery-item .gallery-thumb img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
  background-color: #f0f0f0;
  transition: transform 0.3s ease;
}
.gallery-section .gallery-item .gallery-thumb:hover img {
  transform: scale(1.03);
}
.gallery-section .gallery-item .gallery-info {
  padding: 0.75rem 1rem;
  background: var(--bs-card-bg, #fff);
}
.gallery-section .gallery-item .gallery-info .gallery-item-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  color: #374955;
}
.gallery-section .gallery-item .gallery-info .gallery-item-meta {
  font-size: 0.8rem;
  font-weight: 500;
  color: #777;
  text-transform: uppercase;
}
.gallery-section .text-center {
  grid-column: 1/-1;
  text-align: center;
  color: #999;
  font-size: 1rem;
}
.gallery-section .text-center i {
  color: #ccc;
}
@media (max-width: 992px) {
  .gallery-section .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}
@media (max-width: 768px) {
  .gallery-section .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  .gallery-section .gallery-header {
    margin-bottom: 1.5rem;
  }
  .gallery-section .gallery-header .gallery-title {
    font-size: 1.5rem;
  }
}

.gallery-thumb img {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

.masonry-preview-item {
  cursor: grab;
  position: relative;
}
.masonry-preview-item:active {
  cursor: grabbing;
}
.masonry-preview-item .resize-handle {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 12px;
  height: 12px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  cursor: ns-resize;
}

.masonry-preview-wrapper {
  max-height: 350px;
  overflow: auto;
}

.masonry-preview-item {
  cursor: grab;
  position: relative;
}

.masonry-preview-item.dragging {
  opacity: 0.7;
}

.masonry-preview-item .resize-handle {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.18);
  cursor: ns-resize;
}

.masonry-preview-item .mp-toolbar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: inline-flex;
  gap: 4px;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.mp-btn {
  font: 600 11px/1 system-ui, -apple-system, Segoe UI, Roboto;
  padding: 4px 6px;
  border: 0;
  border-radius: 4px;
  color: #374955;
  background: #eef1f6;
  cursor: pointer;
}

.mp-btn:hover {
  background: #e3e8ef;
}

.mp-sep {
  width: 1px;
  background: #d9dfe7;
  margin: 0 2px;
}

.cookies-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: white;
  padding: 1.5rem 2rem;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1100;
  text-align: center;
}
.cookies-banner .cookies-banner--content {
  margin-bottom: 1rem;
  color: var(--text);
  font-size: 0.9rem;
}
.cookies-banner .cookies-banner--button {
  background: var(--primary);
  color: var(--text-dark);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}
.cookies-banner .cookies-banner--button:hover {
  background: var(--primary-dark);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme]) .cookies-banner {
    background: var(--dark-bg);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
  }
  :root:not([data-bs-theme]) .cookies-banner .cookies-banner--content {
    color: var(--text-dark);
  }
  :root:not([data-bs-theme]) .cookies-banner .cookies-banner--button {
    background: var(--primary);
    color: var(--text-dark);
  }
  :root:not([data-bs-theme]) .cookies-banner .cookies-banner--button:hover {
    background: var(--primary-light);
  }
}

/* ==================================================================================
                            END OF GENERIC PAGE COMPONENT STYLES
   ================================================================================== */
/* ==================================================================================
                            CUSTOM COMPONENT STYLES
   ================================================================================== */
.floating-button {
  position: fixed;
  bottom: 0.5rem;
  right: 1rem;
  background-color: var(--primary);
  padding: 1rem;
  color: var(--primary-contrast, var(--light));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 1050; /* Above modals */
  transition: background-color 0.3s ease;
}
.floating-button:hover {
  background: var(--primary-dark);
}

.btn-clear {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: var(--bs-btn-close-color);
  background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: var(--bs-btn-close-opacity);
}

/* ==================================================================================
                            END OF CUSTOM COMPONENT STYLES
   ================================================================================== */
/* =========================
Page Builder Styles
========================= */
#components {
  margin-top: 1rem;
}
#components h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #374955;
}
#components .sortable-block {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  margin-bottom: 1rem;
  box-shadow: var(--bs-box-shadow-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#components .sortable-block:hover {
  border-color: var(--primary);
  box-shadow: var(--bs-box-shadow);
}
#components .sortable-block .drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  min-width: 1.5rem;
  color: var(--bs-secondary-color);
  cursor: grab;
  user-select: none;
  transition: color 0.2s ease;
}
#components .sortable-block .drag-handle:hover, #components .sortable-block .drag-handle:focus-visible {
  color: var(--primary);
}
#components .sortable-block .question-text-input {
  min-height: 5rem;
  border-radius: var(--bs-border-radius-sm);
}
#components .sortable-block .answer-type-input {
  border-radius: var(--bs-border-radius-sm);
}
#components .sortable-block .remove-question-btn {
  white-space: nowrap;
}
#components .sortable-block #component-container {
  min-height: 50px;
  border: 1px solid var(--bs-border-color);
}

.add-component-card .card-body .text-muted {
  font-size: 0.95rem;
  line-height: 1.4;
}
.add-component-card .card-body .add-new-component-card {
  padding: 0.5rem 1rem;
  border: 2px dashed #d1d5db;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  color: #374955;
  transition: all 0.2s ease;
}
.add-component-card .card-body .add-new-component-card:hover {
  border-color: #ff7e80;
  background: rgba(255, 126, 128, 0.05);
  color: #ff7e80;
}
.add-component-card .card-body .add-new-component-card i {
  font-size: 1.2rem;
  color: #ff7e80;
}
.add-component-card .card-body .component-add-type-selector {
  min-width: 180px;
  border-radius: 6px;
}

/* ================================
   MASONRY BUILDER CORE LAYOUT
================================ */
.masonry-builder {
  display: flex;
  gap: 24px;
  flex-wrap: nowrap !important;
}

.masonry-builder .col-md-5 {
  min-width: 240px;
}

.masonry-builder .col-md-7 {
  flex: 1;
}

/* ================================
   AVAILABLE FIELDS (LEFT SIDE)
================================ */
.masonry-source-pill {
  cursor: grab;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--bs-box-shadow-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
  user-select: none;
}
.masonry-source-pill:hover {
  border-color: var(--primary);
  box-shadow: var(--bs-box-shadow);
  transform: translateY(-1px);
}
.masonry-source-pill .pill-label {
  font-weight: 600;
}

.masonry-source-pill.used {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

.masonry-builder {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
}

.masonry-preview-wrapper {
  min-height: 300px;
  background: #f8f9fa;
  border: 1px dashed #ccc;
  padding: 12px;
}

/* ================================
   PREVIEW AREA (RIGHT SIDE)
================================ */
.masonry-preview-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  background-color: #f8f9fa;
  border-style: dashed;
  min-height: 300px;
  max-height: none !important;
  overflow-y: visible !important;
}

/* ================================
   FIELD PILLS (INSIDE LAYOUT)
================================ */
.masonry-field {
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  container-type: inline-size;
}

.masonry-field-header {
  cursor: default;
}

.masonry-field-header:active {
  cursor: default;
}

.masonry-field-header-top {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(10rem, 1fr);
  gap: 0.5rem;
  align-items: end;
}

.masonry-field-header-label,
.masonry-field-header-width {
  min-width: 0;
}

.masonry-field-header-label-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.drag-handle-placeholder {
  visibility: hidden;
  pointer-events: none;
}

.masonry-field-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  color: #6c757d;
  cursor: grab;
  user-select: none;
}

.masonry-field-header {
  cursor: grab;
}

.masonry-field-header input,
.masonry-field-header textarea,
.masonry-field-header select,
.masonry-field-header button,
.masonry-field-header a {
  cursor: auto;
}

.masonry-field-drag-handle:active {
  cursor: grabbing;
}

.masonry-field-settings {
  width: fit-content;
}

.masonry-field-settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 999px;
  background: #fff;
  color: #495057;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.masonry-field-settings-toggle::-webkit-details-marker {
  display: none;
}

.masonry-field-settings-toggle::after {
  content: "+";
  font-size: 1rem;
  line-height: 1;
}

.masonry-field-settings[open] .masonry-field-settings-toggle::after {
  content: "−";
}

.masonry-field-settings-menu {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.masonry-field-body {
  margin-top: 0.25rem;
}

.masonry-ghost {
  opacity: 0.6;
  border-style: dashed;
}

.masonry-builder {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
}

.masonry-preview-wrapper {
  min-height: 300px;
  background: #f8f9fa;
  border: 1px dashed #ccc;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@container (max-width: 30rem) {
  .masonry-field-header-top {
    grid-template-columns: 1fr;
  }
}
.date-range-picker {
  position: relative;
}
.date-range-picker__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.date-range-picker__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.date-range-picker__panel {
  position: absolute;
  top: 0;
  left: 0;
  min-width: min(100vw - 1rem, 23rem);
  width: min(100vw - 1rem, 23rem);
  max-width: calc(100vw - 1rem);
  max-height: min(32rem, 100vh - 1rem);
  overflow-y: auto;
  z-index: 1085;
}
.date-range-picker__selection {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.date-range-picker__selection-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.875rem;
  background: #f8fafc;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.date-range-picker__selection-item.is-active {
  border-color: rgba(13, 110, 253, 0.32);
  background: rgba(13, 110, 253, 0.08);
  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.08);
}
.date-range-picker__selection-label {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}
.date-range-picker__selection-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
}
.date-range-picker__helper {
  grid-column: 1/-1;
  font-size: 0.82rem;
  color: #64748b;
}
.date-range-picker__times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.date-range-picker__time-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.date-range-picker__time-label {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}
.date-range-picker__time-input {
  min-width: 0;
}
.date-range-picker__calendar {
  padding: 0.875rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 1rem;
  background: #fff;
}
.date-range-picker__calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.date-range-picker__calendar-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  background: #fff;
  color: #334155;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.date-range-picker__calendar-nav:hover {
  border-color: rgba(13, 110, 253, 0.35);
  background: rgba(13, 110, 253, 0.06);
  color: #0d6efd;
}
.date-range-picker__calendar-nav:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.18);
}
.date-range-picker__month-label {
  flex: 1 1 auto;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}
.date-range-picker__weekdays, .date-range-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
  background: linear-gradient(to right, rgba(251, 146, 60, 0.08) 0, rgba(251, 146, 60, 0.08) 14.2857142857%, transparent 14.2857142857%, transparent 85.7142857143%, rgba(251, 146, 60, 0.08) 85.7142857143%, rgba(251, 146, 60, 0.08) 100%);
  border-radius: 0.875rem;
}
.date-range-picker__weekdays {
  margin-bottom: 0.35rem;
}
.date-range-picker__weekday {
  padding: 0.2rem 0;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}
.date-range-picker__weekday:first-child, .date-range-picker__weekday:last-child {
  color: #c2410c;
}
.date-range-picker__day {
  position: relative;
  min-height: 2.5rem;
  padding: 0.125rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0f172a;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.date-range-picker__day span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: 0 auto;
  border-radius: 999px;
  font-size: 0.9rem;
}
.date-range-picker__day:hover {
  background: rgba(13, 110, 253, 0.08);
}
.date-range-picker__day:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.18);
  z-index: 1;
}
.date-range-picker__day.is-outside-month {
  color: #94a3b8;
}
.date-range-picker__day.is-in-range {
  background: rgba(13, 110, 253, 0.12);
}
.date-range-picker__day.is-range-start {
  border-radius: 999px 0 0 999px;
}
.date-range-picker__day.is-range-end {
  border-radius: 0 999px 999px 0;
}
.date-range-picker__day.is-range-start span, .date-range-picker__day.is-range-end span, .date-range-picker__day.is-single-point span {
  background: #0d6efd;
  color: #fff;
  font-weight: 700;
}
.date-range-picker__day.is-single-point {
  border-radius: 999px;
  background: transparent;
}
.date-range-picker__day.is-range-start.is-range-end {
  border-radius: 999px;
}
.date-range-picker__day.is-today:not(.is-range-start):not(.is-range-end):not(.is-single-point) span {
  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.45);
  color: #0d6efd;
  font-weight: 700;
}
.date-range-picker__actions {
  align-items: center;
}
.date-range-picker.is-open .date-range-picker__toggle {
  border-color: rgba(13, 110, 253, 0.45);
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.12);
}

@media (max-width: 991.98px) {
  .date-range-picker__panel {
    min-width: 100%;
    width: 100%;
  }
  .date-range-picker__selection {
    grid-template-columns: 1fr;
  }
  .date-range-picker__times {
    grid-template-columns: 1fr;
  }
}
.form-check-input.is-valid ~ .form-check-label,
.was-validated .form-check-input:valid ~ .form-check-label {
  color: unset;
}

/* Empty/switched-off page-builder components: invisible to site visitors
   (render nothing), but inside the editor preview iframe they show this
   labelled placeholder so the block stays visible and selectable. */
.component-empty-state {
  border: 2px dashed #c3c9d4;
  border-radius: 0.75rem;
  padding: 2.5rem 1.5rem;
  margin: 0.75rem 0;
  text-align: center;
  color: #6c757d;
  background: repeating-linear-gradient(45deg, #fafbfc, #fafbfc 12px, #f2f4f7 12px, #f2f4f7 24px);
}
.component-empty-state .component-empty-state-message {
  font-weight: 600;
  font-size: 1.05rem;
}
.component-empty-state .component-empty-state-hint {
  font-size: 0.875rem;
  margin-top: 0.35rem;
}

/* Direction A home design: Hero Banner + Feature Cards page-builder
   components (CustomPages\HeroComponent / CapabilitiesComponent). The canvas
   is drawn by templates/page/js/heroNetwork.js. */
.pb-hero {
  position: relative;
  overflow: hidden;
  background: var(--hero-bg, #141a35);
  color: var(--hero-text, #fff);
  padding: clamp(4rem, 10vw, 7rem) 1.5rem;
}

.pb-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.pb-hero__content {
  position: relative;
  z-index: 1;
  max-width: 60rem;
  margin-inline: auto;
  text-align: center;
}

.pb-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  font-weight: 600;
  color: #e3a23c;
  margin-bottom: 1.1rem;
}

.pb-hero__heading {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  text-wrap: balance;
  margin-bottom: 0;
}

.pb-hero__subheading {
  color: #d9dce8;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 44rem;
  margin: 1.25rem auto 0;
}

.pb-hero__ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
}

.pb-hero__cta {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: var(--bs-border-radius, 0.5rem);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pb-hero__cta--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
}
.pb-hero__cta--ghost:hover, .pb-hero__cta--ghost:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.pb-capability-strip {
  padding: 4rem 1.5rem;
}
.pb-capability-strip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  max-width: 72rem;
  margin-inline: auto;
}

.pb-capability-card {
  background: #fff;
  border: 1px solid #e2e5ef;
  border-radius: var(--bs-border-radius, 1rem);
  padding: 1.75rem 1.5rem;
  box-shadow: 0 10px 30px -18px rgba(20, 26, 53, 0.25);
}
.pb-capability-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(227, 162, 60, 0.14);
  color: #b97f22;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.pb-capability-card__name {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.pb-capability-card__desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #565e7e;
  margin-bottom: 0;
}

/* Composable page-builder primitives: buttons, icons, cards, and the
   layout-neutral container child wrapper. */
.pb-container-children {
  display: contents;
}

.pb-sortable-column > .pb-container-children {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.pb-btn {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border-radius: var(--bs-border-radius, 0.5rem);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pb-btn--ghost {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 40%, transparent);
}
.pb-btn--ghost:hover, .pb-btn--ghost:focus {
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-color: color-mix(in srgb, currentColor 70%, transparent);
  color: inherit;
}
.pb-btn--link {
  background: transparent;
  color: #b97f22;
  padding-left: 0;
  padding-right: 0;
  text-decoration: underline;
}
.pb-btn--link:hover, .pb-btn--link:focus {
  color: #8a5d15;
}

/* Buttons inside the dark hero keep the original CTA look. */
.pb-hero .pb-btn--ghost {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.pb-hero .pb-btn--ghost:hover, .pb-hero .pb-btn--ghost:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.pb-hero .pb-btn--link {
  color: #e3a23c;
}
.pb-hero .pb-btn--link:hover, .pb-hero .pb-btn--link:focus {
  color: #f0be6d;
}

.pb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.pb-catalog-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
}
.pb-catalog-item__eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6c757d;
  margin: 0;
}
.pb-catalog-item__name {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.pb-catalog-item__media {
  display: block;
  height: 90px;
  overflow: hidden;
  border-radius: 0.5rem;
}
.pb-catalog-item__price {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
}
.pb-catalog-item__cta {
  margin-top: auto;
}

.pb-continue-learning {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.pb-continue-learning__heading {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0;
}
.pb-continue-learning__path {
  font-size: 0.85rem;
  opacity: 0.75;
  margin: 0;
}
.pb-continue-learning__activity {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}
.pb-continue-learning--browse .pb-continue-learning__heading {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  opacity: 1;
  margin: 0 0 0.5rem;
}

.pb-recent-orders {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pb-recent-orders__heading {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0;
}
.pb-recent-orders__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.9rem;
}
.pb-recent-orders__reference {
  font-weight: 700;
}
.pb-recent-orders__total {
  font-weight: 700;
}
.pb-recent-orders__date {
  opacity: 0.65;
  font-size: 0.8rem;
}
.pb-recent-orders__message {
  opacity: 0.65;
  font-size: 0.9rem;
  margin: 0;
}

.pb-countdown {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pb-countdown__label {
  font-size: 0.85rem;
  opacity: 0.75;
}
.pb-countdown__value {
  font-size: 1.3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent, #f26722);
}
.pb-countdown__ended-text {
  font-size: 0.9rem;
  font-style: italic;
  opacity: 0.7;
}

.pb-image {
  display: block;
  position: static;
  width: 100%;
  max-width: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
}

.pb-sized {
  --pb-w: initial;
  --pb-w-tablet: initial;
  --pb-w-phone: initial;
  --pb-max-w: initial;
  --pb-min-h: initial;
  width: var(--pb-w, auto);
  max-width: var(--pb-max-w, none);
  min-height: var(--pb-min-h, 0);
  flex: 0 1 var(--pb-w, auto);
  min-width: 0;
}

.pb-sized > div {
  min-height: inherit;
}

.pb-has-overlay {
  position: relative;
}

.pb-has-overlay > .pb-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.has-background-media {
  height: auto;
  display: block;
  text-align: inherit;
  color: inherit;
}

.pb-has-overlay .overlay {
  background: transparent;
}

.pb-bordered {
  border-radius: var(--pb-radius, 0);
  border-width: var(--pb-border-width, 0);
  border-style: var(--pb-border-style, none);
  border-color: var(--pb-border-color, currentColor);
}

.pb-bordered--clip {
  overflow: hidden;
}

.pb-shadow--sm {
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
}

.pb-shadow--md {
  box-shadow: 0 8px 24px -8px rgba(16, 24, 40, 0.18), 0 2px 6px rgba(16, 24, 40, 0.06);
}

.pb-shadow--lg {
  box-shadow: 0 24px 48px -16px rgba(16, 24, 40, 0.28), 0 4px 12px rgba(16, 24, 40, 0.08);
}

.pb-text-sized {
  font-size: var(--pb-fs, inherit);
}

.pb-text-sized > * {
  font-size: inherit;
}

.pb-text-styled > * {
  font-weight: inherit;
  color: inherit;
}

@media (max-width: 991.98px) {
  .pb-text-sized {
    font-size: var(--pb-fs-tablet, var(--pb-fs, inherit));
  }
}
@media (max-width: 767.98px) {
  .pb-text-sized {
    font-size: var(--pb-fs-phone, var(--pb-fs-tablet, var(--pb-fs, inherit)));
  }
}
@media (max-width: 991.98px) {
  .pb-sized {
    width: var(--pb-w-tablet, var(--pb-w, auto));
    flex-basis: var(--pb-w-tablet, var(--pb-w, auto));
  }
}
@media (max-width: 767.98px) {
  .pb-sized {
    width: var(--pb-w-phone, var(--pb-w-tablet, var(--pb-w, auto)));
    flex-basis: var(--pb-w-phone, var(--pb-w-tablet, var(--pb-w, auto)));
  }
}
.pb-grid {
  display: grid;
  grid-template-columns: repeat(var(--pb-cols, 1), minmax(0, 1fr));
  gap: var(--pb-grid-gap, 0);
  align-items: var(--pb-grid-align, stretch);
}

@media (max-width: 991.98px) {
  .pb-grid {
    grid-template-columns: repeat(var(--pb-cols-tablet, var(--pb-cols, 1)), minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .pb-grid {
    grid-template-columns: repeat(var(--pb-cols-phone, var(--pb-cols-tablet, var(--pb-cols, 1))), minmax(0, 1fr));
  }
}
.pb-points-balance {
  display: inline;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.pb-card {
  background: var(--bs-card-bg, #fff);
  color: var(--bs-card-color, inherit);
  border: 1px solid #e2e5ef;
  border-radius: var(--bs-border-radius, 1rem);
  padding: 1.75rem 1.5rem;
  box-shadow: 0 10px 30px -18px rgba(20, 26, 53, 0.25);
}
.pb-card .pb-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(227, 162, 60, 0.14);
  color: #b97f22;
  margin-bottom: 1rem;
}
.pb-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.pb-card p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #565e7e;
  margin-bottom: 0;
}

/* Tabs component: thin wrapper around Bootstrap's own .nav-tabs/.nav-pills
   and .tab-content/.tab-pane, which already carry the real chrome. */
.pb-tabs__nav {
  flex-wrap: wrap;
}

.pb-tabs__content {
  min-width: 0;
}

.pb-tab-panel {
  min-width: 0;
}

.pb-tabs--side {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.pb-tabs--side > .pb-tabs__nav {
  flex-direction: column;
  flex: 0 0 auto;
  border-bottom: 0;
  border-right: 1px solid var(--bs-border-color, #dee2e6);
  padding-right: 1rem;
}
.pb-tabs--side > .pb-tabs__content {
  flex: 1 1 auto;
}

@media (max-width: 767.98px) {
  .pb-tabs--side {
    flex-direction: column;
  }
  .pb-tabs--side > .pb-tabs__nav {
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    padding-right: 0;
    padding-bottom: 0.5rem;
  }
}
.pb-tabs--preview-all .tab-pane {
  display: block !important;
  opacity: 1 !important;
}

.pb-tabs--preview-all .pb-tabs__content > .tab-pane + .tab-pane {
  border-top: 1px dashed var(--bs-border-color, #dee2e6);
  margin-top: 1rem;
  padding-top: 1rem;
}

/* State Toggle: button bar chrome + the default "not this state" treatment
   for a tagged element with no explicit StateFormat entry for the active
   key. Anything more specific than dimming is authored per-state via
   StateFormat itself, not here - see functions/CustomPages/StateFormat.php. */
.pb-state-group__content {
  display: contents;
}

.pb-state-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.pb-state-btn {
  border: 1px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-body-bg, #fff);
  border-radius: var(--bs-border-radius, 0.375rem);
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  transition: background-color 0.16s, color 0.16s, border-color 0.16s;
}

.pb-state-btn[aria-pressed=true] {
  background: var(--bs-primary, #0d6efd);
  border-color: var(--bs-primary, #0d6efd);
  color: var(--primary-contrast, #fff);
}

/* Composed heroes carry the pb-hero__* classes on component wrapper divs
   (via the class format); descendant rules make the typography land on the
   actual elements. Heading tags carry their own sizes, so inherited
   font-size alone would lose to element CSS. */
.pb-heading {
  text-wrap: balance;
}

.pb-hero__heading h1,
.pb-hero__heading h2 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  text-wrap: balance;
  margin-bottom: 0;
}

.pb-hero__eyebrow p,
.pb-hero__eyebrow div {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  font-weight: 600;
  color: #e3a23c;
  margin-bottom: 0;
}

.pb-hero__subheading p,
.pb-hero__subheading div {
  color: #d9dce8;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 44rem;
  margin: 0 auto;
}

.pb-hero__ctas {
  margin-top: 2.25rem;
}

.pb-menu .nav {
  --bs-nav-link-padding-y: 0.25rem;
  margin-bottom: 0;
}
.pb-menu .pb-menu__list--start {
  justify-content: flex-start;
  align-items: flex-start;
}
.pb-menu .pb-menu__list--center {
  justify-content: center;
  align-items: center;
}
.pb-menu .pb-menu__list--end {
  justify-content: flex-end;
  align-items: flex-end;
}

.pb-menu:not(.pb-menu--navbar) .nav-link {
  color: inherit;
  padding-left: 0;
  padding-right: 0;
}

.pb-menu--horizontal .nav {
  column-gap: 1.25rem;
}

.pb-menu--vertical .nav {
  row-gap: 0.35rem;
}

.pb-menu--collapsible > .pb-menu__toggler {
  display: inline-flex;
  align-items: center;
}

@media (min-width: 992px) {
  .pb-menu--collapsible > .pb-menu__toggler {
    display: none;
  }
  .pb-menu--collapsible > .pb-menu__collapse {
    display: flex !important;
    flex-basis: auto;
  }
}
.pb-site-logo {
  display: inline-flex;
  align-items: center;
}
.pb-site-logo img {
  max-height: 52px;
  width: auto;
  object-fit: contain;
}

.pb-site-logo__text {
  font-weight: 700;
  font-size: 1.25rem;
}

.approval-banner {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.approval-banner__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.6;
}

.approval-banner__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  flex-shrink: 0;
}

.approval-banner__items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.approval-banner__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.approval-banner__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0.8rem;
  background: rgba(0, 0, 0, 0.06);
}

.approval-banner__title {
  font-weight: 700;
  line-height: 1.3;
}

.approval-banner__meta {
  font-size: 0.875rem;
  opacity: 0.75;
  max-width: 68ch;
}

.approval-banner__link,
.approval-banner__dismiss {
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.65;
  transition: opacity 0.15s ease;
}
.approval-banner__link:hover, .approval-banner__link:focus-visible,
.approval-banner__dismiss:hover,
.approval-banner__dismiss:focus-visible {
  opacity: 1;
}

.approval-banner__dismiss {
  background: none;
  border: 0;
  padding: 0;
  line-height: 1;
}

.activity-feed__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.activity-feed__item:last-child {
  border-bottom: 0;
}

.activity-feed__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0.8rem;
  background: rgba(0, 0, 0, 0.06);
}

.activity-feed__title {
  font-weight: 600;
  line-height: 1.3;
}

.activity-feed__receipt-image {
  max-height: 22rem;
}

.member-notice__icon {
  flex-shrink: 0;
  background: rgba(42, 120, 214, 0.12);
  color: #1c5cab;
}

.member-notice__message {
  line-height: 1.45;
}

.program-faq__section-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color, #6c757d);
  margin: 0 0 0.5rem;
}

.program-faq .accordion-button {
  font-weight: 600;
}

.program-faq .accordion-body > :last-child {
  margin-bottom: 0;
}

.coupons-admin__thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
}

.coupons-admin__preview {
  max-height: 12rem;
}

.offers-row:has(.offers-carousel--unavailable) > .pb-container-children > .pb-sized {
  --pb-w: 100% !important;
}

div:has(> .offers-card .offers-carousel--unavailable) {
  display: none;
}

.pb-container-children:has(> .pb-hidden-marker) > [data-component-uuid]:only-of-type {
  --pb-w: 100% !important;
  --pb-w-tablet: 100% !important;
  --pb-w-phone: 100% !important;
}

.pb-stack-when-hidden:has(.pb-hidden-marker) > .pb-container-children > [data-component-uuid] {
  --pb-w: 100% !important;
  --pb-w-tablet: 100% !important;
  --pb-w-phone: 100% !important;
}

#recentDecisionsModal .modal-title,
.activity-report-modal .modal-title {
  font-size: 1.125rem;
  line-height: 1.3;
}

.receipt-upload-modal .upload-success-icon.upload-success-icon--denied {
  color: var(--bs-danger, #dc3545);
}

.receipt-upload-modal .upload-confirm__row .upload-confirm__multiline {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 0.4rem;
  padding: 0.3rem 0.5rem;
  font: inherit;
  font-weight: 700;
  line-height: 1.35;
  color: inherit;
  resize: none;
  overflow: hidden;
}

.receipt-upload-modal .upload-confirm.is-editing .upload-confirm__multiline {
  border-color: #d4d4d2;
  background: #fff;
  text-align: left;
}

.receipt-upload-modal .upload-success-icon.upload-success-icon--pending {
  color: var(--bs-warning, #ffc107);
}

.auth-promo__intro {
  font-size: 0.95rem;
  line-height: 1.35;
  margin-bottom: 1.5rem;
}

.auth-promo__fineprint {
  font-size: 0.8rem;
  opacity: 0.75;
  margin: 0 0 1.25rem;
}

.auth-promo__card {
  max-width: 15rem;
  margin: 0 0 1.25rem;
}

.auth-promo__card .pb-image {
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
}

.auth-promo__fineprint .terms-link__link {
  color: inherit;
  text-decoration: underline;
}

.auth-link-emphasis a,
.auth-link-emphasis a:hover {
  font-weight: 700;
  text-decoration: underline;
}

.twofa-setup-key__value {
  font-size: 1rem;
  letter-spacing: 0.08em;
  word-break: break-all;
}

.pb-sized:has(> .image-card) {
  border-radius: var(--bs-border-radius-xl, 1rem);
  overflow: hidden;
}

.image-card .ballot-card-wrap .ballot-card {
  margin-bottom: 0;
}

@media (min-width: 992px) {
  .image-card .ballot-card-wrap {
    position: absolute;
    right: 3rem;
    bottom: 0;
    height: auto !important;
    z-index: 3;
  }
}
.contest-band__terms .terms-link {
  margin-top: 0.25rem;
  font-size: 0.875rem;
}

.contest-band__terms .terms-link__link {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}

.about-modal__lead {
  font-size: 1.05rem;
}

.about-modal__list li {
  margin-bottom: 0.4rem;
}

.about-modal__legal {
  margin-bottom: 0;
  font-size: 0.85rem;
}

.promo-terms__title {
  margin: 0 0 0.25rem;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}

.promo-terms__list > li {
  margin-bottom: 0.9rem;
}

.promo-terms__fineprint {
  margin-top: 1.25rem;
  font-size: 0.8rem;
}



/* error-404.css */
.error-404-card {
  box-sizing: border-box;
}
.error-404-card * {
  box-sizing: border-box;
}
.error-404-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: min(60vh, 620px);
  max-width: 480px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #1b1e2e;
  text-align: center;
}

.error-404-code {
  font-size: clamp(3.5rem, 10vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #09083a;
  margin: 0;
  background: radial-gradient(120px circle at 50% 0%, #eceafb, transparent 70%);
}

.error-404-title {
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  font-weight: 600;
  margin: 0.5rem 0 0.5rem;
}

.error-404-message {
  font-size: 0.95rem;
  color: #5b6178;
  max-width: 40ch;
  margin: 0 auto 1.75rem;
  line-height: 1.6;
}

.error-404-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.error-404-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.65rem 1.35rem;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.error-404-btn:hover {
  transform: translateY(-1px);
}

.error-404-btn-primary {
  background: #09083a;
  color: #ffffff;
  border: 1.5px solid #09083a;
  box-shadow: 0 6px 16px rgba(9, 8, 58, 0.18);
}
.error-404-btn-primary:hover {
  background: #12114e;
  color: #ffffff;
}

.error-404-btn-secondary {
  background: #ffffff;
  color: #09083a;
  border: 1.5px solid #e7e9f5;
}
.error-404-btn-secondary:hover {
  border-color: #09083a;
}



/* feedback-prompt.css */
.pb-feedback-prompt {
  color: inherit;
}

.pb-feedback-prompt__icon {
  font-size: 1.75rem;
  display: block;
  margin-bottom: 0.5rem;
}

.pb-feedback-prompt__heading {
  font-weight: 700;
}

.pb-feedback-prompt__text {
  opacity: 0.9;
}



/* generic-content-modal.css */
.generic-content-modal-body {
  min-height: 40vh;
  max-height: 75vh;
  overflow-y: auto;
}



/* journey-flows.css */
@charset "UTF-8";
/*
 * /admin/journey_flows — Journey Flows.
 *
 * Everything is scoped under #jfBuilder, same arrangement as
 * user-segments.scss (which this screen is built alongside — a flow chains
 * saved User Profiles together). Colours come from Bootstrap CSS variables
 * wherever one exists so the screen follows the admin theme, including dark
 * mode, rather than pinning its own palette.
 */
#jfBuilder {
  --jf-brand: #4f46e5;
  --jf-surface: var(--bs-body-bg, #fff);
  --jf-line: var(--bs-border-color, #dee2e6);
}
#jfBuilder .jf-header-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.85rem;
  font-size: 1.25rem;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35);
}
#jfBuilder .jf-subtitle {
  font-size: 0.92rem;
}
#jfBuilder .jf-new-btn {
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  border: 0;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
}
#jfBuilder .jf-new-btn:hover {
  filter: brightness(1.06);
  color: #fff;
}
#jfBuilder .jf-save-btn {
  color: #fff;
  background: var(--jf-brand);
  border: 0;
  font-weight: 600;
}
#jfBuilder .jf-save-btn:hover {
  filter: brightness(1.06);
  color: #fff;
}
#jfBuilder .jf-panel {
  background: var(--jf-surface);
  border: 1px solid var(--jf-line);
  overflow: hidden;
}
#jfBuilder .jf-panel-head {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--jf-line);
  background: var(--bs-tertiary-bg, #f8f9fa);
  font-size: 0.95rem;
}
#jfBuilder .jf-saved-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  max-height: 26rem;
  overflow-y: auto;
}
#jfBuilder .jf-saved-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.6rem;
  cursor: pointer;
}
#jfBuilder .jf-saved-item:hover {
  background: var(--bs-tertiary-bg, #f1f3f5);
}
#jfBuilder .jf-saved-item.is-active {
  background: var(--bs-tertiary-bg, #f1f3f5);
  box-shadow: inset 3px 0 0 var(--jf-brand);
}
#jfBuilder .jf-saved-name {
  font-weight: 600;
}
#jfBuilder .jf-skel {
  padding: 0.6rem 0.75rem;
}
#jfBuilder .jf-skel-line {
  display: block;
  height: 0.8rem;
  border-radius: 0.4rem;
  background: linear-gradient(90deg, var(--bs-tertiary-bg, #eee) 25%, var(--bs-secondary-bg, #e0e0e0) 37%, var(--bs-tertiary-bg, #eee) 63%);
  background-size: 400% 100%;
  animation: jf-shimmer 1.3s ease infinite;
}
@keyframes jf-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
#jfBuilder {
  /* ---------------- Stage rows ---------------- */
}
#jfBuilder .jf-stage-row {
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--jf-line);
}
#jfBuilder .jf-stage-handle {
  min-width: 1.5rem;
  text-align: center;
  font-weight: 700;
}
#jfBuilder .jf-add-btn {
  color: var(--jf-brand);
  background: transparent;
  border: 1px solid var(--jf-brand);
  font-weight: 600;
}
#jfBuilder .jf-add-btn:hover {
  background: rgba(79, 70, 229, 0.08);
  color: var(--jf-brand);
}
#jfBuilder {
  /* ---------------- Chart ---------------- */
}
#jfBuilder .jf-chart-wrap {
  position: relative;
  height: 22rem;
  max-height: 60vh;
}
#jfBuilder .jf-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 767.98px) {
  #jfBuilder .jf-panel {
    border-radius: 1rem;
  }
  #jfBuilder .jf-stage-row {
    padding: 0.5rem !important;
  }
}



/* maintenance.css */
body.maintenance-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eceafb;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
body.maintenance-page .maintenance-card {
  box-sizing: border-box;
}
body.maintenance-page .maintenance-card * {
  box-sizing: border-box;
}
body.maintenance-page .maintenance-card {
  max-width: 440px;
  margin: 1.5rem;
  padding: 2.5rem 2rem;
  background: #ffffff;
  border: 1px solid #e7e9f5;
  border-radius: 1rem;
  box-shadow: 0 20px 45px rgba(9, 8, 58, 0.12);
  text-align: center;
}
body.maintenance-page .maintenance-eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: #eceafb;
  color: #09083a;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.maintenance-page .maintenance-title {
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  font-weight: 700;
  color: #1b1e2e;
  margin: 0 0 0.75rem;
}
body.maintenance-page .maintenance-message {
  font-size: 0.95rem;
  color: #5b6178;
  line-height: 1.6;
  margin: 0;
}



/* multiform-slider-verify.css */
.mf-slider-verify {
  --mf-slider-thumb-size: 3.5rem;
  --mf-slider-track-height: 5rem;
  --mf-slider-track-bg: #eef1f4;
  --mf-slider-track-border: #d7dce2;
  --mf-slider-accent: #2563eb;
  --mf-slider-success: #198754;
  --mf-slider-danger: #b02a37;
  --mf-slider-target: 82%;
}
.mf-slider-verify__heading {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
}
.mf-slider-verify__track {
  position: relative;
  height: var(--mf-slider-track-height);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--mf-slider-track-bg);
  border: 1px solid var(--mf-slider-track-border);
}
.mf-slider-verify__prompt {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--mf-slider-thumb-size);
  right: calc(100% - var(--mf-slider-target) + var(--mf-slider-track-height) * 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
  transition: opacity 200ms ease-out;
}
.mf-slider-verify__target {
  position: absolute;
  top: 50%;
  left: 100%;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: calc(var(--mf-slider-thumb-size) * 1.3);
  height: calc(var(--mf-slider-thumb-size) * 1.3);
  background-image: var(--mf-slider-target-art, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}
.mf-slider-verify__target::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 3px dashed #9ca3af;
  border-radius: 50%;
}
.mf-slider-verify__track[style*="--mf-slider-target-art"] .mf-slider-verify__target::before {
  content: none;
}
.mf-slider-verify__slider {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 calc(var(--mf-slider-thumb-size) / 2);
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: grab;
}
.mf-slider-verify__slider:active {
  cursor: grabbing;
}
.mf-slider-verify__slider:disabled {
  cursor: default;
}
.mf-slider-verify__slider:focus-visible {
  outline: 3px solid var(--mf-slider-accent);
  outline-offset: -3px;
}
.mf-slider-verify__slider::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
}
.mf-slider-verify__slider::-moz-range-track {
  height: 100%;
  background: transparent;
}
.mf-slider-verify__slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--mf-slider-thumb-size);
  height: var(--mf-slider-thumb-size);
  border: 0;
  border-radius: 50%;
  background: var(--mf-slider-draggable-art, #6b7280);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
}
.mf-slider-verify__slider::-moz-range-thumb {
  width: var(--mf-slider-thumb-size);
  height: var(--mf-slider-thumb-size);
  border: 0;
  border-radius: 50%;
  background: var(--mf-slider-draggable-art, #6b7280);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
}
.mf-slider-verify__status {
  min-height: 1.35rem;
  margin: 0.6rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
}
.mf-slider-verify__status--solved {
  color: var(--mf-slider-success);
}
.mf-slider-verify__status--missed {
  color: var(--mf-slider-danger);
}
.mf-slider-verify__reset {
  padding: 0;
}
.mf-slider-verify--moving .mf-slider-verify__prompt, .mf-slider-verify--solved .mf-slider-verify__prompt {
  opacity: 0;
}
.mf-slider-verify--aiming .mf-slider-verify__target {
  filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.6));
}
.mf-slider-verify--solved .mf-slider-verify__slider::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}
.mf-slider-verify--solved .mf-slider-verify__slider::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}

.mf-slider-verify-reveal-wrapper {
  position: relative;
}

.mf-slider-verify-reveal-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  padding: 1rem;
  background: var(--mf-slider-verify-reveal-bg, #fff);
  transition: opacity 400ms ease, transform 400ms ease;
}
.mf-slider-verify-reveal-overlay--revealed {
  opacity: 0;
  transform: translateY(-1rem);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .mf-slider-verify__prompt {
    transition: none;
  }
  .mf-slider-verify-reveal-overlay {
    transition: none;
  }
}



/* multiform.css */
.multi-form .header.modal-header {
  border-bottom: unset;
}
.multi-form .form-tab-indicators > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.multi-form .form-tab-indicators i {
  opacity: 0.3;
  color: #161925;
  margin: 0;
}
.multi-form .form-tab-indicators .form-tab-indicator-line {
  width: 100%;
  height: 2px;
  align-self: start;
  background-color: rgba(22, 25, 37, 0.3);
  position: relative;
  z-index: 0;
  margin-top: 8px;
}
.multi-form .form-tab-indicators .form-tab-indicator-line:after {
  content: "";
  position: absolute;
  left: 0;
  width: 0%;
  height: 2px;
  opacity: 1;
  z-index: 1;
  background-color: #161925;
  transition: width 0.5s ease-in-out;
}
.multi-form .form-tab-indicators .multi-current {
  opacity: 1;
  color: #037FB0;
  font-weight: bold;
}
.multi-form .form-tab-indicators .multi-current i {
  opacity: 0.6;
  color: #037FB0;
}
.multi-form .form-tab-indicators .multi-current .form-tab-indicator-line:after {
  background-color: #037FB0;
  width: 100%;
}
.multi-form .form-tab-indicators .multi-complete {
  opacity: 1;
  color: #A0EB83;
}
.multi-form .form-tab-indicators .multi-complete i {
  opacity: 0.6;
  color: #A0EB83;
}
.multi-form .form-tab-indicators .multi-complete .form-tab-indicator-line:after {
  background-color: #A0EB83;
  width: 100%;
}

.pac-container {
  z-index: 1000000 !important;
}

.file-image-content {
  position: relative;
  min-height: 100px;
  min-width: 300px;
  margin-top: 1rem;
  container-type: inline-size;
}
.file-image-content .form-control.fileImageUpload.invalid + .fileupload {
  border-color: #FF0000;
  border-width: 2px;
}
.file-image-content .fileupload {
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  max-height: 200px;
  align-self: center;
}
.file-image-content .file-upload-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

@container (width <= 400px) {
  .file-upload-label {
    padding: 0.5rem !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }
}
.fileupload-tabulator .file-image {
  min-height: unset;
  max-height: unset;
  min-width: unset;
  max-width: unset;
}

.file-preview-list .file-preview-image {
  object-fit: cover;
}
.file-preview-list .file-preview-delete-button {
  width: 28px;
  height: 28px;
  z-index: 2;
}

.tree-select {
  position: relative;
}

.tree-select-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0.25rem 0 0;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5rem 0;
  max-height: min(18rem, 100vh - 1rem);
  overflow-y: auto;
  z-index: 1085;
}
.tree-select-menu.show {
  display: block;
}

.tree-select-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tree-select-list.tree-select-list--collapsed {
  display: none;
}

.tree-select-row {
  display: flex;
  align-items: center;
}

.tree-select-toggle {
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  border: 0;
  background: none;
  color: #666;
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1.2rem;
  text-align: center;
}
.tree-select-toggle.tree-select-toggle--spacer {
  cursor: default;
}

.tree-select-label {
  flex: 1 1 auto;
  display: block;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  color: #333;
}
.tree-select-label:hover {
  background-color: #f0f0f0;
}
.tree-select-label.tree-select-label--selected {
  font-weight: bold;
}
.tree-select-label.tree-select-label--group {
  cursor: default;
  font-weight: 600;
  color: #666;
}
.tree-select-label.tree-select-label--group:hover {
  background-color: transparent;
}

.tree-select-icon {
  margin-right: 0.4rem;
  color: #888;
}

.tree-select-description {
  display: block;
  font-size: 0.75rem;
  color: #888;
  font-weight: normal;
  white-space: normal;
}

.tree-select-node--flat .tree-select-label {
  padding-left: 0.5rem;
}



/* notifications.css */
.notification {
  position: fixed;
  z-index: 9999;
  bottom: 25px;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  max-width: min(24rem, 100vw - 2rem);
  padding: 0.85rem 1.1rem;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  --notification-stack-offset: 0px;
  transform: translateX(calc(100% + 2rem)) translateY(calc(-1 * var(--notification-stack-offset)));
  transition: transform 400ms ease-out;
}
.notification--visible {
  transform: translateX(0) translateY(calc(-1 * var(--notification-stack-offset)));
}
.notification--success {
  background-color: #198754;
}
.notification--error {
  background-color: #dc3545;
}
.notification--warning {
  background-color: #b8860b;
  color: #fff;
}
.notification--info {
  background-color: #0d6efd;
}

.notification-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.notification-message {
  flex: 1 1 auto;
  font-size: 0.925rem;
  line-height: 1.35;
}

.notification-action {
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
}
.notification-action:hover {
  background: rgba(255, 255, 255, 0.15);
}

.notification-close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.8;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 0.15rem;
}
.notification-close:hover {
  opacity: 1;
}

.cloning-notification {
  position: fixed;
  top: 50%;
  width: 30vw;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(233, 233, 233, 0.5);
  padding: 20px 40px;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1055;
  backdrop-filter: blur(10px);
  text-align: center;
  animation: fadeIn 0.3s ease, fadeOut 0.3s ease 2.5s forwards;
}
.cloning-notification .cloning-notification-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.cloning-notification .cloning-notification-content i {
  font-size: 3rem;
}
.cloning-notification .cloning-notification-content p {
  margin: 0;
  font-size: 1.2rem;
  color: #28a745;
}

.notif-menu {
  width: min(24rem, 100vw - 2rem);
  max-height: min(30rem, 100vh - 6rem);
  overflow-y: auto;
}



/* password-strength.css */
.password-field-wrapper {
  position: relative;
}
.password-field-wrapper .toggle-password {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
}

.password-strength-meter {
  margin-top: 0.5rem;
}
.password-strength-meter__bar {
  height: 6px;
  border-radius: 999px;
  background: var(--bs-secondary-bg);
  overflow: hidden;
}
.password-strength-meter__fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  transition: width 200ms ease-out, background-color 200ms ease-out;
}
.password-strength-meter__fill--weak {
  background-color: var(--bs-danger);
}
.password-strength-meter__fill--fair {
  background-color: var(--bs-warning);
}
.password-strength-meter__fill--good {
  background-color: #8bc34a;
}
.password-strength-meter__fill--strong {
  background-color: var(--bs-success);
}
.password-strength-meter__fill--empty {
  width: 0%;
}
.password-strength-meter__label {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

.password-requirements {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}
.password-requirements__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}
.password-requirements__item i {
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
}
.password-requirements__item--met {
  color: var(--bs-success);
}
.password-requirements__item--met i {
  color: var(--bs-success);
}

.password-suggestion {
  margin-top: 0.5rem;
  padding: 0.6rem 0.85rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: 8px;
  background: var(--bs-tertiary-bg);
  cursor: pointer;
}
.password-suggestion:hover, .password-suggestion:focus-visible {
  border-color: var(--bs-primary);
  background: var(--bs-secondary-bg);
  outline: none;
}
.password-suggestion__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.password-suggestion__value {
  display: block;
  font-size: 0.95rem;
  word-break: break-all;
  color: var(--bs-body-color);
  background: transparent;
}
.password-suggestion__hint {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}



/* permission-matrix.css */
@charset "UTF-8";
.pmx {
  container-type: inline-size;
  container-name: pmx;
  display: block;
  color: var(--bs-body-color);
  --pmx-line: var(--bs-border-color);
  --pmx-surface: var(--bs-body-bg);
  --pmx-muted: var(--bs-secondary-color);
  --pmx-accent: var(--bs-primary);
  --pmx-rank-restricted: transparent;
  --pmx-rank-user: color-mix(in srgb, var(--bs-primary) 28%, transparent);
  --pmx-rank-mod: color-mix(in srgb, var(--bs-primary) 62%, transparent);
  --pmx-rank-admin: var(--bs-primary);
  --pmx-rank-tdc: var(--bs-primary);
}

.pmx__rail {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.pmx__rail-label {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pmx-muted);
}

.pmx__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.pmx__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.3;
  max-width: 22rem;
  background: var(--pmx-surface);
  border: 1px solid var(--pmx-line);
  color: var(--bs-body-color);
}
.pmx__chip:hover {
  border-color: var(--bs-secondary-color);
}
.pmx__chip[aria-pressed=true] {
  background: var(--bs-emphasis-color);
  border-color: var(--bs-emphasis-color);
  color: var(--bs-body-bg);
}

.pmx__swatch {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--pmx-muted);
  flex: 0 0 auto;
}
.pmx__chip[aria-pressed=true] .pmx__swatch {
  background: var(--bs-body-bg);
}

.pmx__chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.pmx__chip--locked {
  font-style: italic;
}

.pmx__chip--add {
  border-style: dashed;
}

.pmx__panes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

@container pmx (min-width: 680px) {
  .pmx__panes {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  }
  .pmx__editor {
    grid-column: 1;
    grid-row: 1;
  }
  .pmx__detail {
    grid-column: 1;
    grid-row: 2;
  }
  .pmx__map {
    grid-column: 2;
    grid-row: 1/span 2;
  }
}
@container pmx (min-width: 1100px) {
  .pmx__panes {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  }
}
@container pmx (min-width: 1400px) {
  .pmx__panes {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr) minmax(0, 21rem);
  }
  .pmx__detail {
    grid-column: 3;
    grid-row: 1;
  }
  .pmx__map {
    grid-column: 2;
    grid-row: 1;
  }
}
.pmx__editor,
.pmx__detail {
  border: 1px solid var(--pmx-line);
  background: var(--pmx-surface);
  padding: 0.75rem;
}

.pmx__editor[hidden] {
  display: none;
}

.pmx__editor-empty,
.pmx__detail-lede {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--pmx-muted);
  margin: 0;
}

.pmx__editor-head {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pmx-muted);
  margin: 0.875rem 0 0.375rem;
}
.pmx__editor-head:first-child {
  margin-top: 0;
}

.pmx__levels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}

.pmx__lvl {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  min-height: 2.25rem;
}
.pmx__lvl input {
  margin: 0;
}

.pmx__lvl--blocked {
  opacity: 0.45;
  cursor: not-allowed;
}

.pmx__tree {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pmx__tree .pmx__tree {
  margin-left: 0.5rem;
  padding-left: 0.5rem;
  border-left: 1px solid var(--pmx-line);
}

.pmx__scope {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  min-height: 1.85rem;
}
.pmx__scope input {
  margin: 0;
  flex: 0 0 auto;
}

.pmx__scope-label {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--bs-body-color);
}

.pmx__scope-picker--scrolling .pmx__tree {
  max-height: 14rem;
  overflow-y: auto;
  margin-top: 0.35rem;
}

.pmx__scope-filter {
  font-size: 0.8125rem;
}

.pmx__summary {
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 0 0 0.625rem;
  color: var(--bs-body-color);
}

.pmx__summary--busy::after {
  content: "";
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-left: 0.45rem;
  vertical-align: -1px;
  border: 2px solid var(--pmx-muted);
  border-right-color: transparent;
  border-radius: 50%;
  animation: pmx-spin 0.7s linear infinite;
}

@keyframes pmx-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pmx__summary--busy::after {
    animation-duration: 3s;
  }
}
.pmx__areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.625rem;
  align-items: start;
}

.pmx__area {
  border: 1px solid var(--pmx-line);
  background: var(--pmx-surface);
  padding: 0.625rem;
  transition: opacity 0.2s;
}

.pmx__area--off {
  opacity: 0.4;
}

.pmx__area--undescribed,
.pmx__area--disabled {
  border-style: dashed;
}

.pmx__area-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.pmx__area-title {
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0;
  color: var(--bs-body-color);
}

.pmx__area-count {
  font-size: 0.75rem;
  color: var(--pmx-muted);
  white-space: nowrap;
}
.pmx__area-count strong {
  color: var(--pmx-accent);
}

.pmx__area-absorb {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--pmx-muted);
  margin: 0;
}

.pmx__group {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pmx-muted);
  margin: 0.625rem 0 0.25rem;
}

.pmx__caps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.pmx__cap {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: start;
  gap: 0.4rem;
  font-size: 0.75rem;
  line-height: 1.35;
  transition: opacity 0.2s;
}

.pmx__cap-verb {
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pmx-muted);
  padding-top: 0.05rem;
  white-space: nowrap;
}

.pmx__cap-label {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--bs-body-color);
}

.pmx__cap-note {
  grid-column: 3;
  font-size: 0.6875rem;
  color: var(--pmx-muted);
}
.pmx__cap-note:empty {
  display: none;
}

.pmx__dot {
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.3rem;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 1px solid var(--pmx-accent);
  background: var(--pmx-rank-user);
}

.pmx__dot[data-required-role=restricted],
.pmx__cap[data-required-role=restricted] .pmx__dot {
  background: var(--pmx-rank-restricted);
}

.pmx__dot[data-required-role=user],
.pmx__cap[data-required-role=user] .pmx__dot {
  background: var(--pmx-rank-user);
}

.pmx__dot[data-required-role=mod],
.pmx__cap[data-required-role=mod] .pmx__dot {
  background: var(--pmx-rank-mod);
}

.pmx__dot[data-required-role=admin],
.pmx__cap[data-required-role=admin] .pmx__dot {
  background: var(--pmx-rank-admin);
}

.pmx__dot[data-required-role=tdc],
.pmx__cap[data-required-role=tdc] .pmx__dot {
  background: var(--pmx-rank-tdc);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-primary) 30%, transparent);
}

.pmx__cap[data-state=denied] {
  opacity: 0.38;
}
.pmx__cap[data-state=denied] .pmx__dot {
  background: transparent;
  border-color: var(--pmx-muted);
}

.pmx__cap[data-state=narrowed] {
  opacity: 0.62;
}
.pmx__cap[data-state=narrowed] .pmx__dot {
  background: transparent;
  border-style: dashed;
  border-color: var(--bs-warning-text-emphasis);
}
.pmx__cap[data-state=narrowed] .pmx__cap-note {
  color: var(--bs-warning-text-emphasis);
}

.pmx__cap[data-diff=added] .pmx__cap-label::after {
  content: " + new";
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bs-success-text-emphasis);
}

.pmx__cap[data-diff=removed] .pmx__cap-label {
  text-decoration: line-through;
}
.pmx__cap[data-diff=removed] .pmx__cap-label::after {
  content: " − removed";
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--bs-danger-text-emphasis);
}

.pmx__detail-title {
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0 0 0.2rem;
  color: var(--bs-body-color);
}

.pmx__detail-block {
  margin-top: 0.875rem;
}

.pmx__detail-label {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pmx-accent);
  margin: 0 0 0.25rem;
}

.pmx__detail-body {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--bs-body-color);
  margin: 0;
}

.pmx__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--pmx-line);
  font-size: 0.75rem;
  color: var(--pmx-muted);
}

.pmx__legend-label {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.pmx__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.pmx__legend-item .pmx__dot {
  margin-top: 0;
}

.pmx__legend-note {
  flex: 1 1 14rem;
  min-width: 0;
}

[data-bs-theme=dark] .pmx {
  --pmx-rank-user: color-mix(in srgb, var(--bs-primary) 34%, transparent);
  --pmx-rank-mod: color-mix(in srgb, var(--bs-primary) 68%, transparent);
}
[data-bs-theme=dark] .pmx .pmx__chip[aria-pressed=true] {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}
[data-bs-theme=dark] .pmx .pmx__swatch {
  background: var(--bs-secondary-color);
}
[data-bs-theme=dark] .pmx .pmx__chip[aria-pressed=true] .pmx__swatch {
  background: #fff;
}
[data-bs-theme=dark] .pmx .pmx__cap[data-state=denied] {
  opacity: 0.48;
}
[data-bs-theme=dark] .pmx .pmx__cap[data-state=narrowed] {
  opacity: 0.72;
}
[data-bs-theme=dark] .pmx .pmx__area--off {
  opacity: 0.5;
}



/* points-celebration.css */
@charset "UTF-8";
/* ── backdrop ─────────────────────────────────────────────────────────── */
.pts-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 8, 58, 0.88);
  animation: pts-backdrop-in 0.3s ease forwards;
}

.pts-overlay.pts-out {
  animation: pts-backdrop-out 0.4s ease forwards;
}

@keyframes pts-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes pts-backdrop-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* ── card ─────────────────────────────────────────────────────────────── */
.pts-card {
  position: relative;
  z-index: 1;
  background: linear-gradient(145deg, #0f0e3a 0%, #1a1560 60%, #0f2460 100%);
  border: 1px solid rgba(251, 191, 36, 0.35);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.1), 0 0 60px rgba(251, 191, 36, 0.12), 0 24px 64px rgba(0, 0, 0, 0.6);
  border-radius: 24px;
  padding: 2.5rem 2.5rem 2rem;
  text-align: center;
  min-width: 300px;
  max-width: 380px;
  width: 90vw;
  animation: pts-card-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
  cursor: default;
  overflow: hidden;
}

.pts-overlay.pts-out .pts-card {
  animation: pts-card-out 0.35s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

@keyframes pts-card-pop {
  from {
    transform: scale(0.35) translateY(40px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
@keyframes pts-card-out {
  from {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  to {
    transform: scale(0.75) translateY(-20px);
    opacity: 0;
  }
}
/* ── icon ─────────────────────────────────────────────────────────────── */
.pts-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
}

.pts-ring {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  border-color: rgba(251, 191, 36, 0.4);
}

.pts-ring-1 {
  inset: -14px;
  border-width: 2px;
  animation: pts-ring-pulse 2s ease-in-out infinite;
}

.pts-ring-2 {
  inset: -26px;
  border-width: 1.5px;
  animation: pts-ring-pulse 2s ease-in-out 0.4s infinite;
}

@keyframes pts-ring-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.45;
  }
}
.pts-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 24px rgba(245, 158, 11, 0.55);
  animation: pts-icon-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

@keyframes pts-icon-bounce {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
/* ── text ─────────────────────────────────────────────────────────────── */
.pts-heading {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.85);
  margin-bottom: 0.2rem;
  animation: pts-up 0.4s ease 0.35s both;
}

.pts-counter {
  font-size: clamp(3.5rem, 14vw, 5rem);
  font-weight: 900;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.03em;
  animation: pts-up 0.4s ease 0.4s both;
}

.pts-message {
  font-size: clamp(1rem, 3.4vw, 1.15rem);
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  max-width: 30ch;
  margin: 0.35rem auto 1.35rem;
  animation: pts-up 0.4s ease 0.4s both;
}

.pts-unit {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.8);
  margin-top: 0.15rem;
  margin-bottom: 1.25rem;
  animation: pts-up 0.4s ease 0.45s both;
}

@keyframes pts-up {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* ── breakdown ────────────────────────────────────────────────────────── */
.pts-breakdown {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  text-align: left;
}

.pts-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
  animation: pts-up 0.35s ease both;
  opacity: 0;
}

.pts-row:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pts-row-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pts-row-label i {
  font-size: 0.75rem;
  width: 16px;
  text-align: center;
}

.pts-row-amt {
  font-weight: 700;
  color: #fbbf24;
}

.pts-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(251, 191, 36, 0.25);
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  animation: pts-up 0.35s ease both;
  opacity: 0;
}

.pts-total-amt {
  color: #fbbf24;
}

/* ── button ───────────────────────────────────────────────────────────── */
.pts-btn {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  border: none;
  border-radius: 100px;
  padding: 0.6rem 2rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f0e3a;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
  animation: pts-up 0.4s ease 0.8s both;
}

.pts-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.55);
}

.pts-btn:active {
  transform: translateY(0);
}

/* ── progress bar ─────────────────────────────────────────────────────── */
.pts-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(to right, #f59e0b, #fbbf24);
  border-radius: 0 0 24px 24px;
  animation: pts-progress var(--pts-dur, 4s) linear forwards;
}

@keyframes pts-progress {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}
/* ── particles ────────────────────────────────────────────────────────── */
.pts-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.pts-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: transform, opacity;
  animation: pts-fly var(--pts-fdur, 1s) var(--pts-fdel, 0s) cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes pts-fly {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  70% {
    opacity: 0.8;
  }
  100% {
    transform: translate(calc(-50% + var(--pts-tx)), calc(-50% + var(--pts-ty))) scale(0.15);
    opacity: 0;
  }
}



/* points-earned-banner.css */
.pb-points-earned-banner:not(:empty) {
  padding: 1.5rem 1.5rem 0;
}



/* points.css */
/* Points Management admin page (/admin/points). Everything is scoped under
   #pointsMgmt so this file can ride the global bundle without leaking.
   Tokens lean on Bootstrap CSS variables for theme-awareness, matching the
   Media Library admin page convention. Compile: sass points.scss points.css */
#pointsMgmt {
  --pm-brand: #09083a;
  --pm-brand-hover: #12114e;
  --pm-surface: var(--bs-body-bg, #fff);
  --pm-success: #198754;
  --pm-danger: #dc3545;
  --pm-points: #b3801f;
}
#pointsMgmt .pm-subtitle {
  font-size: 0.9rem;
}
#pointsMgmt {
  /* ---------------- Header ---------------- */
}
#pointsMgmt .pm-header-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #fff;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35);
}
#pointsMgmt {
  /* ---------------- Panels ---------------- */
}
#pointsMgmt .pm-panel {
  background: var(--pm-surface);
  border: 1px solid var(--bs-border-color);
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(2, 6, 23, 0.06);
  overflow: hidden;
  height: 100%;
}
#pointsMgmt .pm-panel-head {
  padding: 1.05rem 1.3rem;
  border-bottom: 1px solid var(--bs-border-color);
  color: var(--pm-brand);
}
#pointsMgmt .pm-panel-head i {
  color: var(--bs-secondary-color);
}
#pointsMgmt {
  /* ---------------- Search ---------------- */
}
#pointsMgmt .pm-search .pm-search-input {
  padding-left: 38px;
  box-shadow: none;
}
#pointsMgmt .pm-search .pm-search-input:focus {
  border-color: color-mix(in srgb, var(--pm-brand) 35%, var(--bs-border-color));
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--pm-brand) 12%, transparent);
}
#pointsMgmt .pm-search .pm-search-icon {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 6px;
  color: var(--bs-secondary-color);
  pointer-events: none;
}
#pointsMgmt {
  /* ---------------- User list ---------------- */
}
#pointsMgmt .pm-user-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0.6rem 0.6rem;
  max-height: 540px;
  overflow-y: auto;
}
#pointsMgmt .pm-user-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 60px;
  padding: 0.6rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
#pointsMgmt .pm-user-row + .pm-user-row {
  margin-top: 2px;
}
#pointsMgmt .pm-user-row:hover {
  background: color-mix(in srgb, var(--pm-brand) 5%, transparent);
}
#pointsMgmt .pm-user-row:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--pm-brand) 35%, var(--bs-border-color));
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--pm-brand) 18%, transparent);
}
#pointsMgmt .pm-user-row[aria-selected=true] {
  background: color-mix(in srgb, var(--pm-brand) 8%, transparent);
  border-color: color-mix(in srgb, var(--pm-brand) 25%, var(--bs-border-color));
}
#pointsMgmt .pm-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.82rem;
  color: #fff;
  text-transform: uppercase;
}
#pointsMgmt .pm-user-meta {
  min-width: 0;
  flex: 1;
}
#pointsMgmt .pm-user-name {
  font-weight: 600;
  color: var(--bs-body-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pointsMgmt .pm-user-email {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pointsMgmt .pm-balance-pill {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
  background: color-mix(in srgb, var(--pm-points) 14%, var(--pm-surface));
  color: var(--pm-points);
}
#pointsMgmt .pm-list-msg {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
}
#pointsMgmt {
  /* ---------------- Pager ---------------- */
}
#pointsMgmt .pm-pager {
  padding: 0.75rem 1.3rem;
  border-top: 1px solid var(--bs-border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
#pointsMgmt .pm-pager-label {
  color: var(--bs-secondary-color);
  font-size: 0.82rem;
  font-weight: 600;
}
#pointsMgmt {
  /* ---------------- Empty state ---------------- */
}
#pointsMgmt .pm-empty {
  padding: 4rem 1.5rem;
}
#pointsMgmt .pm-empty-mark {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--bs-secondary-color);
  background: color-mix(in srgb, var(--pm-brand) 6%, transparent);
}
#pointsMgmt .pm-empty-copy {
  max-width: 360px;
  font-size: 0.9rem;
}
#pointsMgmt {
  /* ---------------- Balance hero ---------------- */
}
#pointsMgmt .pm-hero {
  padding: 1.5rem;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #0b1437 0%, #1e2a6b 100%);
}
#pointsMgmt .pm-hero-coin {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  color: #fff;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.45);
}
#pointsMgmt .pm-hero-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.7;
}
#pointsMgmt .pm-hero-value {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
#pointsMgmt .pm-hero-value .pm-hero-unit {
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.65;
  margin-left: 0.35rem;
}
#pointsMgmt .pm-hero-stat-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.66rem;
  font-weight: 700;
  opacity: 0.6;
}
#pointsMgmt .pm-hero-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#pointsMgmt .pm-hero-stat-value.is-earned {
  color: #6ee7b7;
}
#pointsMgmt .pm-hero-stat-value.is-spent {
  color: #fca5a5;
}
#pointsMgmt {
  /* ---------------- Adjust form ---------------- */
}
#pointsMgmt .pm-adjust {
  background: color-mix(in srgb, var(--bs-tertiary-bg, #f8f9fa) 70%, var(--pm-surface));
  border: 1px solid var(--bs-border-color);
  border-radius: 18px;
  padding: 1.25rem;
}
#pointsMgmt .pm-adjust-title {
  color: var(--pm-brand);
}
#pointsMgmt {
  /* Segmented Add / Remove control */
}
#pointsMgmt .pm-segment {
  display: inline-flex;
  background: var(--bs-tertiary-bg, #e9ecef);
  border-radius: 999px;
  padding: 4px;
}
#pointsMgmt .pm-segment-btn {
  border: none;
  background: transparent;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
#pointsMgmt .pm-segment-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--pm-brand) 25%, transparent);
}
#pointsMgmt .pm-segment-btn[aria-pressed=true][data-mode=add] {
  background: var(--pm-surface);
  color: var(--pm-success);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
#pointsMgmt .pm-segment-btn[aria-pressed=true][data-mode=remove] {
  background: var(--pm-surface);
  color: var(--pm-danger);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
#pointsMgmt .pm-apply-btn {
  border: none;
  font-weight: 700;
  color: #fff;
  transition: filter 150ms ease, transform 80ms ease;
}
#pointsMgmt .pm-apply-btn:disabled {
  opacity: 0.6;
}
#pointsMgmt .pm-apply-btn:not(:disabled):hover {
  filter: brightness(1.06);
}
#pointsMgmt .pm-apply-btn:not(:disabled):active {
  transform: translateY(1px);
}
#pointsMgmt[data-mode=add] .pm-apply-btn {
  background: linear-gradient(135deg, #20c997, #198754);
}
#pointsMgmt[data-mode=remove] .pm-apply-btn {
  background: linear-gradient(135deg, #f1707b, #dc3545);
}
#pointsMgmt {
  /* ---------------- History ---------------- */
}
#pointsMgmt .pm-history-title {
  color: var(--pm-brand);
}
#pointsMgmt .pm-count-badge {
  background: color-mix(in srgb, var(--pm-brand) 10%, var(--pm-surface));
  color: var(--pm-brand);
  font-weight: 700;
}
#pointsMgmt .pm-history-scroll {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
}
#pointsMgmt .pm-table {
  font-size: 0.85rem;
}
#pointsMgmt .pm-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--bs-secondary-color);
}
#pointsMgmt .pm-table .pm-amount {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#pointsMgmt .pm-table .pm-amount.is-pos {
  color: var(--pm-success);
}
#pointsMgmt .pm-table .pm-amount.is-neg {
  color: var(--pm-danger);
}
#pointsMgmt .pm-table .pm-admin-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--bs-body-color);
  background: color-mix(in srgb, var(--pm-brand) 8%, transparent);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}
#pointsMgmt .pm-table .pm-dash {
  color: var(--bs-secondary-color);
  opacity: 0.5;
}
#pointsMgmt .pm-table .pm-expired {
  color: var(--pm-danger);
  font-weight: 600;
}
#pointsMgmt {
  /* ---------------- Skeletons ---------------- */
}
#pointsMgmt .pm-skel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
}
#pointsMgmt .pm-skel-dot,
#pointsMgmt .pm-skel-line {
  background: linear-gradient(90deg, var(--bs-tertiary-bg, #eef2f7) 25%, var(--bs-secondary-bg, #e2e8f0) 50%, var(--bs-tertiary-bg, #eef2f7) 75%);
  background-size: 200% 100%;
  animation: pmShimmer 1.3s ease-in-out infinite;
  border-radius: 6px;
}
#pointsMgmt .pm-skel-dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: 0 0 auto;
}
#pointsMgmt .pm-skel-lines {
  flex: 1;
}
#pointsMgmt .pm-skel-line {
  display: block;
  height: 10px;
  width: 60%;
}
#pointsMgmt .pm-skel-line + .pm-skel-line {
  margin-top: 8px;
}
#pointsMgmt .pm-skel-line.pm-skel-line-short {
  width: 40%;
}
@media (max-width: 575.98px) {
  #pointsMgmt .pm-hero {
    flex-wrap: wrap;
  }
  #pointsMgmt .pm-hero-stats {
    margin-left: 0 !important;
    width: 100%;
    justify-content: flex-start;
  }
}

@keyframes pmShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}



/* print.css */
@media print {
  @page {}
  html, body {
    width: 100%;
    background-color: white;
    font-size: 11pt;
  }
  h1, h2, h3, h4, h5, h6 {
    color: #000 !important;
  }
  h1, h2, h3 {
    font-size: 14pt;
  }
  h4, h5 {
    font-size: 11pt;
  }
  h6 {
    font-size: 10pt;
  }
  p, a, li, td, th, span, div {
    color: #000 !important;
    font-size: 10pt;
  }
  nav, footer {
    display: none !important;
  }
  .container--hero, .feedback, .input-container, .nav--spacer {
    display: none !important;
  }
  #FilterCheckbox, #FilterSearch {
    display: none !important;
  }
  #product-rows {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    margin: 0;
  }
  #product-rows > div {
    flex: 1 0 25%;
    box-sizing: border-box;
    height: 65mm;
    margin: 0;
    padding: 0 !important;
    border: 0;
    box-shadow: none;
  }
  #product-rows > div .card-text {
    margin-bottom: 0.5mm !important;
  }
  #product-rows > div .product-thumbnail {
    padding-bottom: 75%;
  }
  #product-rows > div .product-name {
    font-size: 10pt !important;
  }
  #product-rows > div .card-text--category {
    font-size: 9pt !important;
  }
  .lottie {
    display: none !important;
  }
  #mobileFilter {
    display: none !important;
  }
  .feedback-icon {
    display: none !important;
  }
}



/* program-impact.css */
@charset "UTF-8";
/*
 * /admin/program_impact — before/after impact and the engagement funnel.
 *
 * Scoped under the .pi-scope CLASS, not an id, because these styles dress two
 * things: the /admin/program_impact page and the two dashboard widgets that
 * show cut-down versions of the charts. Widget markup is cloned once per
 * placed instance, so an id would collide. The page keeps #programImpact for
 * its JS to hook. Already bundled on the admin dashboard as well as the page,
 * so the widgets inherit these with nothing extra to load.
 *
 * The three series colours are the validated categorical slots 1-3 from the
 * data-viz reference palette, with their own dark-mode steps (not an automatic
 * flip). index.js reads them from here rather than holding its own copies, so
 * the palette lives in exactly one place. Slot 3 (aqua) sits below 3:1 on the
 * light surface, which is why the chart ships direct labels and a table view
 * — that is the palette's relief rule, not a style choice.
 */
.pi-scope {
  --pi-series-1: #2a78d6;
  --pi-series-2: #eb6834;
  --pi-series-3: #1baf7a;
  --pi-line: var(--bs-border-color, #dee2e6);
  --pi-surface: var(--bs-body-bg, #fff);
  --pi-muted: var(--bs-secondary-color, #6c757d);
  --pi-accent: #2a78d6;
  /* The funnel is one narrowing population, so it is one hue, not a
     categorical ramp. Stages are not separate identities. */
  --pi-funnel-fill: #1baf7a;
  --pi-funnel-track: rgba(0, 0, 0, 0.07);
  --pi-band-before: rgba(0, 0, 0, 0.022);
  --pi-band-after: rgba(42, 120, 214, 0.05);
  /* ---------------- Header ---------------- */
}
.pi-scope .pi-header-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.85rem;
  font-size: 1.2rem;
  color: #fff;
  background: linear-gradient(135deg, #60a5fa, #2a78d6);
  box-shadow: 0 6px 18px rgba(42, 120, 214, 0.3);
}
.pi-scope .pi-subtitle {
  font-size: 0.9rem;
}
.pi-scope {
  /* ---------------- Tabs, filters ---------------- */
}
.pi-scope .pi-tabs .nav-link {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--pi-muted);
}
.pi-scope .pi-tabs .nav-link.active {
  background: var(--pi-accent);
  color: #fff;
}
.pi-scope .pi-filters {
  padding: 1rem 1.1rem;
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--pi-line);
}
.pi-scope .pi-run-btn {
  color: #fff;
  background: var(--pi-accent);
  border: 0;
  font-weight: 600;
}
.pi-scope .pi-run-btn:hover {
  filter: brightness(1.08);
  color: #fff;
}
.pi-scope {
  /* ---------------- Cards ---------------- */
}
.pi-scope .pi-card {
  background: var(--pi-surface);
  border: 1px solid var(--pi-line);
  overflow: hidden;
}
.pi-scope .pi-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--pi-line);
  background: var(--bs-tertiary-bg, #f8f9fa);
  font-size: 0.93rem;
}
.pi-scope .pi-card__body {
  padding: 1.1rem;
}
.pi-scope .pi-table-toggle {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pi-muted);
  border: 1px solid var(--pi-line);
}
.pi-scope .pi-table-toggle:hover {
  color: var(--pi-accent);
  border-color: var(--pi-accent);
}
.pi-scope {
  /* ---------------- Summary stats ---------------- */
}
.pi-scope .pi-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem;
}
.pi-scope .pi-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "dot label" "value value" "sub sub";
  align-items: center;
  gap: 0.15rem 0.5rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.75rem;
  border: 1px solid var(--pi-line);
}
.pi-scope .pi-stat.is-muted {
  opacity: 0.75;
}
.pi-scope .pi-stat__dot {
  grid-area: dot;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
}
.pi-scope .pi-stat__label {
  grid-area: label;
  font-size: 0.82rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pi-scope {
  /* Text wears text tokens, never the series colour — the dot beside it
     carries identity. Up/down is the one exception, and it ships with an
     arrow so it is never colour alone. */
}
.pi-scope .pi-stat__value {
  grid-area: value;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--bs-body-color);
}
.pi-scope .pi-stat__value.is-up {
  color: #166534;
}
.pi-scope .pi-stat__value.is-down {
  color: #b42318;
}
.pi-scope .pi-stat__sub {
  grid-area: sub;
  font-size: 0.75rem;
  color: var(--pi-muted);
}
.pi-scope {
  /* ---------------- SVG chart ---------------- */
}
.pi-scope .pi-chart-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}
.pi-scope .pi-chart {
  position: relative;
  min-width: 42rem;
}
.pi-scope .pi-svg {
  width: 100%;
  height: auto;
  display: block;
}
.pi-scope .pi-band--before {
  fill: var(--pi-band-before);
}
.pi-scope .pi-band--after {
  fill: var(--pi-band-after);
}
.pi-scope .pi-grid {
  stroke: var(--pi-line);
  stroke-width: 1;
}
.pi-scope .pi-axis-label {
  font-size: 0.68rem;
  fill: var(--pi-muted);
  font-variant-numeric: tabular-nums;
}
.pi-scope .pi-axis-title {
  font-size: 0.7rem;
  fill: var(--pi-muted);
}
.pi-scope .pi-baseline {
  stroke: var(--bs-body-color);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  opacity: 0.45;
}
.pi-scope .pi-baseline-label {
  font-size: 0.66rem;
  fill: var(--pi-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pi-scope {
  /* The event axis is the subject of the chart, so it is the strongest line
     on it — heavier than the data grid but still not competing with the
     series themselves. */
}
.pi-scope .pi-event {
  stroke: var(--bs-body-color);
  stroke-width: 2;
  opacity: 0.75;
}
.pi-scope .pi-event-label {
  font-size: 0.7rem;
  font-weight: 700;
  fill: var(--bs-body-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pi-scope .pi-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pi-scope {
  /* 2px surface ring so overlapping cohort dots stay separable. */
}
.pi-scope .pi-dot {
  stroke: var(--pi-surface);
  stroke-width: 2;
  /* A month not everyone has reached yet: drawn, but visibly lighter. */
}
.pi-scope .pi-dot.is-thin {
  opacity: 0.55;
}
.pi-scope .pi-series-label {
  font-size: 0.72rem;
  font-weight: 700;
}
.pi-scope .pi-hit {
  fill: transparent;
  cursor: crosshair;
}
.pi-scope {
  /* ---------------- Tooltip ---------------- */
}
.pi-scope .pi-tooltip {
  position: absolute;
  z-index: 5;
  min-width: 13rem;
  max-width: 16rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.6rem;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--pi-line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  font-size: 0.78rem;
  pointer-events: none;
}
.pi-scope .pi-tooltip__head {
  font-weight: 700;
  margin-bottom: 0.35rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--pi-line);
}
.pi-scope .pi-tooltip__row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "swatch name" "value value" "people people";
  gap: 0.05rem 0.4rem;
  align-items: center;
}
.pi-scope .pi-tooltip__row + .pi-scope .pi-tooltip__row {
  margin-top: 0.4rem;
}
.pi-scope .pi-tooltip__name {
  grid-area: name;
  font-weight: 600;
}
.pi-scope .pi-tooltip__value {
  grid-area: value;
  font-variant-numeric: tabular-nums;
}
.pi-scope .pi-tooltip__people {
  grid-area: people;
  font-size: 0.7rem;
  color: var(--pi-muted);
}
.pi-scope .pi-tooltip__none {
  color: var(--pi-muted);
  font-style: italic;
}
.pi-scope {
  /* ---------------- Legend ---------------- */
}
.pi-scope .pi-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  font-size: 0.82rem;
}
.pi-scope .pi-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.pi-scope .pi-legend__swatch {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 0.2rem;
  flex: 0 0 auto;
}
.pi-scope {
  /* ---------------- Funnel ---------------- */
}
.pi-scope .pi-stage {
  padding: 0.6rem 0;
}
.pi-scope .pi-stage + .pi-scope .pi-stage {
  border-top: 1px solid var(--pi-line);
}
.pi-scope .pi-stage.is-branch .pi-stage__fill {
  /* The branch is the one stage that is a different KIND of step, so it
     reads differently without leaving the funnel's single hue. */
  background: repeating-linear-gradient(135deg, var(--pi-funnel-fill) 0 6px, color-mix(in srgb, var(--pi-funnel-fill) 62%, transparent) 6px 12px);
}
.pi-scope .pi-stage:focus-visible {
  outline: 2px solid var(--pi-accent);
  outline-offset: 3px;
}
.pi-scope .pi-stage__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.3rem;
}
.pi-scope .pi-stage__label {
  font-size: 0.88rem;
  font-weight: 600;
}
.pi-scope .pi-stage__count {
  font-size: 1.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pi-scope .pi-stage__track {
  height: 1.35rem;
  border-radius: 0.3rem;
  background: var(--pi-funnel-track);
  overflow: hidden;
}
.pi-scope {
  /* 4px rounded data-end anchored to the baseline, per the mark spec. */
}
.pi-scope .pi-stage__fill {
  height: 100%;
  min-width: 0.2rem;
  border-radius: 0 4px 4px 0;
  background: var(--pi-funnel-fill);
  transition: width 0.25s ease;
}
.pi-scope .pi-stage__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.85rem;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: var(--pi-muted);
}
.pi-scope .pi-stage__drop {
  color: #b42318;
  font-weight: 600;
}
.pi-scope .pi-stage__note {
  font-style: italic;
}
.pi-scope .pi-branch-note {
  margin: 0.85rem 0 0;
  padding: 0.6rem 0.75rem;
  border-radius: 0.6rem;
  font-size: 0.8rem;
  background: rgba(42, 120, 214, 0.07);
  border: 1px solid rgba(42, 120, 214, 0.2);
}
.pi-scope {
  /* ---------------- Table view, caveats, states ---------------- */
}
.pi-scope .pi-table {
  font-size: 0.82rem;
  margin-bottom: 0;
}
.pi-scope .pi-table thead th {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pi-muted);
  background: var(--bs-tertiary-bg, #f8f9fa);
  white-space: nowrap;
}
.pi-scope .pi-table td {
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.pi-scope .pi-table-note {
  font-size: 0.75rem;
  color: var(--pi-muted);
  margin-bottom: 0.5rem;
}
.pi-scope .pi-caveats {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.75rem;
  color: var(--pi-muted);
}
.pi-scope .pi-caveats li + li {
  margin-top: 0.2rem;
}
.pi-scope .pi-loading,
.pi-scope .pi-empty {
  margin: 0;
  padding: 2.5rem 1rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--pi-muted);
}

/* Dark mode: its own steps from the same hues, validated against the dark
   surface, declared under both the OS media query and the explicit toggle so
   the toggle wins either way. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .pi-scope {
    --pi-series-1: #3987e5;
    --pi-series-2: #d95926;
    --pi-series-3: #199e70;
    --pi-funnel-fill: #199e70;
    --pi-funnel-track: rgba(255, 255, 255, 0.1);
    --pi-band-before: rgba(255, 255, 255, 0.03);
    --pi-band-after: rgba(57, 135, 229, 0.1);
  }
}
:root[data-theme=dark] .pi-scope {
  --pi-series-1: #3987e5;
  --pi-series-2: #d95926;
  --pi-series-3: #199e70;
  --pi-funnel-fill: #199e70;
  --pi-funnel-track: rgba(255, 255, 255, 0.1);
  --pi-band-before: rgba(255, 255, 255, 0.03);
  --pi-band-after: rgba(57, 135, 229, 0.1);
}

/*
 * Dashboard card variants. Same .pi-scope tokens and the same mark specs as
 * the full screen — only the chrome differs, because a card is glanced at
 * rather than read. Appended here rather than added to admin.scss so the
 * chart styles and their card overrides stay in one file.
 */
.pi-scope.pi-widget-card .pi-widget-body {
  display: flex;
  flex-direction: column;
  padding: 0.9rem 1rem 1rem;
  overflow: hidden;
}
.pi-scope.pi-widget-card .pi-widget-embed {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
.pi-scope.pi-widget-card {
  /* overflow-y here (not just min-height: 0) so a card whose content runs
     taller than its fixed grid footprint scrolls instead of the ancestor's
     overflow: hidden silently clipping it — which used to read as content
     overlapping, since the clip boundary sat above where the flex children
     actually stopped fitting. */
}
.pi-scope.pi-widget-card .pi-widget-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
  overflow-y: auto;
}
.pi-scope.pi-widget-card .pi-widget-headline {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.pi-scope.pi-widget-card .pi-widget-value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--bs-body-color);
  /* Never colour alone — the arrow in the text carries the same meaning. */
}
.pi-scope.pi-widget-card .pi-widget-value.is-up {
  color: #166534;
}
.pi-scope.pi-widget-card .pi-widget-value.is-down {
  color: #b42318;
}
.pi-scope.pi-widget-card .pi-widget-caption {
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--pi-muted);
}
.pi-scope.pi-widget-card .pi-widget-chart {
  min-width: 0;
}
.pi-scope.pi-widget-card .pi-widget-foot {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--pi-muted);
}
.pi-scope.pi-widget-card .pi-widget-empty {
  margin: 0;
  padding: 1.5rem 0.5rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--pi-muted);
}
.pi-scope.pi-widget-card {
  /* ---------------- Funnel card ---------------- */
}
.pi-scope.pi-widget-card .pi-widget-stages {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.pi-scope.pi-widget-card .pi-widget-stage.is-branch .pi-stage__fill {
  background: repeating-linear-gradient(135deg, var(--pi-funnel-fill) 0 6px, color-mix(in srgb, var(--pi-funnel-fill) 62%, transparent) 6px 12px);
}
.pi-scope.pi-widget-card .pi-widget-stage__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.15rem;
}
.pi-scope.pi-widget-card .pi-widget-stage__label {
  font-size: 0.78rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pi-scope.pi-widget-card .pi-widget-stage__count {
  font-size: 0.88rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pi-scope.pi-widget-card .pi-stage__track {
  height: 0.6rem;
}
.pi-scope.pi-widget-card .pi-widget-stage__foot {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  color: var(--pi-muted);
  font-variant-numeric: tabular-nums;
}

/*
 * Cohort chips and the plain-language explainer. A second .pi-scope block
 * rather than surgery in the middle of the first one — SCSS merges them, and
 * these two are page-only (the dashboard cards carry no controls).
 */
.pi-scope {
  /* Toggle chips instead of a multi-select. Adding a comparison group is the
     main thing anyone does here, and a multi-select hides both what is
     plotted and how to add to it behind ctrl-click. Each chip carries the
     series colour it will draw in, so the control, the legend and the chart
     agree before a request is even sent. */
}
.pi-scope .pi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.pi-scope .pi-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  border-radius: 2rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bs-body-color);
  background: var(--pi-surface);
  border: 1px solid var(--pi-line);
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.pi-scope .pi-chip:hover:not(:disabled) {
  border-color: var(--pi-accent);
}
.pi-scope .pi-chip.is-active {
  border-color: var(--pi-accent);
  background: rgba(42, 120, 214, 0.08);
}
.pi-scope .pi-chip {
  /* At the three-line cap: kept visible and explained by its title rather
     than hidden, since the cohort still exists. */
}
.pi-scope .pi-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pi-scope .pi-chip:focus-visible {
  outline: 2px solid var(--pi-accent);
  outline-offset: 2px;
}
.pi-scope {
  /* Hollow until active, then filled with that series' own colour. */
}
.pi-scope .pi-chip__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  flex: 0 0 auto;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--pi-muted);
}
.pi-scope .pi-chip.is-active .pi-chip__dot {
  box-shadow: none;
}
.pi-scope .pi-cohort-hint {
  font-size: 0.73rem;
  color: var(--pi-muted);
}
.pi-scope {
  /* The reading of the chart, above the chart. "What is this showing" should
     be answered before the axes are, not in a footnote. */
}
.pi-scope .pi-explainer {
  padding: 0.9rem 1.1rem;
  background: rgba(42, 120, 214, 0.05);
  border: 1px solid rgba(42, 120, 214, 0.18);
}
.pi-scope .pi-explainer:empty {
  display: none;
}
.pi-scope .pi-explainer__line {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
}
.pi-scope .pi-explainer__list {
  margin: 0.55rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--pi-muted);
}
.pi-scope .pi-explainer__list li + li {
  margin-top: 0.3rem;
}
.pi-scope .pi-explainer__list strong {
  color: var(--bs-body-color);
}

/*
 * Above/below the baseline.
 *
 * The status good/critical steps from the data-viz palette, which are fixed
 * and never themed. Validated rather than guessed, and the result is why the
 * hatching below exists: the pair measures CVD ΔE 4.1 (deuteranopia), a hard
 * fail, so colour cannot be the only channel carrying "better or worse".
 * Position against the labelled dashed line is the primary signal; hatch
 * DIRECTION is the second; colour is reinforcement for those who can see it.
 */
.pi-scope {
  --pi-good: #0ca30c;
  --pi-bad: #d03b3b;
}
.pi-scope .pi-area {
  stroke: none;
}
.pi-scope .pi-area--up {
  opacity: 0.5;
}
.pi-scope .pi-area--down {
  opacity: 0.5;
}
.pi-scope {
  /* 45° above, 135° below — the rotation lives on the <pattern>, so these
     only need the stroke. Thin and low-contrast: the area is context behind
     the line, never competing with it. */
}
.pi-scope .pi-hatch {
  stroke-width: 2.5;
}
.pi-scope .pi-hatch--up {
  stroke: var(--pi-good);
}
.pi-scope .pi-hatch--down {
  stroke: var(--pi-bad);
}
.pi-scope {
  /* Wider than the default so the longer, more explicit text fits inside the
     plot rather than hanging off the edge. */
}
.pi-scope .pi-baseline-label {
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .pi-scope {
    /* Same two status steps: they clear 3:1 on the dark surface as well, and
       the palette declares them fixed across modes. */
    --pi-good: #0ca30c;
    --pi-bad: #d03b3b;
  }
}
:root[data-theme=dark] .pi-scope {
  --pi-good: #0ca30c;
  --pi-bad: #d03b3b;
}

/* Chip groups and the same-people warning. */
.pi-scope .pi-chip-group + .pi-chip-group {
  margin-top: 0.6rem;
}
.pi-scope .pi-chip-group__heading {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pi-muted);
}
.pi-scope .pi-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.pi-scope {
  /* Amber, not red: two groups being the same people is a finding worth
     acting on, not an error. */
}
.pi-scope .pi-dupes {
  padding: 0.7rem 0.9rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
}
.pi-scope .pi-stat.is-duplicate {
  opacity: 0.6;
}

/*
 * "Who to act on" and "Where the budget went".
 *
 * The quadrants use STATUS-like tones rather than the categorical series
 * slots, because they are four states of one population, not four
 * identities. Every card carries its own label and meaning, so the colour
 * never has to carry which quadrant you are looking at — which matters here,
 * since good/warning are exactly the pair colour vision cannot separate.
 */
.pi-scope {
  --pi-quad-good: #0ca30c;
  --pi-quad-opportunity: #2a78d6;
  --pi-quad-warning: #eda100;
  --pi-quad-muted: #6c757d;
}
.pi-scope .pi-quad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
}
.pi-scope .pi-quad {
  padding: 0.85rem 0.95rem;
  border-radius: 0.75rem;
  border: 1px solid var(--pi-line);
  border-left-width: 4px;
}
.pi-scope .pi-quad--good {
  border-left-color: var(--pi-quad-good);
}
.pi-scope .pi-quad--opportunity {
  border-left-color: var(--pi-quad-opportunity);
}
.pi-scope .pi-quad--warning {
  border-left-color: var(--pi-quad-warning);
}
.pi-scope .pi-quad--muted {
  border-left-color: var(--pi-quad-muted);
}
.pi-scope .pi-quad__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.pi-scope .pi-quad__label {
  font-size: 0.85rem;
  font-weight: 700;
}
.pi-scope .pi-quad__count {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pi-scope .pi-quad__revenue {
  font-size: 0.76rem;
  color: var(--pi-muted);
  font-variant-numeric: tabular-nums;
}
.pi-scope .pi-quad__meaning {
  margin: 0.45rem 0 0.5rem;
  font-size: 0.78rem;
  line-height: 1.4;
}
.pi-scope .pi-quad__people {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
}
.pi-scope .pi-quad__people li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.18rem 0;
  border-top: 1px solid var(--pi-line);
}
.pi-scope .pi-quad__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pi-scope .pi-quad__figures {
  color: var(--pi-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pi-scope .pi-quad__more {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: var(--pi-muted);
}
.pi-scope {
  /* Scatter */
}
.pi-scope .pi-quad-wash--champions {
  fill: rgba(12, 163, 12, 0.05);
}
.pi-scope .pi-quad-wash--self_serve {
  fill: rgba(42, 120, 214, 0.05);
}
.pi-scope .pi-quad-wash--not_converting {
  fill: rgba(237, 161, 0, 0.06);
}
.pi-scope .pi-quad-wash--dormant {
  fill: rgba(0, 0, 0, 0.025);
}
.pi-scope .pi-quad-divider {
  stroke: var(--bs-body-color);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  opacity: 0.4;
}
.pi-scope {
  /* 2px surface ring so overlapping people stay countable. Grows and gets a
     visible ring on hover/keyboard focus — the cue that a dot carries a
     tooltip, not just decoration. */
}
.pi-scope .pi-quad-dot {
  stroke: var(--pi-surface);
  stroke-width: 2;
  transition: r 0.12s ease, stroke-width 0.12s ease;
}
.pi-scope .pi-quad-dot--good {
  fill: var(--pi-quad-good);
}
.pi-scope .pi-quad-dot--opportunity {
  fill: var(--pi-quad-opportunity);
}
.pi-scope .pi-quad-dot--warning {
  fill: var(--pi-quad-warning);
}
.pi-scope .pi-quad-dot--muted {
  fill: var(--pi-quad-muted);
}
.pi-scope .pi-quad-dot:hover, .pi-scope .pi-quad-dot:focus-visible {
  r: 7;
  stroke-width: 2.5;
  outline: none;
}
.pi-scope {
  /* Custom tooltip (mouse + keyboard) so hovering a dot doesn't rely on the
     browser's own slow, unstyled <title> bubble. Positioned in JS relative
     to the chart container, which needs position: relative for that. */
}
.pi-scope .pi-quad-widget-chart, .pi-scope .pi-chart-scroll {
  position: relative;
}
.pi-scope .pi-quad-tooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: var(--bs-body-color);
  color: var(--bs-body-bg);
  font-size: 0.76rem;
  line-height: 1.3;
  padding: 0.35rem 0.55rem;
  border-radius: 0.4rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  max-width: 16rem;
}
.pi-scope {
  /* ---------------- Spend pie ---------------- */
}
.pi-scope .pi-spend-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}
.pi-scope .pi-spend-chart {
  flex: 0 0 auto;
  width: 16rem;
  max-width: 100%;
}
.pi-scope .pi-pie {
  width: 100%;
  height: auto;
  display: block;
}
.pi-scope {
  /* 2px surface gap between wedges, same spacer rule as stacked bars. */
}
.pi-scope .pi-slice {
  stroke: var(--pi-surface);
  stroke-width: 2;
}
.pi-scope .pi-spend-legend {
  flex: 1 1 18rem;
  min-width: 0;
}
.pi-scope .pi-spend-total {
  margin-bottom: 0.6rem;
}
.pi-scope .pi-spend-total__figure {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.pi-scope .pi-spend-total__label {
  font-size: 0.76rem;
  color: var(--pi-muted);
}
.pi-scope {
  /* The legend carries the numbers: a pie cannot be read to a value, so no
     slice is left to be estimated off its wedge. */
}
.pi-scope .pi-spend-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: "swatch label share value" ". sub sub sub";
  align-items: center;
  gap: 0.1rem 0.5rem;
  padding: 0.32rem 0;
  border-top: 1px solid var(--pi-line);
  font-size: 0.82rem;
}
.pi-scope .pi-spend-row__label {
  grid-area: label;
  font-weight: 600;
}
.pi-scope .pi-spend-row__share {
  grid-area: share;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.pi-scope .pi-spend-row__value {
  grid-area: value;
  font-variant-numeric: tabular-nums;
  color: var(--pi-muted);
}
.pi-scope .pi-spend-row__sub {
  grid-area: sub;
  font-size: 0.7rem;
  color: var(--pi-muted);
}

/*
 * The quadrant dashboard card's 2x2.
 *
 * Positioned as a real quadrant rather than a list — sellers on top, engaged
 * on the right — matching the scatter on the full screen. A list of four
 * tiles in arbitrary order would lose the only thing that makes it a
 * quadrant, and the card has no axes of its own to explain the arrangement.
 */
.pi-scope.pi-widget-card .pi-quad-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin: 0.5rem 0;
}
.pi-scope.pi-widget-card .pi-quad-cell {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.5rem;
  border: 1px solid var(--pi-line);
  border-left-width: 3px;
  min-width: 0;
}
.pi-scope.pi-widget-card .pi-quad-cell--good {
  border-left-color: var(--pi-quad-good);
}
.pi-scope.pi-widget-card .pi-quad-cell--opportunity {
  border-left-color: var(--pi-quad-opportunity);
}
.pi-scope.pi-widget-card .pi-quad-cell--warning {
  border-left-color: var(--pi-quad-warning);
}
.pi-scope.pi-widget-card .pi-quad-cell--muted {
  border-left-color: var(--pi-quad-muted);
}
.pi-scope.pi-widget-card .pi-quad-cell__label {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pi-scope.pi-widget-card .pi-quad-cell__count {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.pi-scope.pi-widget-card .pi-quad-cell__revenue {
  font-size: 0.72rem;
  color: var(--pi-muted);
  font-variant-numeric: tabular-nums;
}
.pi-scope.pi-widget-card .pi-quad-cell__top {
  font-size: 0.66rem;
  color: var(--pi-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pi-scope.pi-widget-card {
  /* Pie card: tighter than the full screen's, and it stacks rather than
     sitting side by side once the cell is narrow. */
}
.pi-scope.pi-widget-card .pi-spend-layout {
  gap: 0.9rem;
}
.pi-scope.pi-widget-card .pi-spend-chart {
  width: 11rem;
}
.pi-scope.pi-widget-card .pi-spend-total__figure {
  font-size: 1.3rem;
}
.pi-scope.pi-widget-card .pi-spend-row {
  padding: 0.22rem 0;
  font-size: 0.76rem;
}
.pi-scope.pi-widget-card .pi-spend-row__sub {
  display: none;
}

/*
 * The quadrant card carries the whole report — scatter above the four cells
 * — which is why that widget is pinned to one size. Stacked rather than
 * side-by-side so the chart keeps its full width and the four cells split
 * that same width evenly in a real 2x2, instead of both being squeezed into
 * a half-width column.
 */
.pi-scope.pi-widget-card .pi-quad-widget-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  min-height: 0;
}
.pi-scope.pi-widget-card {
  /* Full-bleed at the card's own width (this widget's admin.scss override
     spans the whole 12-column row), sized to fit the fixed height budget by
     the chart's own wide/short viewBox (dashboard_widget_engagement_quadrant.js)
     rather than by capping/shrinking it here — a capped, centered chart at
     this card's width read as a small island floating in dead space. */
}
.pi-scope.pi-widget-card .pi-quad-widget-chart {
  min-width: 0;
}
.pi-scope.pi-widget-card .pi-quad-widget-layout .pi-quad-2x2 {
  margin: 0;
}



/* rating-summary.css */
.pb-rating-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  color: inherit;
}

.pb-rating-summary__stars {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 1.5rem;
  line-height: 1;
  flex: 0 0 auto;
}

.pb-rating-summary__copy {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
}

.pb-rating-summary__heading {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pb-rating-summary__score {
  font-weight: 800;
  white-space: nowrap;
}

.pb-rating-summary__scale {
  font-weight: 600;
  opacity: 0.75;
}

.pb-rating-summary__count {
  font-size: 0.85rem;
  opacity: 0.8;
  white-space: nowrap;
}

.pb-rating-summary__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.pb-rating-summary__cta--ghost {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 45%, transparent);
}
.pb-rating-summary__cta--ghost:hover, .pb-rating-summary__cta--ghost:focus {
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-color: color-mix(in srgb, currentColor 75%, transparent);
  color: inherit;
}

@media (max-width: 768px) {
  .pb-rating-summary {
    justify-content: flex-start;
  }
  .pb-rating-summary__actions {
    width: 100%;
  }
}



/* rebate-cards.css */
.pb-rebate-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pb-rebate-card:hover, .pb-rebate-card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--bs-box-shadow) !important;
}
.pb-rebate-card__art {
  background: color-mix(in srgb, var(--bs-primary) 8%, var(--bs-body-bg));
  min-height: 140px;
  color: var(--bs-primary);
}
.pb-rebate-card__art-img {
  max-height: 108px;
  width: auto;
}
.pb-rebate-card .card-title {
  min-height: 2.6em;
}

.rebate-section .nav-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.rebate-section .nav-tabs::-webkit-scrollbar {
  display: none;
}
.rebate-section .nav-tabs .nav-link {
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .pb-rebate-card {
    transition: none;
  }
  .pb-rebate-card:hover, .pb-rebate-card:focus-within {
    transform: none;
  }
}
.pb-rebate-card__ref {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
}
.pb-rebate-card__ref dt {
  font-weight: 400;
}
.pb-rebate-card__ref dd {
  margin: 0;
  font-weight: 500;
}



/* rebate-claim.css */
.pb-rebate-claim {
  --rc-accent: var(--bs-primary, #2563eb);
  --rc-line: var(--bs-border-color, #dee2e6);
  --rc-muted: var(--bs-secondary-color, #6c757d);
  --rc-surface: var(--bs-body-bg, #fff);
  max-width: 34rem;
  padding: 1.25rem;
  border: 1px solid var(--rc-line);
  border-radius: 1rem;
  background: var(--rc-surface);
}
.pb-rebate-claim__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.pb-rebate-claim__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}
.pb-rebate-claim__reward {
  flex: 0 0 auto;
  padding: 0.15rem 0.6rem;
  border-radius: 2rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  background: var(--rc-accent);
  font-variant-numeric: tabular-nums;
}
.pb-rebate-claim__prompt {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  color: var(--rc-muted);
}
.pb-rebate-claim__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 2rem 1rem;
  border: 2px dashed var(--rc-line);
  border-radius: 0.75rem;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.pb-rebate-claim__dropzone:hover, .pb-rebate-claim__dropzone:focus-within {
  border-color: var(--rc-accent);
  background: color-mix(in srgb, var(--rc-accent) 4%, transparent);
}
.pb-rebate-claim__dropzone-icon {
  font-size: 1.6rem;
  color: var(--rc-accent);
}
.pb-rebate-claim__dropzone-label {
  font-size: 0.92rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.pb-rebate-claim__dropzone-hint {
  font-size: 0.78rem;
  color: var(--rc-muted);
}
.pb-rebate-claim__file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.pb-rebate-claim__qualifies {
  margin-top: 0.85rem;
  font-size: 0.85rem;
}
.pb-rebate-claim__qualifies summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--rc-accent);
}
.pb-rebate-claim__qualifies-list {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  color: var(--rc-muted);
}
.pb-rebate-claim__busy {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.75rem 0;
  font-size: 0.9rem;
  justify-content: center;
}
.pb-rebate-claim__banner {
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.85rem;
  border-radius: 0.6rem;
  font-size: 0.87rem;
}
.pb-rebate-claim__banner--warn {
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
}
.pb-rebate-claim__banner--info {
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.pb-rebate-claim__note, .pb-rebate-claim__subhead {
  font-size: 0.85rem;
  color: var(--rc-muted);
}
.pb-rebate-claim__note {
  margin: 0 0 0.85rem;
}
.pb-rebate-claim__subhead {
  margin: 1rem 0 0.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
}
.pb-rebate-claim__summary {
  margin: 0;
  border: 1px solid var(--rc-line);
  border-radius: 0.6rem;
  overflow: hidden;
}
.pb-rebate-claim__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.8rem;
}
.pb-rebate-claim__row + .pb-rebate-claim__row {
  border-top: 1px solid var(--rc-line);
}
.pb-rebate-claim__row dt {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--rc-muted);
}
.pb-rebate-claim__row dd {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.pb-rebate-claim__row--total dd {
  font-size: 1rem;
  font-weight: 800;
}
.pb-rebate-claim__lines {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.87rem;
}
.pb-rebate-claim__lines li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rc-line);
}
.pb-rebate-claim__lines li:last-child {
  border-bottom: 0;
}
.pb-rebate-claim__line-end {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.pb-rebate-claim__empty {
  color: var(--rc-muted);
}
.pb-rebate-claim__remove {
  border: 0;
  background: transparent;
  color: var(--rc-muted);
  font-size: 1.15rem;
  line-height: 1;
  padding: 0 0.25rem;
  cursor: pointer;
}
.pb-rebate-claim__remove:hover {
  color: var(--bs-danger, #dc3545);
}
.pb-rebate-claim__field {
  margin-bottom: 0.85rem;
}
.pb-rebate-claim__label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.82rem;
  font-weight: 600;
}
.pb-rebate-claim__adder {
  display: flex;
  gap: 0.5rem;
}
.pb-rebate-claim__adder .form-select {
  flex: 1 1 auto;
  min-width: 0;
}
.pb-rebate-claim__add {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--rc-accent);
  background: transparent;
  border: 1px solid var(--rc-accent);
}
.pb-rebate-claim__add:hover {
  color: #fff;
  background: var(--rc-accent);
}
.pb-rebate-claim__meter {
  margin: 1rem 0 0;
  padding: 0.75rem 0.85rem;
  border-radius: 0.6rem;
  border: 1px solid #fde68a;
  background: #fffbeb;
}
.pb-rebate-claim__meter.is-met {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.pb-rebate-claim__meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pb-rebate-claim__meter-goal {
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0.7;
}
.pb-rebate-claim__meter-track {
  height: 0.55rem;
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.pb-rebate-claim__meter-fill {
  width: 0;
  height: 100%;
  border-radius: 1rem;
  background: #f59e0b;
  transition: width 0.2s ease, background-color 0.2s ease;
}
.pb-rebate-claim__meter.is-met .pb-rebate-claim__meter-fill {
  background: #16a34a;
}
.pb-rebate-claim__meter-note {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  font-weight: 500;
}
.pb-rebate-claim__review-note {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0;
  padding: 0.7rem 0.85rem;
  border-radius: 0.6rem;
  font-size: 0.84rem;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.pb-rebate-claim__review-note i {
  margin-top: 0.1rem;
}
.pb-rebate-claim__cta {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 0.6rem 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--rc-accent);
  border: 0;
}
.pb-rebate-claim__cta:hover {
  color: #fff;
  filter: brightness(1.08);
}
.pb-rebate-claim__cta:disabled, .pb-rebate-claim__cta.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}
.pb-rebate-claim__secondary {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.55rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--rc-line);
}
.pb-rebate-claim__secondary:hover {
  border-color: var(--rc-accent);
}
.pb-rebate-claim__result {
  padding: 1.75rem 1rem;
  border-radius: 0.75rem;
  text-align: center;
}
.pb-rebate-claim__result--approved {
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}
.pb-rebate-claim__result--pending {
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.pb-rebate-claim__result-icon {
  display: block;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.pb-rebate-claim__result-text {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.pb-rebate-claim__timing {
  margin: 0.5rem 0 0;
  font-size: 0.87rem;
  font-weight: 500;
  opacity: 0.85;
}
.pb-rebate-claim__error {
  margin: 0.85rem 0 0;
  font-size: 0.87rem;
  color: var(--bs-danger, #dc3545);
}



/* rebate-reporting.css */
@charset "UTF-8";
/*
 * /admin/rebate_reporting — the rebate reporting suite.
 *
 * Scoped under #rebateReport so it can ride the global admin bundle, the same
 * arrangement as points.scss, user-journey.scss and user-segments.scss.
 * Separate from rebate-cards.scss, which styles the public-facing rebate
 * offer cards and shares nothing with this screen.
 *
 * Colours come from Bootstrap CSS variables wherever one exists, so the
 * screen follows the admin theme rather than pinning its own greys.
 */
#rebateReport {
  --rb-brand: #2563eb;
  --rb-brand-soft: rgba(37, 99, 235, 0.1);
  --rb-line: var(--bs-border-color, #dee2e6);
  --rb-surface: var(--bs-body-bg, #fff);
  --rb-muted: var(--bs-secondary-color, #6c757d);
  /* ---------------- Header ---------------- */
}
#rebateReport .rb-header-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.85rem;
  font-size: 1.2rem;
  color: #fff;
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.3);
}
#rebateReport .rb-subtitle {
  font-size: 0.9rem;
}
#rebateReport {
  /* ---------------- Filters ---------------- */
}
#rebateReport .rb-filters {
  padding: 1rem 1.1rem;
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--rb-line);
}
#rebateReport .rb-refresh-btn {
  color: #fff;
  background: var(--rb-brand);
  border: 0;
  font-weight: 600;
}
#rebateReport .rb-refresh-btn:hover {
  filter: brightness(1.08);
  color: #fff;
}
#rebateReport {
  /* ---------------- KPI strip ---------------- */
}
#rebateReport .rb-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.85rem;
}
#rebateReport .rb-kpi {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: 0.85rem;
  background: var(--rb-surface);
  border: 1px solid var(--rb-line);
}
#rebateReport .rb-kpi__icon {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.65rem;
  color: var(--rb-brand);
  background: var(--rb-brand-soft);
}
#rebateReport .rb-kpi__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#rebateReport .rb-kpi__value {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
#rebateReport .rb-kpi__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rb-muted);
}
#rebateReport {
  /* ---------------- Tabs + cards ---------------- */
}
#rebateReport .rb-tabs .nav-link {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--rb-muted);
}
#rebateReport .rb-tabs .nav-link.active {
  background: var(--rb-brand);
  color: #fff;
}
#rebateReport .rb-card {
  background: var(--rb-surface);
  border: 1px solid var(--rb-line);
  overflow: hidden;
}
#rebateReport .rb-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--rb-line);
  background: var(--bs-tertiary-bg, #f8f9fa);
  font-size: 0.93rem;
}
#rebateReport .rb-card__body {
  padding: 1.1rem;
}
#rebateReport {
  /* Charts need a fixed height: Chart.js with maintainAspectRatio false
     collapses to zero inside an auto-height flex/grid parent. */
}
#rebateReport .rb-chart {
  position: relative;
  height: 20rem;
}
#rebateReport .rb-chart.rb-chart--short {
  height: 12rem;
}
#rebateReport {
  /* ---------------- Tables ---------------- */
}
#rebateReport .rb-table {
  font-size: 0.88rem;
  margin-bottom: 0;
}
#rebateReport .rb-table thead th {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rb-muted);
  background: var(--bs-tertiary-bg, #f8f9fa);
  border-bottom: 1px solid var(--rb-line);
  white-space: nowrap;
}
#rebateReport .rb-table td {
  vertical-align: middle;
}
#rebateReport .rb-table td.text-end, #rebateReport .rb-table th.text-end {
  font-variant-numeric: tabular-nums;
}
#rebateReport .rb-pill {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 1rem;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}
#rebateReport .rb-pill.rb-pill--qualifying {
  color: #fff;
  background: #16a34a;
}
#rebateReport .rb-pill.rb-pill--unmatched {
  color: #92400e;
  background: #fde68a;
}
#rebateReport {
  /* ---------------- Ranked bars ---------------- */
}
#rebateReport .rb-bar-row {
  display: grid;
  grid-template-columns: minmax(6rem, 10rem) 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.32rem 0;
}
#rebateReport .rb-bar-label {
  font-size: 0.83rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#rebateReport .rb-bar-track {
  height: 0.6rem;
  border-radius: 1rem;
  background: var(--bs-tertiary-bg, #eef1f4);
  overflow: hidden;
}
#rebateReport .rb-bar-fill {
  height: 100%;
  border-radius: 1rem;
  background: linear-gradient(90deg, #60a5fa, var(--rb-brand));
}
#rebateReport .rb-bar-value {
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#rebateReport {
  /* A field the resolver could not identify. Styled as a warning rather than
     an empty state on purpose: "we looked in the wrong place" is a fixable
     configuration problem, and must not be mistaken for "nobody claimed". */
}
#rebateReport .rb-unresolved {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem 0.9rem;
  border-radius: 0.6rem;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
}
#rebateReport .rb-unresolved i {
  font-size: 1.1rem;
  margin-top: 0.1rem;
}
#rebateReport {
  /* ---------------- Legend ---------------- */
}
#rebateReport .rb-legend-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
  font-size: 0.84rem;
}
#rebateReport .rb-legend-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  flex: 0 0 auto;
}
#rebateReport .rb-legend-label {
  font-weight: 600;
}
#rebateReport .rb-legend-value {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--rb-muted);
}
#rebateReport {
  /* ---------------- Co-purchase ---------------- */
}
#rebateReport .rb-guide {
  padding: 0.8rem 0.95rem;
  background: var(--rb-brand-soft);
  border: 1px solid rgba(37, 99, 235, 0.2);
}
#rebateReport .rb-anchor-summary {
  padding: 0.7rem 0.9rem;
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--rb-line);
  font-size: 0.9rem;
}
#rebateReport .rb-lift {
  display: inline-block;
  min-width: 3rem;
  padding: 0.1rem 0.45rem;
  border-radius: 0.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--bs-tertiary-bg, #eef1f4);
}
#rebateReport .rb-lift.is-positive {
  color: #166534;
  background: #dcfce7;
}
#rebateReport .rb-lift.is-strong {
  color: #fff;
  background: #16a34a;
}



/* receipt-upload.css */
@charset "UTF-8";
.pb-receipt-upload {
  max-width: 480px;
}

.pb-receipt-prompt {
  color: var(--bs-secondary-color, #6c757d);
}

/* ── file picker ─────────────────────────────────────────────────────── */
.pb-receipt-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px dashed var(--bs-border-color, #dee2e6);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pb-receipt-dropzone:hover,
.pb-receipt-dropzone:focus-within {
  border-color: var(--bs-primary, #0d6efd);
  background-color: color-mix(in srgb, var(--bs-primary, #0d6efd) 5%, transparent);
}

.pb-receipt-dropzone__icon {
  font-size: 1.5rem;
  color: var(--bs-primary, #0d6efd);
  flex: 0 0 auto;
}

.pb-receipt-dropzone__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.pb-receipt-dropzone__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.pb-receipt-cta {
  width: 100%;
}

.pb-receipt-reading {
  padding: 1rem 0;
}

/* ── OCR summary card ────────────────────────────────────────────────── */
.pb-receipt-summary {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  background: var(--bs-tertiary-bg, #f8f9fa);
}

.pb-receipt-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
}

.pb-receipt-summary__row:not(:last-child) {
  border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.08));
}

.pb-receipt-summary__label {
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.85rem;
}

.pb-receipt-summary__value {
  font-weight: 500;
  text-align: right;
}

.pb-receipt-summary__row--total {
  padding-top: 0.5rem;
}

.pb-receipt-summary__value--total {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bs-primary, #0d6efd);
}

/* ── matched line items ──────────────────────────────────────────────── */
.pb-receipt-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pb-receipt-lines li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0.25rem;
  font-size: 0.9rem;
}

.pb-receipt-lines li:not(:last-child) {
  border-bottom: 1px dotted var(--bs-border-color, #dee2e6);
}

/* ── result ──────────────────────────────────────────────────────────── */
.pb-receipt-result {
  border-radius: 0.75rem;
}



/* rewards-portal.css */
@charset "UTF-8";
/*
 * /rewards — the member-facing partner page.
 *
 * Every colour here comes from a CSS variable the Tagen brand guide emits
 * (Theming\BrandTheme::cssForGuide, via public/snippets/head_extras.php).
 * There are no hex codes on purpose: the page is attached to the guide, so
 * editing the guide restyles the page instead of leaving these rules behind.
 *
 *   --hero-bg / --hero-text          orange band, white ink
 *   --surface-dark / --ink-on-dark   navy band, white ink
 *   --surface-tint / --ink-on-tint   white band, near-black ink
 *   --bs-primary                     #021123, the navy
 *   --bs-secondary                   #ff3600, the orange accent
 *   --bs-border-radius: 0            sharp corners, brand-wide
 *   .card                            already dark teal with white text
 *
 * That last one is why the page is dark cards on a white ground with orange
 * accents rather than the usual light-card dashboard: the brand makes .card
 * dark, so the design goes with it instead of overriding a deliberate
 * decision.
 *
 * NOTE ON WHAT THIS FILE IS DOING. Several rules below repair core or brand
 * behaviour rather than style this page. Each is commented with what it works
 * around, and each is flagged as an issue in its own right, because every one
 * of them will hit the next page built this way.
 */
/* ---------------- Content column ---------------- */
/*
 * A band is full-bleed so its background reaches both edges; its CONTENT is
 * what gets the max-width.
 *
 * The obvious rule for that - `.tg-band > * { max-width: 68rem }` - silently
 * does nothing, because the page builder's own wrapper is
 * `.pb-container-children { display: contents }`. A display:contents element
 * generates no box, so there is nothing for a max-width to apply to, and
 * every band rendered edge to edge. The real layout children are one level
 * deeper.
 */
.tg-band > .pb-container-children > * {
  max-width: 68rem;
  margin-inline: auto;
}
.tg-band {
  /* Belt to that braces, for a band whose direct child is a real box rather
     than the display:contents wrapper. */
}
.tg-band > *:not(.pb-container-children) {
  max-width: 68rem;
  margin-inline: auto;
}
.tg-band--tint {
  background: var(--surface-tint, #fff);
}
.tg-band--dark {
  background: var(--surface-dark, #021123);
  color: var(--ink-on-dark, #fff);
}
.tg-band {
  /* The pushed-notification strip. Deliberately quiet: it sits directly under
     the hero, and two loud bands in a row means neither is read. Collapses
     entirely when the member has no unread items, because the widget renders
     nothing and an empty padded band is a mystery gap. */
}
.tg-band--notice {
  background: color-mix(in srgb, var(--bs-secondary, #ff3600) 8%, #fff);
  border-bottom: 2px solid var(--bs-secondary, #ff3600);
}
.tg-band--notice:not(:has(*:not(:empty))) {
  display: none;
}
.tg-band__title {
  margin-bottom: 1.5rem;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ---------------- Hero ---------------- */
.tg-hero {
  /* Only the colour UNDER the photograph, so the band is never bare while the
     image loads, plus the ink that sits on top. */
  color: var(--hero-text, #fff);
  text-align: center;
  border-radius: 0;
}
.tg-hero > * {
  position: relative;
  z-index: 1;
}
.tg-hero {
  /*
   * THE hero fix. core.scss gives `.pb-hero` its own
   * `background: var(--hero-bg)` - fully opaque - and .pb-hero sits INSIDE
   * .overlaid-content, which is z-index 2: above the photograph (z-index 0)
   * and above both overlays (z-index 1). So the band painted flat orange over
   * the image and the background photo was never visible at all.
   *
   * It also brings `padding: clamp(4rem, 10vw, 7rem)`. Stacked on the band's
   * own padding that came to roughly 400px of vertical padding at desktop
   * width, which is why the hero was enormous. This owns the vertical rhythm
   * now.
   */
}
.tg-hero .pb-hero {
  background: transparent;
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}
.tg-hero__logo {
  display: block;
  max-width: 7.5rem;
  margin: 0 auto 1.25rem;
}
.tg-hero {
  /*
   * core.scss has `.has-background-media img { position: absolute; width: 100%;
   * height: 100%; object-fit: cover }`. That is a DESCENDANT selector, so it
   * captures every image inside the band - not just the background one, which
   * is the only direct child. It was stretching the logo SVG across the whole
   * hero: that is what made the wordmark enormous, and `object-fit: cover`
   * then cropped the orange accent bar off the top of the 'a'. The accent was
   * always in the file; CSS was cutting it off.
   *
   * Two classes deep so it beats that rule on specificity rather than on the
   * order the bundle happens to concatenate in.
   */
}
.tg-hero .tg-hero__logo img {
  position: static;
  width: auto;
  height: auto;
  max-height: 3rem;
  object-fit: initial;
}
.tg-hero__eyebrow p {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* The brand accent, which reads as deliberate against the navy overlay
     where a dimmed white just looked faded. */
  color: var(--bs-secondary, #ff3600);
}
.tg-hero__headline {
  max-width: 44rem;
  margin: 0 auto 0.85rem;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.tg-hero__sub p {
  max-width: 38rem;
  margin: 0 auto 1.5rem;
  font-size: 1rem;
  line-height: 1.55;
  opacity: 0.94;
}
.tg-hero {
  /* The band is a navy-overlaid photograph, so the CTA pair is `solid` (the
     orange accent, filled) and `ghost` (a white outline - core.scss already
     styles that inside .pb-hero). The brand's `primary` is the same navy as
     the overlay and reads as a hole, which is exactly what it looked like
     while the seed was passing style names the component doesn't accept. */
}
.tg-hero__ctas .btn {
  padding-inline: 1.4rem;
  font-weight: 700;
}

/*
 * core.scss emits its OWN `.overlay` (a flat rgba(0, 0, 0, 0.55)) on every
 * has-background-media block, in addition to the configurable `.pb-overlay`
 * that the background_overlay format adds. Two overlays stack, so a 55% black
 * under a 60% navy multiplies out past 80% and the photograph disappears.
 *
 * Scoped with :has() to THIS hero rather than fixed globally. A bare
 * `.pb-has-overlay > .overlay { display: none }` is probably correct
 * everywhere - an explicitly configured overlay should replace the default,
 * not add to it - but that is a core decision, not this page's.
 */
.has-background-media:has(> .tg-hero) > .overlay {
  display: none;
}

/* ---------------- Dark cards keep their ink ---------------- */
/*
 * THE important rule on this page.
 *
 * The Tagen guide makes `.card` dark (#042A3C) by setting --bs-card-bg and
 * --bs-card-color, but that colour was not reaching the headings and
 * paragraphs inside - they kept the page's default near-black ink, so every
 * dark card rendered its copy invisibly. It showed up on four blocks at once:
 * the catalogue CTA, the referral card, the rating card, and the pushed
 * notification.
 *
 * This is a brand-level problem rather than a page-level one - any page using
 * this guide will hit it - so this is a local repair, not the fix. Flagged
 * separately.
 *
 * Stated on the descendants rather than only on .card because that is where
 * the cascade was losing: a rule setting colour on .card alone was already
 * being beaten by whatever gives .pb-heading and <p> their default ink.
 *
 * #learnerNotifications is excluded - it was one of the four blocks this
 * rule was written for, but that was a misdiagnosis: it's the widget's own
 * light card (white background, warning-coloured left border), not one the
 * brand guide darkens. This rule was forcing its "Notifications" <h2> to
 * white-on-white - the one element in that card actually invisible, since
 * everything else in it is a <div>/<p>, untouched by the h1-h6 selector
 * below, and kept its natural dark ink the whole time.
 */
.tg-band .card:not(#learnerNotifications),
.tg-band .tg-cta {
  color: var(--ink-on-dark, #fff);
}
.tg-band .card:not(#learnerNotifications) h1, .tg-band .card:not(#learnerNotifications) h2, .tg-band .card:not(#learnerNotifications) h3, .tg-band .card:not(#learnerNotifications) h4, .tg-band .card:not(#learnerNotifications) h5, .tg-band .card:not(#learnerNotifications) h6,
.tg-band .card:not(#learnerNotifications) p, .tg-band .card:not(#learnerNotifications) li, .tg-band .card:not(#learnerNotifications) dt, .tg-band .card:not(#learnerNotifications) dd, .tg-band .card:not(#learnerNotifications) small, .tg-band .card:not(#learnerNotifications) strong, .tg-band .card:not(#learnerNotifications) span, .tg-band .card:not(#learnerNotifications) label,
.tg-band .card:not(#learnerNotifications) .pb-heading,
.tg-band .tg-cta h1,
.tg-band .tg-cta h2,
.tg-band .tg-cta h3,
.tg-band .tg-cta h4,
.tg-band .tg-cta h5,
.tg-band .tg-cta h6,
.tg-band .tg-cta p,
.tg-band .tg-cta li,
.tg-band .tg-cta dt,
.tg-band .tg-cta dd,
.tg-band .tg-cta small,
.tg-band .tg-cta strong,
.tg-band .tg-cta span,
.tg-band .tg-cta label,
.tg-band .tg-cta .pb-heading {
  color: inherit;
}
.tg-band .card:not(#learnerNotifications),
.tg-band .tg-cta {
  /* Anything that paints its own light surface keeps its own dark ink - a
     widget's input or inner panel must not inherit white-on-white. */
}
.tg-band .card:not(#learnerNotifications) .form-control,
.tg-band .card:not(#learnerNotifications) .form-select,
.tg-band .card:not(#learnerNotifications) input,
.tg-band .card:not(#learnerNotifications) select,
.tg-band .card:not(#learnerNotifications) textarea,
.tg-band .tg-cta .form-control,
.tg-band .tg-cta .form-select,
.tg-band .tg-cta input,
.tg-band .tg-cta select,
.tg-band .tg-cta textarea {
  color: var(--bs-body-color);
}
.tg-band .card:not(#learnerNotifications),
.tg-band .tg-cta {
  /*
   * Buttons inside a dark card. The brand resolves `btn-primary` to the navy
   * #021123, which on a #042A3C card is dark-on-dark - the referral widget's
   * "Get my referral link" was effectively invisible. Only the two variants
   * that actually vanish are repainted to the accent; semantic variants
   * (success/danger/warning) are left alone, and an outline button stays an
   * outline because it is the deliberate quiet option next to a filled one.
   *
   * Widgets bring their own markup, so this is stated as properties rather
   * than by swapping classes.
   */
}
.tg-band .card:not(#learnerNotifications) .btn-primary,
.tg-band .card:not(#learnerNotifications) .btn-dark,
.tg-band .tg-cta .btn-primary,
.tg-band .tg-cta .btn-dark {
  background-color: var(--bs-secondary, #ff3600);
  border-color: var(--bs-secondary, #ff3600);
  color: #fff;
}
.tg-band .card:not(#learnerNotifications) .btn-primary:hover, .tg-band .card:not(#learnerNotifications) .btn-primary:focus-visible,
.tg-band .card:not(#learnerNotifications) .btn-dark:hover,
.tg-band .card:not(#learnerNotifications) .btn-dark:focus-visible,
.tg-band .tg-cta .btn-primary:hover,
.tg-band .tg-cta .btn-primary:focus-visible,
.tg-band .tg-cta .btn-dark:hover,
.tg-band .tg-cta .btn-dark:focus-visible {
  background-color: color-mix(in srgb, var(--bs-secondary, #ff3600) 85%, #000);
  border-color: color-mix(in srgb, var(--bs-secondary, #ff3600) 85%, #000);
  color: #fff;
}
.tg-band .card:not(#learnerNotifications) .btn-secondary,
.tg-band .tg-cta .btn-secondary {
  color: #fff;
}
.tg-band .card:not(#learnerNotifications),
.tg-band .tg-cta {
  /* Outline variants on a dark card need a light edge, not the brand's dark
     one, or they read as an empty rectangle. */
}
.tg-band .card:not(#learnerNotifications) .btn-outline-primary,
.tg-band .card:not(#learnerNotifications) .btn-outline-dark,
.tg-band .card:not(#learnerNotifications) .btn-outline-secondary,
.tg-band .tg-cta .btn-outline-primary,
.tg-band .tg-cta .btn-outline-dark,
.tg-band .tg-cta .btn-outline-secondary {
  background-color: transparent;
  border-color: color-mix(in srgb, var(--ink-on-dark, #fff) 45%, transparent);
  color: var(--ink-on-dark, #fff);
}
.tg-band .card:not(#learnerNotifications) .btn-outline-primary:hover, .tg-band .card:not(#learnerNotifications) .btn-outline-primary:focus-visible,
.tg-band .card:not(#learnerNotifications) .btn-outline-dark:hover,
.tg-band .card:not(#learnerNotifications) .btn-outline-dark:focus-visible,
.tg-band .card:not(#learnerNotifications) .btn-outline-secondary:hover,
.tg-band .card:not(#learnerNotifications) .btn-outline-secondary:focus-visible,
.tg-band .tg-cta .btn-outline-primary:hover,
.tg-band .tg-cta .btn-outline-primary:focus-visible,
.tg-band .tg-cta .btn-outline-dark:hover,
.tg-band .tg-cta .btn-outline-dark:focus-visible,
.tg-band .tg-cta .btn-outline-secondary:hover,
.tg-band .tg-cta .btn-outline-secondary:focus-visible {
  background-color: color-mix(in srgb, var(--ink-on-dark, #fff) 12%, transparent);
  border-color: var(--ink-on-dark, #fff);
  color: var(--ink-on-dark, #fff);
}
.tg-band .card:not(#learnerNotifications),
.tg-band .tg-cta {
  /*
   * A widget's dialog is a DOM descendant of the card, so it inherits the
   * white ink above - but it paints its own light surface (Bootstrap's
   * --bs-modal-bg falls back to the body background, which the guide leaves
   * white). The refer-a-friend dialog was opening blank because of it.
   * Specificity, not order, is what makes this win: three classes deep beats
   * the two-class rules above.
   */
}
.tg-band .card:not(#learnerNotifications) .modal-content,
.tg-band .tg-cta .modal-content {
  color: var(--bs-body-color);
}
.tg-band .card:not(#learnerNotifications) .modal-content h1, .tg-band .card:not(#learnerNotifications) .modal-content h2, .tg-band .card:not(#learnerNotifications) .modal-content h3, .tg-band .card:not(#learnerNotifications) .modal-content h4, .tg-band .card:not(#learnerNotifications) .modal-content h5, .tg-band .card:not(#learnerNotifications) .modal-content h6,
.tg-band .card:not(#learnerNotifications) .modal-content p, .tg-band .card:not(#learnerNotifications) .modal-content li, .tg-band .card:not(#learnerNotifications) .modal-content dt, .tg-band .card:not(#learnerNotifications) .modal-content dd, .tg-band .card:not(#learnerNotifications) .modal-content small, .tg-band .card:not(#learnerNotifications) .modal-content strong, .tg-band .card:not(#learnerNotifications) .modal-content span, .tg-band .card:not(#learnerNotifications) .modal-content label,
.tg-band .card:not(#learnerNotifications) .modal-content .pb-heading,
.tg-band .tg-cta .modal-content h1,
.tg-band .tg-cta .modal-content h2,
.tg-band .tg-cta .modal-content h3,
.tg-band .tg-cta .modal-content h4,
.tg-band .tg-cta .modal-content h5,
.tg-band .tg-cta .modal-content h6,
.tg-band .tg-cta .modal-content p,
.tg-band .tg-cta .modal-content li,
.tg-band .tg-cta .modal-content dt,
.tg-band .tg-cta .modal-content dd,
.tg-band .tg-cta .modal-content small,
.tg-band .tg-cta .modal-content strong,
.tg-band .tg-cta .modal-content span,
.tg-band .tg-cta .modal-content label,
.tg-band .tg-cta .modal-content .pb-heading {
  color: inherit;
}
.tg-band .card:not(#learnerNotifications) .modal-content,
.tg-band .tg-cta .modal-content {
  /* Back to the brand's own button colours: this surface is light. */
}
.tg-band .card:not(#learnerNotifications) .modal-content .btn-primary,
.tg-band .card:not(#learnerNotifications) .modal-content .btn-dark,
.tg-band .tg-cta .modal-content .btn-primary,
.tg-band .tg-cta .modal-content .btn-dark {
  background-color: var(--bs-primary, #021123);
  border-color: var(--bs-primary, #021123);
  color: #fff;
}
.tg-band .card:not(#learnerNotifications) .modal-content .btn-outline-primary,
.tg-band .card:not(#learnerNotifications) .modal-content .btn-outline-dark,
.tg-band .card:not(#learnerNotifications) .modal-content .btn-outline-secondary,
.tg-band .tg-cta .modal-content .btn-outline-primary,
.tg-band .tg-cta .modal-content .btn-outline-dark,
.tg-band .tg-cta .modal-content .btn-outline-secondary {
  border-color: var(--bs-primary, #021123);
  color: var(--bs-primary, #021123);
}

/* ---------------- Two-up rows ---------------- */
.tg-twoup {
  /* stretch, so two side-by-side cards are the same height and an image fills
     its column. The component's grid_layout format sets --pb-grid-align,
     which core.scss reads; this is the belt to that braces. */
  align-items: stretch;
}
.tg-twoup h2 {
  margin-bottom: 0.85rem;
  font-size: clamp(1.35rem, 2.6vw, 2.05rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.tg-twoup h3 {
  margin-bottom: 0.6rem;
  font-size: 1.12rem;
  font-weight: 700;
}
.tg-twoup p {
  font-size: 0.97rem;
  line-height: 1.6;
}

/* Stock photography. A stated height rather than max-height alone: the
   wrapper has no height of its own, so height:100% resolved to nothing and
   each image rendered at its natural aspect - which is why one row's photo
   towered over the text beside it while another sat short. */
.tg-shot {
  display: block;
  height: 100%;
  min-height: 18rem;
}

.tg-shot img,
img.tg-shot {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 18rem;
  max-height: 22rem;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

.tg-eyebrow p {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bs-secondary, #ff3600);
}

/* ---------------- Cards ---------------- */
/* .card is already dark with white ink from the guide. These only set the
   things a card carrying a widget needs: room to breathe, and a button that
   sits at the bottom so two side-by-side cards line up. */
.tg-cta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
}
.tg-cta .btn {
  align-self: flex-start;
  margin-top: auto;
  font-weight: 700;
}

/* A lighter box than .card - a border and a faint tint rather than the
   guide's full dark treatment - for content sitting on a white/tint band
   that still needs visual separation from the band around it (the rebate
   claim section, asked for explicitly: it was floating with nothing marking
   where it started or ended). */
.tg-boxed {
  border: 1px solid color-mix(in srgb, var(--bs-body-color, #141a35) 14%, transparent);
  background: color-mix(in srgb, var(--bs-secondary, #ff3600) 4%, #fff);
  border-radius: 0;
}

/* On the dark band, a nested card would be dark-on-dark and vanish. Lift it
   to a tinted surface so it still reads as a card. */
.tg-band--dark .tg-cta {
  background: color-mix(in srgb, var(--ink-on-dark, #fff) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink-on-dark, #fff) 18%, transparent);
}

/* ---------------- The balance stat ---------------- */
/* The points widget emits a bare number, so the framing has to come from
   here: a label above it, the figure at display size, and a line of context
   under it. Without this it was a small "1,800" adrift in a grid column,
   which is what made the middle of the page look unfinished. */
.tg-stat .pb-points-balance {
  display: block;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  /* The one place the accent is used as a figure rather than a label: this
     is the number the page exists to show. */
  color: var(--bs-secondary, #ff3600);
}
.tg-stat p:last-child {
  margin-bottom: 0;
  font-size: 0.86rem;
  opacity: 0.8;
}

/* The notification band sits on a white page, so its own card is the dark
   one. Keep the band itself quiet and let the card carry the weight. */
.tg-band--notice .card {
  border: 0;
}

/* ---------------- Rhythm ---------------- */
/* Consecutive white bands are separated by a hairline instead of guesswork
   about where one ended. */
.tg-band + .tg-band:not(.tg-band--dark):not(.tg-band--notice) {
  border-top: 1px solid color-mix(in srgb, var(--bs-body-color, #141a35) 10%, transparent);
}

/* A two-up's text column: keep its blocks tight to each other so the column
   reads as one piece of copy rather than four stacked components. */
.tg-twoup > .pb-container-children > div > div > .pb-container-children > * + * {
  margin-top: 0.35rem;
}

@media (max-width: 767.98px) {
  .tg-shot img,
  img.tg-shot {
    min-height: 12rem;
    max-height: 14rem;
  }
}



/* suggestion-popup.css */
.suggestion-popup-body {
  margin: 0;
  padding: 1rem;
}



/* table.css */
@charset "UTF-8";
/* Style the resize handle */
.table {
  font-size: 0.75rem;
}

.table-responsive-scroll {
  max-height: 300px;
  overflow-y: auto;
}
.table-responsive-scroll thead th {
  position: sticky;
  top: -1px; /* Adjusted to ensure header is visible */
  z-index: 2;
  background-color: #f8f9fa; /* Light background for header */
  border-top: none; /* Prevents extra top border from sticky positioning */
}
.table-responsive-scroll.table-bordered thead {
  border-top: 1px solid #dee2e6; /* Ensures top border is present */
}

.table-resizable th {
  position: relative;
  overflow: hidden;
}

.table-resizable th .resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  width: 5px;
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
  height: 100%;
}

.table-resizable th .resize-handle:hover {
  background-color: #ddd;
}

.sort-icon {
  font-size: 0.7rem;
  padding: 0 0.5rem;
}
.sort-icon.asc::after {
  content: "▲"; /* Up arrow for ascending sort */
}
.sort-icon.desc::after {
  content: "▼"; /* Down arrow for descending sort */
}
.sort-icon.unsorted::after {
  content: ""; /* No icon for unsorted state */
}



/* tiers.css */
.pb-tier-badge {
  --pb-tier-badge-color: #6b7280;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  background: var(--pb-tier-badge-color);
}

.pb-tier-perks {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pb-tier-perks__item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
.pb-tier-perks__icon {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  border-radius: 0.5rem;
}
.pb-tier-perks__text {
  min-width: 0;
}
.pb-tier-perks__label {
  font-weight: 700;
}
.pb-tier-perks__description {
  font-size: 0.9rem;
  opacity: 0.85;
}



/* user-journey.css */
@charset "UTF-8";
/* User Journey admin page (/admin/user_journey). Everything is scoped under
   #userJourneyMgmt so this file can ride the global bundle without leaking.
   Same tokens/shape as points.scss (public/page/css/points.scss) — this
   screen is that one's read-only sibling. Compile: sass user-journey.scss user-journey.css */
#userJourneyMgmt {
  --uj-brand: #09083a;
  --uj-surface: var(--bs-body-bg, #fff);
}
#userJourneyMgmt .uj-subtitle {
  font-size: 0.9rem;
}
#userJourneyMgmt {
  /* ---------------- Header ---------------- */
}
#userJourneyMgmt .uj-header-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #fff;
  background: linear-gradient(135deg, #38bdf8, #2563eb);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}
#userJourneyMgmt {
  /* ---------------- Panels ---------------- */
}
#userJourneyMgmt .uj-panel {
  background: var(--uj-surface);
  border: 1px solid var(--bs-border-color);
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(2, 6, 23, 0.06);
  overflow: hidden;
  height: 100%;
}
#userJourneyMgmt .uj-panel-head {
  padding: 1.05rem 1.3rem;
  border-bottom: 1px solid var(--bs-border-color);
  color: var(--uj-brand);
}
#userJourneyMgmt .uj-panel-head i {
  color: var(--bs-secondary-color);
}
#userJourneyMgmt {
  /* ---------------- Search ---------------- */
}
#userJourneyMgmt .uj-search .uj-search-input {
  padding-left: 38px;
  box-shadow: none;
}
#userJourneyMgmt .uj-search .uj-search-input:focus {
  border-color: color-mix(in srgb, var(--uj-brand) 35%, var(--bs-border-color));
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--uj-brand) 12%, transparent);
}
#userJourneyMgmt .uj-search .uj-search-icon {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 6px;
  color: var(--bs-secondary-color);
  pointer-events: none;
}
#userJourneyMgmt {
  /* ---------------- User list ---------------- */
}
#userJourneyMgmt .uj-user-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0.6rem 0.6rem;
  max-height: 540px;
  overflow-y: auto;
}
#userJourneyMgmt .uj-user-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 60px;
  padding: 0.6rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
#userJourneyMgmt .uj-user-row + .uj-user-row {
  margin-top: 2px;
}
#userJourneyMgmt .uj-user-row:hover {
  background: color-mix(in srgb, var(--uj-brand) 5%, transparent);
}
#userJourneyMgmt .uj-user-row:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--uj-brand) 35%, var(--bs-border-color));
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--uj-brand) 18%, transparent);
}
#userJourneyMgmt .uj-user-row[aria-selected=true] {
  background: color-mix(in srgb, var(--uj-brand) 8%, transparent);
  border-color: color-mix(in srgb, var(--uj-brand) 25%, var(--bs-border-color));
}
#userJourneyMgmt .uj-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.82rem;
  color: #fff;
  text-transform: uppercase;
}
#userJourneyMgmt .uj-user-meta {
  min-width: 0;
  flex: 1;
}
#userJourneyMgmt .uj-user-name {
  font-weight: 600;
  color: var(--bs-body-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#userJourneyMgmt .uj-user-email {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#userJourneyMgmt .uj-list-msg {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
}
#userJourneyMgmt {
  /* ---------------- Pager ---------------- */
}
#userJourneyMgmt .uj-pager {
  padding: 0.75rem 1.3rem;
  border-top: 1px solid var(--bs-border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
#userJourneyMgmt .uj-pager-label {
  color: var(--bs-secondary-color);
  font-size: 0.82rem;
  font-weight: 600;
}
#userJourneyMgmt {
  /* ---------------- Empty state ---------------- */
}
#userJourneyMgmt .uj-empty {
  padding: 4rem 1.5rem;
}
#userJourneyMgmt .uj-empty-mark {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--bs-secondary-color);
  background: color-mix(in srgb, var(--uj-brand) 6%, transparent);
}
#userJourneyMgmt .uj-empty-copy {
  max-width: 360px;
  font-size: 0.9rem;
}
#userJourneyMgmt {
  /* ---------------- Touchpoint hero ---------------- */
}
#userJourneyMgmt .uj-hero {
  padding: 1.5rem;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #0b1437 0%, #1e2a6b 100%);
}
#userJourneyMgmt .uj-hero-mark {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  color: #fff;
  background: linear-gradient(135deg, #38bdf8, #2563eb);
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.45);
}
#userJourneyMgmt .uj-hero-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.7;
}
#userJourneyMgmt .uj-hero-value {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
#userJourneyMgmt {
  /* ---------------- Narrative summary ---------------- */
}
#userJourneyMgmt .uj-narrative {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--bs-secondary-color);
  padding-left: 0.1rem;
}
#userJourneyMgmt {
  /* ---------------- Unified timeline ---------------- */
}
#userJourneyMgmt .uj-timeline {
  max-height: 280px;
  overflow-y: auto;
  padding-left: 0.2rem;
}
#userJourneyMgmt .uj-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  position: relative;
  padding: 0 0 1rem 0;
}
#userJourneyMgmt .uj-timeline-item::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: -2px;
  width: 2px;
  background: var(--bs-border-color);
}
#userJourneyMgmt .uj-timeline-item:last-child {
  padding-bottom: 0;
}
#userJourneyMgmt .uj-timeline-item:last-child::before {
  display: none;
}
#userJourneyMgmt .uj-timeline-icon {
  flex: 0 0 auto;
  z-index: 1;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.85rem;
  color: var(--uj-brand);
  background: color-mix(in srgb, var(--uj-brand) 10%, var(--uj-surface));
  border: 2px solid var(--uj-surface);
}
#userJourneyMgmt .uj-timeline-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-top: 0.3rem;
}
#userJourneyMgmt .uj-timeline-summary {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--bs-body-color);
}
#userJourneyMgmt .uj-timeline-meta {
  font-size: 0.74rem;
  color: var(--bs-secondary-color);
}
#userJourneyMgmt {
  /* ---------------- Touchpoint grid ---------------- */
}
#userJourneyMgmt .uj-grid-title {
  color: var(--uj-brand);
}
#userJourneyMgmt .uj-touchpoint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.85rem;
}
#userJourneyMgmt .uj-touchpoint-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bs-tertiary-bg, #f8f9fa) 65%, var(--uj-surface));
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, transform 80ms ease;
}
#userJourneyMgmt .uj-touchpoint-card:hover {
  border-color: color-mix(in srgb, var(--uj-brand) 30%, var(--bs-border-color));
}
#userJourneyMgmt .uj-touchpoint-card:active {
  transform: translateY(1px);
}
#userJourneyMgmt .uj-touchpoint-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--uj-brand) 20%, transparent);
}
#userJourneyMgmt .uj-touchpoint-card[aria-pressed=true] {
  background: color-mix(in srgb, var(--uj-brand) 8%, var(--uj-surface));
  border-color: color-mix(in srgb, var(--uj-brand) 40%, var(--bs-border-color));
}
#userJourneyMgmt .uj-touchpoint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 1rem;
  color: var(--uj-brand);
  background: color-mix(in srgb, var(--uj-brand) 10%, var(--uj-surface));
}
#userJourneyMgmt .uj-touchpoint-count {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--bs-body-color);
}
#userJourneyMgmt .uj-touchpoint-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}
#userJourneyMgmt {
  /* ---------------- Drill-down detail pane ---------------- */
}
#userJourneyMgmt .uj-detail-pane {
  border: 1px solid var(--bs-border-color);
  overflow: hidden;
}
#userJourneyMgmt .uj-detail-pane-head {
  padding: 0.85rem 1.1rem;
  background: color-mix(in srgb, var(--uj-brand) 5%, var(--uj-surface));
  border-bottom: 1px solid var(--bs-border-color);
  color: var(--uj-brand);
}
#userJourneyMgmt .uj-detail-pane-body {
  padding: 1rem 1.1rem;
}
#userJourneyMgmt .uj-detail-scroll {
  max-height: 320px;
  overflow-y: auto;
}
#userJourneyMgmt .uj-table {
  font-size: 0.85rem;
}
#userJourneyMgmt .uj-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--uj-surface);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--bs-secondary-color);
}
#userJourneyMgmt .uj-dash {
  color: var(--bs-secondary-color);
  opacity: 0.5;
}
#userJourneyMgmt {
  /* ---------------- Notification composer ---------------- */
}
#userJourneyMgmt .uj-notify-form {
  padding: 1rem;
  background: color-mix(in srgb, var(--bs-tertiary-bg, #f8f9fa) 70%, var(--uj-surface));
  border: 1px solid var(--bs-border-color);
}
#userJourneyMgmt .uj-notify-title {
  color: var(--uj-brand);
}
#userJourneyMgmt {
  /* ---------------- Skeletons ---------------- */
}
#userJourneyMgmt .uj-skel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
}
#userJourneyMgmt .uj-skel-dot,
#userJourneyMgmt .uj-skel-line {
  background: linear-gradient(90deg, var(--bs-tertiary-bg, #eef2f7) 25%, var(--bs-secondary-bg, #e2e8f0) 50%, var(--bs-tertiary-bg, #eef2f7) 75%);
  background-size: 200% 100%;
  animation: ujShimmer 1.3s ease-in-out infinite;
  border-radius: 6px;
}
#userJourneyMgmt .uj-skel-dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: 0 0 auto;
}
#userJourneyMgmt .uj-skel-lines {
  flex: 1;
}
#userJourneyMgmt .uj-skel-line {
  display: block;
  height: 10px;
  width: 60%;
}
#userJourneyMgmt .uj-skel-line + .uj-skel-line {
  margin-top: 8px;
}
#userJourneyMgmt .uj-skel-line.uj-skel-line-short {
  width: 40%;
}

@keyframes ujShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* ---------------- Quiz answers modal ----------------
   Lives outside #userJourneyMgmt in the DOM (a top-level Bootstrap modal),
   so it gets its own scope rather than inheriting that container's
   variables — same brand color, spelled out directly here instead. */
#ujAnswersModal .uj-answers-summary > div {
  min-width: 90px;
}
#ujAnswersModal .uj-answer-row {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}
#ujAnswersModal .uj-answer-row:last-child {
  border-bottom: none;
}
#ujAnswersModal .uj-answer-row.is-correct .uj-answer-mark {
  color: var(--bs-success, #198754);
}
#ujAnswersModal .uj-answer-row.is-incorrect .uj-answer-mark {
  color: var(--bs-danger, #dc3545);
}
#ujAnswersModal .uj-answer-q {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
#ujAnswersModal .uj-answer-n {
  font-weight: 700;
  font-size: 0.8rem;
  color: #09083a;
}
#ujAnswersModal .uj-answer-type {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bs-secondary-color);
  background: color-mix(in srgb, #09083a 8%, transparent);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}
#ujAnswersModal .uj-answer-mark {
  margin-left: auto;
}
#ujAnswersModal .uj-answer-text {
  font-weight: 600;
  margin-bottom: 0.35rem;
}
#ujAnswersModal .uj-answer-given,
#ujAnswersModal .uj-answer-correct {
  font-size: 0.85rem;
}
#ujAnswersModal .uj-answer-correct {
  color: var(--bs-danger, #dc3545);
}
#ujAnswersModal {
  /* Decrypted single-entry field list (contest/rebate "view details") */
}
#ujAnswersModal .uj-field-row {
  display: flex;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}
#ujAnswersModal .uj-field-row:last-child {
  border-bottom: none;
}
#ujAnswersModal .uj-field-label {
  flex: 0 0 40%;
  font-weight: 600;
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
}
#ujAnswersModal .uj-field-value {
  flex: 1;
  word-break: break-word;
}



/* user-segments.css */
@charset "UTF-8";
/*
 * /admin/user_segments — User Profiles (segments).
 *
 * Everything is scoped under #segBuilder so this can ride the global admin
 * bundle without leaking, same arrangement as points.scss and
 * user-journey.scss. Colours come from Bootstrap CSS variables wherever one
 * exists so the screen follows the admin theme (including dark mode) rather
 * than pinning its own palette.
 */
#segBuilder {
  --seg-brand: #4f46e5;
  --seg-brand-soft: rgba(79, 70, 229, 0.1);
  --seg-accent: #e2573b;
  --seg-good: #2f9e6f;
  --seg-surface: var(--bs-body-bg, #fff);
  --seg-line: var(--bs-border-color, #dee2e6);
  /* ---------------- Header ---------------- */
}
#segBuilder .seg-header-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.85rem;
  font-size: 1.25rem;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35);
}
#segBuilder .seg-subtitle {
  font-size: 0.92rem;
}
#segBuilder .seg-new-btn {
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  border: 0;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
}
#segBuilder .seg-new-btn:hover {
  filter: brightness(1.06);
  color: #fff;
}
#segBuilder {
  /* ---------------- Panels ---------------- */
}
#segBuilder .seg-panel {
  background: var(--seg-surface);
  border: 1px solid var(--seg-line);
  overflow: hidden;
}
#segBuilder .seg-panel-head {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--seg-line);
  background: var(--bs-tertiary-bg, #f8f9fa);
  font-size: 0.95rem;
}
#segBuilder .seg-subpanel {
  padding: 1.1rem;
  border: 1px solid var(--seg-line);
  background: var(--bs-tertiary-bg, #f8f9fa);
}
#segBuilder .seg-subpanel-title {
  color: var(--seg-brand);
}
#segBuilder {
  /* ---------------- Step rail ---------------- */
}
#segBuilder .seg-steps {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}
#segBuilder .seg-step {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem 0.4rem 0.5rem;
  border-radius: 2rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  background: var(--bs-tertiary-bg, #f1f3f5);
  border: 1px solid transparent;
}
#segBuilder .seg-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.78rem;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--seg-line);
}
#segBuilder .seg-step.is-active {
  color: var(--seg-brand);
  background: var(--seg-brand-soft);
  border-color: rgba(79, 70, 229, 0.25);
}
#segBuilder .seg-step.is-active .seg-step-num {
  color: #fff;
  background: var(--seg-brand);
  border-color: var(--seg-brand);
}
#segBuilder .seg-step.is-done .seg-step-num {
  color: #fff;
  background: var(--seg-good);
  border-color: var(--seg-good);
}
#segBuilder {
  /* ---------------- Saved list ---------------- */
}
#segBuilder .seg-saved-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  max-height: 26rem;
  overflow-y: auto;
}
#segBuilder .seg-saved-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.6rem;
  cursor: pointer;
}
#segBuilder .seg-saved-row:hover {
  background: var(--seg-brand-soft);
}
#segBuilder .seg-saved-row:focus-visible {
  outline: 2px solid var(--seg-brand);
  outline-offset: -2px;
}
#segBuilder .seg-saved-name {
  font-weight: 600;
  font-size: 0.9rem;
}
#segBuilder .seg-saved-meta {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}
#segBuilder .seg-saved-empty {
  padding: 0.75rem;
}
#segBuilder .seg-skel {
  padding: 0.6rem 0.75rem;
}
#segBuilder .seg-skel-line {
  display: block;
  height: 0.8rem;
  border-radius: 0.4rem;
  background: linear-gradient(90deg, var(--bs-tertiary-bg, #eee) 25%, var(--bs-secondary-bg, #e0e0e0) 37%, var(--bs-tertiary-bg, #eee) 63%);
  background-size: 400% 100%;
  animation: seg-shimmer 1.3s ease infinite;
}
@keyframes seg-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
#segBuilder {
  /* ---------------- Match toggle ---------------- */
}
#segBuilder .seg-match-toggle {
  display: inline-flex;
  border: 1px solid var(--seg-line);
  border-radius: 2rem;
  overflow: hidden;
  background: var(--bs-body-bg, #fff);
}
#segBuilder .seg-match-btn {
  border: 0;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.8rem;
  color: var(--bs-secondary-color);
}
#segBuilder .seg-match-btn.is-on {
  color: #fff;
  background: var(--seg-brand);
}
#segBuilder {
  /* ---------------- Rules ---------------- */
}
#segBuilder .seg-rule {
  border: 1px solid var(--seg-line);
  border-left: 3px solid var(--seg-brand);
  background: var(--bs-body-bg, #fff);
  overflow: hidden;
}
#segBuilder .seg-rule-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bs-tertiary-bg, #f8f9fa);
  border-bottom: 1px solid var(--seg-line);
}
#segBuilder .seg-rule-kind {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--seg-brand);
}
#segBuilder .seg-negate {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0;
}
#segBuilder .seg-rule-body {
  padding: 0.85rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
#segBuilder .seg-field-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
#segBuilder .seg-label {
  min-width: 6.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}
#segBuilder .seg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
#segBuilder .seg-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--seg-line);
  border-radius: 2rem;
  font-size: 0.78rem;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
}
#segBuilder .seg-chip input {
  display: none;
}
#segBuilder .seg-chip:hover {
  border-color: var(--seg-brand);
}
#segBuilder .seg-chip.is-on {
  color: #fff;
  background: var(--seg-brand);
  border-color: var(--seg-brand);
}
#segBuilder .seg-chip-count {
  font-size: 0.68rem;
  opacity: 0.75;
}
#segBuilder .seg-add-btn {
  border: 1px dashed var(--seg-line);
  background: transparent;
  color: var(--bs-body-color);
  font-size: 0.82rem;
}
#segBuilder .seg-add-btn:hover {
  border-color: var(--seg-brand);
  color: var(--seg-brand);
}
#segBuilder .seg-primary-btn {
  color: #fff;
  background: var(--seg-brand);
  border: 0;
  font-weight: 600;
}
#segBuilder .seg-primary-btn:hover {
  filter: brightness(1.08);
  color: #fff;
}
#segBuilder .seg-primary-btn:disabled {
  opacity: 0.6;
}
#segBuilder .seg-skip-btn {
  border: 1px solid var(--seg-line);
  background: transparent;
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
  font-weight: 600;
}
#segBuilder .seg-skip-btn:hover {
  border-color: var(--seg-brand);
  color: var(--seg-brand);
}
#segBuilder .seg-notify-btn {
  color: #fff;
  background: var(--seg-accent);
  border: 0;
  font-weight: 600;
}
#segBuilder .seg-notify-btn:hover {
  filter: brightness(1.08);
  color: #fff;
}
#segBuilder .seg-notify-btn:disabled {
  opacity: 0.6;
}
#segBuilder .seg-empty-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 1.3rem;
  color: var(--bs-secondary-color);
  background: var(--bs-tertiary-bg, #f1f3f5);
}
#segBuilder {
  /* ---------------- Plain-language summary ---------------- */
}
#segBuilder .seg-summary {
  padding: 0.8rem 1rem;
  background: var(--seg-brand-soft);
  border: 1px solid rgba(79, 70, 229, 0.2);
  font-size: 0.9rem;
  line-height: 1.55;
}
#segBuilder .seg-sum-part {
  display: inline;
  padding: 0.05rem 0.3rem;
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.6);
}
#segBuilder .seg-sum-join {
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--seg-brand);
  padding: 0 0.35rem;
}
#segBuilder .seg-sum-warn {
  font-size: 0.83rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.4rem;
  color: #7a4100;
  background: #fff3cd;
  border: 1px solid #ffe69c;
}
#segBuilder {
  /* AND / OR drawn between the condition cards, so the match mode is
     visible where the conditions are and not only in the panel header. */
}
#segBuilder .seg-rule {
  position: relative;
}
#segBuilder .seg-rule-joiner {
  position: absolute;
  left: 1.25rem;
  bottom: -1.35rem;
  z-index: 2;
  padding: 0.05rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--seg-brand);
  background: var(--bs-body-bg, #fff);
  border: 1px solid rgba(79, 70, 229, 0.35);
}
#segBuilder {
  /* ---------------- Quick picks + window controls ---------------- */
}
#segBuilder .seg-quick-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
#segBuilder .seg-quick {
  border: 1px solid var(--seg-line);
  background: var(--bs-body-bg, #fff);
  border-radius: 2rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  color: var(--seg-brand);
}
#segBuilder .seg-quick:hover {
  background: var(--seg-brand-soft);
  border-color: var(--seg-brand);
}
#segBuilder .seg-window {
  display: inline-flex;
  gap: 0.35rem;
}
#segBuilder .seg-window .seg-window-amount {
  max-width: 5.5rem;
}
#segBuilder .seg-window .seg-window-unit {
  max-width: 7.5rem;
}
#segBuilder {
  /* ---------------- Results hero ---------------- */
}
#segBuilder .seg-hero {
  padding: 1.1rem 1.25rem;
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
}
#segBuilder .seg-hero-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.9rem;
  font-size: 1.5rem;
  background: rgba(255, 255, 255, 0.18);
}
#segBuilder .seg-hero-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0.85;
}
#segBuilder .seg-hero-value {
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
#segBuilder .seg-hero-note {
  font-size: 0.75rem;
  opacity: 0.9;
  max-width: 12rem;
}
#segBuilder .seg-tabs .nav-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}
#segBuilder .seg-tabs .nav-link.active {
  background: var(--seg-brand);
  color: #fff;
}
#segBuilder .seg-count-badge {
  background: var(--seg-accent);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
#segBuilder {
  /* ---------------- Table ---------------- */
}
#segBuilder .seg-table-scroll {
  max-height: 24rem;
  overflow-y: auto;
}
#segBuilder .seg-table {
  font-size: 0.88rem;
}
#segBuilder .seg-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#segBuilder .seg-num-col {
  font-variant-numeric: tabular-nums;
}
#segBuilder {
  /* A zero is the interesting value in a "never engages" profile, so it is
     dimmed rather than hidden — the contrast against a big visit count is
     the whole point of the row. */
}
#segBuilder .seg-num-zero {
  color: var(--bs-secondary-color);
  opacity: 0.65;
}
#segBuilder .seg-sortable {
  cursor: pointer;
  user-select: none;
}
#segBuilder .seg-sortable:hover {
  color: var(--seg-brand);
}
#segBuilder {
  /* ---------------- Lift ("did it move the needle") ---------------- */
}
#segBuilder .seg-lift-summary {
  padding: 1.1rem 1.25rem;
  color: #fff;
  background: linear-gradient(135deg, #0f766e, #059669);
}
#segBuilder .seg-lift-big {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
#segBuilder .seg-lift-caption {
  font-size: 0.92rem;
  margin-top: 0.25rem;
}
#segBuilder .seg-lift-totals {
  font-size: 0.82rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
#segBuilder .seg-lift-delta {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#segBuilder .seg-lift-delta.is-up {
  color: #16a34a;
}
#segBuilder .seg-lift-delta.is-down {
  color: #dc2626;
}
#segBuilder {
  /* Inside the green summary the plain colours vanish, so invert there. */
}
#segBuilder .seg-lift-summary .seg-lift-delta.is-up, #segBuilder .seg-lift-summary .seg-lift-delta.is-down {
  color: #fff;
}
#segBuilder {
  /* ---------------- Quadrant chart ---------------- */
}
#segBuilder .seg-chart-wrap {
  border: 1px solid var(--seg-line);
  border-radius: 0.75rem;
  padding: 0.5rem;
  background: var(--bs-body-bg, #fff);
}
#segBuilder .seg-chart {
  width: 100%;
  height: auto;
  display: block;
}
#segBuilder .seg-chart-bg {
  fill: var(--bs-tertiary-bg, #f8f9fa);
}
#segBuilder {
  /* The "both high" corner, shaded the way the register's quadrants are. */
}
#segBuilder .seg-chart-good {
  fill: rgba(47, 158, 111, 0.12);
}
#segBuilder .seg-chart-threshold {
  stroke: var(--bs-secondary-color, #6c757d);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0.7;
}
#segBuilder .seg-chart-axis {
  stroke: var(--seg-line);
  stroke-width: 1;
}
#segBuilder .seg-chart-axis-label {
  font-size: 0.75rem;
  font-weight: 600;
  fill: var(--bs-secondary-color);
}
#segBuilder .seg-chart-tick {
  font-size: 0.68rem;
  fill: var(--bs-secondary-color);
}
#segBuilder .seg-chart-corner {
  font-size: 0.72rem;
  font-style: italic;
  fill: var(--bs-secondary-color);
  pointer-events: none;
}
#segBuilder .seg-dot {
  stroke: var(--bs-body-bg, #fff);
  stroke-width: 1.5;
  cursor: default;
  transition: r 0.12s ease;
}
#segBuilder .seg-dot-group:hover .seg-dot {
  r: 8;
}
#segBuilder .seg-q-hit {
  fill: transparent;
  cursor: pointer;
}
#segBuilder .seg-q-hit:hover {
  fill: rgba(79, 70, 229, 0.06);
}
#segBuilder .seg-q-hit.is-on {
  fill: rgba(79, 70, 229, 0.13);
}
#segBuilder {
  /* ---------------- Suggested modules ---------------- */
}
#segBuilder .seg-suggest-list {
  margin: 0;
}
#segBuilder .seg-suggest-empty {
  display: block;
  padding: 0.35rem 0;
}
#segBuilder .seg-suggest-item {
  border: 1px solid var(--seg-line);
  background: var(--seg-surface);
}
#segBuilder .seg-suggest-icon {
  color: var(--seg-brand);
  font-size: 1.1rem;
  line-height: 1.4;
  /* A bare inline <i> takes its box from the glyph, so the icon drifts out
     of line with the first row of text without this. */
  display: inline-block;
}
#segBuilder .seg-suggest-name {
  font-weight: 600;
}
#segBuilder .seg-suggest-note {
  margin-top: 0.15rem;
  font-style: italic;
}
#segBuilder {
  /* ---------------- Automation panel ---------------- */
}
#segBuilder .seg-auto {
  border: 1px solid rgba(37, 99, 235, 0.25);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.04), transparent);
}
#segBuilder .seg-auto-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.5rem;
  border-radius: 1rem;
  color: var(--bs-secondary-color);
  background: var(--bs-tertiary-bg, #f1f3f5);
  border: 1px solid var(--bs-border-color, #dee2e6);
}
#segBuilder .seg-auto-badge.is-on {
  color: #fff;
  background: #16a34a;
  border-color: #16a34a;
}
#segBuilder .seg-auto-badge.is-paused {
  color: #fff;
  background: #d97706;
  border-color: #d97706;
}
#segBuilder .seg-auto-btn {
  color: #fff;
  background: #2563eb;
  border: 0;
  font-weight: 600;
}
#segBuilder .seg-auto-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  color: #fff;
}
#segBuilder .seg-auto-btn:disabled {
  opacity: 0.55;
}
#segBuilder .seg-auto-stats > div {
  min-width: 8rem;
}
#segBuilder .seg-auto-stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-secondary-color);
}
#segBuilder .seg-auto-stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
#segBuilder .seg-auto-stat-sub {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
#segBuilder {
  /* ---------------- Suggestion campaign ---------------- */
}
#segBuilder .seg-campaign {
  border: 1px solid rgba(180, 83, 9, 0.25);
  background: linear-gradient(180deg, rgba(180, 83, 9, 0.04), transparent);
}
#segBuilder .seg-campaign-sub {
  background: var(--seg-surface);
  border: 1px solid var(--seg-line);
}



/* walkthrough.css */
@charset "UTF-8";
/*
 * Guided-walkthrough / product-tour styles.
 *
 * Layering: the launcher sits at 1090 (above content, below Bootstrap modals'
 * backdrop region), and the tour overlay at 1120 (above modals ~1055 and
 * tooltips/popovers ~1085) so a tour is always on top.
 *
 * The dim is produced by the spotlight's huge box-shadow spread: a small rounded
 * "hole" is left transparent and everything around it is darkened. Moving the
 * hole between steps animates smoothly via transitions on its box metrics.
 *
 * Colours use Bootstrap's theme-aware variables (--bs-body-bg / --bs-body-color /
 * --bs-border-color) plus the project --primary token, so the tour adapts to
 * light and dark automatically (see darkmode.scss). prefers-reduced-motion
 * disables the non-essential motion.
 */
:root {
  --wt-dim: 0.62; /* backdrop opacity */
  --wt-radius: 10px; /* spotlight corner radius */
  --wt-accent: var(--primary, #0d6efd);
  --wt-accent-rgb: var(--primary-rgb, 13, 110, 253);
}

/* ------------------------------------------------------------------ */
/* Overlay root                                                       */
/* ------------------------------------------------------------------ */
.walkthrough-root {
  position: fixed;
  inset: 0;
  z-index: 1120;
  pointer-events: none; /* only the catcher / bubble opt back in */
  animation: wt-fade-in 0.22s ease both;
}
.walkthrough-root.is-closing {
  animation: wt-fade-out 0.24s ease both;
}

/* Full-screen click blocker — active only on tap-to-advance steps. */
.walkthrough-catcher {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.walkthrough-catcher.is-active {
  pointer-events: auto;
  cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Dim layer (SVG mask cutout)                                        */
/* ------------------------------------------------------------------ */
/*
 * The dim used to be a single huge box-shadow spread (0 0 0 100vmax) on the
 * spotlight hole. That relies on the browser growing the box's own
 * border-radius by the spread distance for the shadow's outer corners
 * (border-radius + spread ⇒ ~1900px radius here), which visibly rounds the
 * shadow away from the true viewport corner and leaves an uncovered sliver
 * exactly at the corner farthest from the hole. An SVG mask has no such
 * scale-dependent corner math — the hole is drawn at its real size — so
 * coverage is exact regardless of viewport size or hole position.
 */
.walkthrough-dim {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.walkthrough-dim rect.wt-dim-fill {
  fill: rgba(0, 0, 0, var(--wt-dim));
  transition: fill 0.2s ease;
}
.walkthrough-dim rect.wt-dim-hole {
  fill: #000;
  transition: x 0.35s cubic-bezier(0.22, 1, 0.36, 1), y 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s cubic-bezier(0.22, 1, 0.36, 1), height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.walkthrough-root:not(.is-dim) .walkthrough-dim rect.wt-dim-fill {
  fill: rgba(0, 0, 0, 0);
}

/* ------------------------------------------------------------------ */
/* Spotlight (the animated ring/glow drawn over the hole)              */
/* ------------------------------------------------------------------ */
.walkthrough-spotlight {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: var(--wt-radius);
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(var(--wt-accent-rgb), 0.9), 0 0 22px 6px rgba(var(--wt-accent-rgb), 0.45);
  transition: top 0.35s cubic-bezier(0.22, 1, 0.36, 1), left 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s cubic-bezier(0.22, 1, 0.36, 1), height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.walkthrough-spotlight.is-hidden {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

/* A gentle pulse on the highlight ring to draw the eye. */
.walkthrough-spotlight:not(.is-hidden)::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid rgba(var(--wt-accent-rgb), 0.85);
  animation: wt-pulse 1.8s ease-out infinite;
}

/* Step opted out of dimming. */
.walkthrough-root:not(.is-dim) .walkthrough-spotlight {
  box-shadow: 0 0 0 2px rgba(var(--wt-accent-rgb), 0.9), 0 0 22px 6px rgba(var(--wt-accent-rgb), 0.35);
}

/* ------------------------------------------------------------------ */
/* Bubble                                                             */
/* ------------------------------------------------------------------ */
.walkthrough-bubble {
  position: fixed;
  z-index: 1; /* above the spotlight within the root */
  max-width: 340px;
  min-width: 220px;
  padding: 18px 20px;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #1a1a1a);
  border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.12));
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  outline: none;
  animation: wt-bubble-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.walkthrough-bubble .walkthrough-text {
  margin: 0;
  font-size: 0.975rem;
  line-height: 1.5;
}
.walkthrough-bubble .walkthrough-lottie {
  width: 100%;
  max-height: 120px;
  margin-bottom: 8px;
}
.walkthrough-bubble .walkthrough-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.walkthrough-bubble .walkthrough-progress {
  font-size: 0.8rem;
  opacity: 0.6;
  white-space: nowrap;
}
.walkthrough-bubble .walkthrough-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.walkthrough-bubble {
  /* Little pointer toward the target. */
}
.walkthrough-bubble::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: inherit;
  border: inherit;
  transform: rotate(45deg);
}
.walkthrough-bubble.anchor-center::after {
  display: none;
}
.walkthrough-bubble.anchor-bottom::after {
  top: -7px;
  left: 50%;
  margin-left: -6px;
  border-bottom: 0;
  border-right: 0;
}
.walkthrough-bubble.anchor-top::after {
  bottom: -7px;
  left: 50%;
  margin-left: -6px;
  border-top: 0;
  border-left: 0;
}
.walkthrough-bubble.anchor-left::after {
  right: -7px;
  top: 50%;
  margin-top: -6px;
  border-bottom: 0;
  border-left: 0;
}
.walkthrough-bubble.anchor-right::after {
  left: -7px;
  top: 50%;
  margin-top: -6px;
  border-top: 0;
  border-right: 0;
}

/* ------------------------------------------------------------------ */
/* Launcher (persistent "?" replay button)                            */
/* ------------------------------------------------------------------ */
.walkthrough-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1090;
  width: 46px;
  height: 46px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--wt-accent);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(var(--wt-accent-rgb), 0.5);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.walkthrough-launcher:hover, .walkthrough-launcher:focus-visible {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 26px rgba(var(--wt-accent-rgb), 0.6);
  outline: none;
}
.walkthrough-launcher.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Keyframes                                                          */
/* ------------------------------------------------------------------ */
@keyframes wt-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes wt-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes wt-bubble-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes wt-pulse {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  70% {
    opacity: 0;
    transform: scale(1.14);
  }
  100% {
    opacity: 0;
    transform: scale(1.14);
  }
}
/* ------------------------------------------------------------------ */
/* Reduced motion                                                     */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .walkthrough-root,
  .walkthrough-bubble {
    animation: none;
  }
  .walkthrough-spotlight {
    transition: none;
  }
  .walkthrough-spotlight::after {
    animation: none;
  }
  .walkthrough-launcher {
    transition: none;
  }
}