/* ================================================
   SJOLIE INITIALS AVATAR SYSTEM
   Global avatar component replacing placeholder images
   ================================================ */

.sjolie-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.5px !important;
  vertical-align: middle !important;
  position: relative !important;
}

/* Size variants */
.sjolie-avatar-xs {
  width: 24px !important;
  height: 24px !important;
  font-size: 10px !important;
}

.sjolie-avatar-sm {
  width: 36px !important;
  height: 36px !important;
  font-size: 13px !important;
}

.sjolie-avatar-md {
  width: 48px !important;
  height: 48px !important;
  font-size: 18px !important;
}

.sjolie-avatar-lg {
  width: 64px !important;
  height: 64px !important;
  font-size: 22px !important;
}

.sjolie-avatar-xl {
  width: 96px !important;
  height: 96px !important;
  font-size: 32px !important;
}

.sjolie-avatar-xxl {
  width: 128px !important;
  height: 128px !important;
  font-size: 42px !important;
}

/* Text inside avatar */
.sjolie-avatar-text {
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Image inside avatar (when real image exists) */
.sjolie-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* Company logo variant (can be square) */
.sjolie-avatar-company {
  border-radius: 8px !important;
}
.sjolie-avatar-company .sjolie-avatar-img {
  border-radius: 8px !important;
}

/* Override the existing avatar-title bg-light pattern to work with our system */
.avatar-title:has(.sjolie-avatar) {
  background: transparent !important;
  padding: 0 !important;
}

/* Make sjolie-avatar work within existing .avatar-md containers */
.avatar-md .sjolie-avatar {
  width: 100% !important;
  height: 100% !important;
}
.avatar-sm .sjolie-avatar {
  width: 100% !important;
  height: 100% !important;
}

/* SweetAlert2 Sjolie Overrides (global) */
.swal2-popup {
  font-family: 'DM Sans', sans-serif !important;
  border-radius: 0 !important;
}
.swal2-title {
  font-family: 'Playfair Display', serif !important;
  color: #3a2d27 !important;
  font-size: 22px !important;
  font-weight: 600 !important;
}
.swal2-html-container,
#swal2-content,
.swal2-content {
  font-family: 'DM Sans', sans-serif !important;
  color: #6b5a50 !important;
  font-size: 14px !important;
}
.swal2-icon.swal2-info {
  border-color: #b4926e !important;
  color: #b4926e !important;
}
.swal2-icon.swal2-success {
  border-color: #b4926e !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: #b4926e !important;
}
.swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: #b4926e !important;
}
.swal2-icon.swal2-warning {
  border-color: #b4926e !important;
  color: #b4926e !important;
}
.swal2-icon.swal2-question {
  border-color: #dcbfa6 !important;
  color: #4e3629 !important;
}
.swal2-confirm.swal2-styled {
  background: #3a2d27 !important;
  border: 1px solid #3a2d27 !important;
  border-radius: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 10px 32px !important;
  box-shadow: none !important;
}
.swal2-confirm.swal2-styled:hover {
  background: #4e3629 !important;
}
.swal2-confirm.swal2-styled:focus {
  box-shadow: 0 0 0 3px rgba(180,146,110,0.3) !important;
}
.swal2-cancel.swal2-styled {
  background: transparent !important;
  border: 1px solid #3a2d27 !important;
  border-radius: 0 !important;
  color: #3a2d27 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 10px 32px !important;
  box-shadow: none !important;
}
.swal2-cancel.swal2-styled:hover {
  background: #f3ece3 !important;
}
.swal2-deny.swal2-styled {
  background: #6b5a50 !important;
  border-radius: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  box-shadow: none !important;
}
.swal2-container {
  background: rgba(58,45,39,0.45) !important;
}
.swal2-timer-progress-bar {
  background: #b4926e !important;
}
.swal2-close {
  color: #6b5a50 !important;
}
.swal2-close:hover {
  color: #3a2d27 !important;
}

/* Hide placeholder images that are set programmatically */
.sjolie-hidden-placeholder {
  display: none !important;
}

/* === SweetAlert2 Icon Fixes (2026-04-11) === */
/* Fix success checkmark circle being clipped/overflowing */
.swal2-icon {
  margin: 1.5em auto 0.6em !important;
  overflow: visible !important;
}
.swal2-icon.swal2-success {
  width: 5em !important;
  height: 5em !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
  width: 5em !important;
  height: 5em !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
}
/* Fix the circular success animation lines */
.swal2-icon.swal2-success .swal2-success-circular-line-left,
.swal2-icon.swal2-success .swal2-success-circular-line-right {
  background: white !important;
}
.swal2-popup .swal2-icon.swal2-success .swal2-success-fix {
  background: white !important;
}
/* Ensure error/warning icons inside success popups are hidden */
.swal2-popup .swal2-icon:not(.swal2-success):not(.swal2-error):not(.swal2-warning):not(.swal2-info):not(.swal2-question) {
  display: none !important;
}
/* Hide jQuery validation error labels that leak into Swal popup */
.swal2-popup label.error,
.swal2-container label.error {
  display: none !important;
}
/* Error icon brand styling */
.swal2-icon.swal2-error {
  border-color: #c0392b !important;
}
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  background-color: #c0392b !important;
}