/* ===== UTILITY CLASSES ===== */
/* Replace inline styles in PHP files with these classes */
/* Add to components.css or create utilities.css */

/* ===== MARGIN UTILITIES ===== */
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ===== PADDING UTILITIES ===== */
.p-0 { padding: 0; }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }

.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }

.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }

/* ===== DISPLAY UTILITIES ===== */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-inline-flex { display: inline-flex; }

/* ===== FLEXBOX UTILITIES ===== */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-center { align-items: center; }
.align-stretch { align-items: stretch; }

.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* ===== GAP UTILITIES ===== */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* ===== GRID UTILITIES ===== */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* ===== WIDTH UTILITIES ===== */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-50 { width: 50%; }
.max-w-sm { max-width: var(--container-sm); }
.max-w-md { max-width: var(--container-md); }
.max-w-lg { max-width: var(--container-lg); }

/* ===== TEXT UTILITIES ===== */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-tertiary { color: var(--color-tertiary); }
.text-muted { color: var(--color-tertiary); }

.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.text-danger { color: var(--color-error); }
.text-info { color: var(--color-info); }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-md { font-size: var(--text-md); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }

.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

.font-mono { font-family: var(--font-mono); }
.font-sans { font-family: var(--font-sans); }

/* ===== BACKGROUND UTILITIES ===== */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }

.bg-success { background-color: var(--message-success-bg); }
.bg-warning { background-color: var(--message-warning-bg); }
.bg-error { background-color: var(--message-error-bg); }
.bg-info { background-color: var(--message-info-bg); }

/* ===== BORDER UTILITIES ===== */
.border { border: var(--border-width-1) solid var(--border-primary); }
.border-0 { border: none; }
.border-t { border-top: var(--border-width-1) solid var(--border-primary); }
.border-b { border-bottom: var(--border-width-1) solid var(--border-primary); }
.border-l { border-left: var(--border-width-1) solid var(--border-primary); }
.border-r { border-right: var(--border-width-1) solid var(--border-primary); }

.border-emphasis { border-color: var(--border-emphasis); }
.border-secondary { border-color: var(--border-secondary); }

/* ===== SPECIFIC REPLACEMENTS FOR COMMON INLINE STYLES ===== */

/* Replace: style="margin-bottom: var(--space-lg);" */
/* With: class="mb-lg" */

/* Replace: style="display: flex; gap: var(--space-md); align-items: center;" */
/* With: class="d-flex gap-md align-center" */

/* Replace: style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-lg);" */
/* With: class="d-grid grid-auto-fit gap-lg" */

/* Replace: style="color: var(--color-secondary); font-size: var(--text-sm);" */
/* With: class="text-secondary text-sm" */

/* Replace: style="text-align: center;" */
/* With: class="text-center" */

/* Replace: style="padding: var(--space-md); background: var(--bg-secondary);" */
/* With: class="p-md bg-secondary" */

/* Replace: style="margin-top: var(--space-lg);" */
/* With: class="mt-lg" */

/* Replace: style="display: flex; flex-direction: column; gap: var(--space-3); width: 100%; text-align: center;" */
/* With: class="d-flex flex-column gap-sm w-full text-center" */

/* ===== OAUTH DIVIDER (specific pattern in login.php) ===== */
.auth-divider {
  text-align: center;
  margin: var(--space-lg) 0;
  color: var(--color-tertiary);
  position: relative;
}

.auth-divider span {
  background: var(--bg-primary);
  padding: 0 var(--space-md);
  position: relative;
  z-index: 1;
}

.auth-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-primary);
  z-index: 0;
}

/* ===== SECTION DIVIDER ===== */
.section-divider {
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: var(--border-width-1) solid var(--border-primary);
}

/* ===== INFO BOX (replaces multiple inline bg + padding patterns) ===== */
.info-box {
  padding: var(--space-md);
  background: var(--color-info-dark);
  color: var(--color-primary);
  font-size: var(--text-sm);
}

.info-box--lg {
  padding: var(--space-lg);
}

/* ===== PERSON PHOTO (memorial pages) ===== */
.person-photo {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  overflow: hidden;
}

.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ===== BALANCE DISPLAY (account page) ===== */
.balance-display {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  color: var(--color-primary);
}

/* ===== CHECKBOX/TOGGLE LABEL ===== */
.toggle-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

/* ===== DELETE BUTTON VARIANT ===== */
.btn--danger {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-text);
  border-color: var(--btn-danger-border);
}

.btn--danger:hover {
  background-color: var(--btn-danger-hover-bg);
}

.btn--danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}