/**
 * ChurchCRM Custom Utility Classes
 *
 * This file contains CUSTOM CSS utility classes unique to ChurchCRM.
 * Bootstrap standard utilities are used for common patterns (display, spacing, colors, etc.)
 *
 * See BOOTSTRAP_CONSOLIDATION_GUIDE.md for Bootstrap equivalent classes.
 *
 * Benefits:
 * - Reduced CSS bloat (no duplication with Bootstrap)
 * - Consistent with Bootstrap conventions
 * - CSP compliance (removes need for 'unsafe-inline')
 * - DRY principle (Don't Repeat Yourself)
 *
 * BOOTSTRAP ALTERNATIVES TO USE INSTEAD:
 * - .text-danger (instead of .text-error)
 * - .text-success (instead of .text-success)
 * - .text-warning (instead of .text-warning)
 * - .text-muted (instead of .text-muted)
 * - .text-white (instead of .text-white)
 * - .d-none, .d-block, .d-inline-block (instead of .display-*)
 * - .text-center, .text-right, .text-left (instead of .text-center/right/left)
 * - .m-0, .mx-auto, .mt-5, etc. (instead of .margin-*, .padding-*)
 * - .w-100, .w-75, .w-50 (instead of .width-*)
 *
 * DEPRECATED CLASSES (Migrated to Bootstrap):
 * - .callout, .callout-info, .callout-warning, .callout-danger → Use Bootstrap .alert .alert-info .alert-warning .alert-danger
 * - .ShadedBox, .LightShadedBox → Use Bootstrap .card .card-body or .alert
 * - .box-info, .box-danger, .box-warning → Use Bootstrap .card with .bg-info .bg-danger .bg-warning
 * - .main-box, .main-box-body → Use Bootstrap .card .card-body
 */

/* ============================================
   CUSTOM INTERACTIVE & UTILITIES (Bootstrap-independent)
   ============================================ */

/* Custom cursor pointer utility (not in Bootstrap) */
.cursor-pointer {
  cursor: pointer;
}

/* Text decoration utilities (Bootstrap 4 doesn't have these) */
.text-decoration-none {
  text-decoration: none;
}

/* Float-right deprecated in Bootstrap 5, but kept for legacy support */
.float-right {
  float: right;
}

/* ============================================
   CUSTOM COMPONENT STYLES
   ============================================ */

/* Profile-related styles */
.profile-user-img {
  display: inline-block;
}

.person-thumbnail {
  width: 40px;
  height: 40px;
  display: inline-block;
}

/* Registration form styles */
.register-box-margin {
  margin: 72px auto 0;
}

.register-box-600 {
  width: 600px;
}

.register-box-75pct {
  width: 75%;
}

.register-logo-margin {
  margin: 72px auto 0;
}

.register-box-flex {
  width: 100%;
  margin-top: 5px;
}

/* Textarea and canvas custom heights */
.textarea-120px {
  height: 120px;
}

.canvas-250px {
  height: 250px;
}

.canvas-250px-donut {
  height: 250px;
}

.canvas-flex {
  height: 250px;
}

/* ============================================
   CUSTOM TYPOGRAPHY & SPACING
   ============================================ */

/* Pre-formatted text with compact line height */
.pre-compact {
  line-height: 1.2;
}

/* Line-height utilities (Bootstrap 4 doesn't include lh-* utilities) */
.lh-lg {
  line-height: 2;
}

/* ============================================
   DEPRECATED/LEGACY CLASSES (Backward Compatibility)
   ============================================ */

/* Used in password change forms for inline validation errors */
.form-field-error {
  color: red;
}

/* Hide view photo button when there is no uploaded photo or gravatar */
/* NOTE: toggled by JS in FamilyView.js - do not remove or rename */
.hide-if-no-photo {
  display: none !important;
}
