/* CSP-safe utility classes
 * Replaces inline style= attributes across the site
 * Version: 8
 */

/* ===== Spacing utilities ===== */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }
.mr-0 { margin-right: 0; }

.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); }

.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); }

.ml-sm { margin-left: var(--space-sm); }
.ml-md { margin-left: var(--space-md); }
.ml-lg { margin-left: var(--space-lg); }

.mr-sm { margin-right: var(--space-sm); }
.mr-md { margin-right: var(--space-md); }
.mr-lg { margin-right: var(--space-lg); }

/* Fixed pixel spacing (legacy support) */
.mt-8 { margin-top: 0.5rem; }
.mt-10 { margin-top: 0.625rem; }
.mt-12 { margin-top: 0.75rem; }
.mt-14 { margin-top: 0.875rem; }
.mt-24 { margin-top: 1.5rem; }
.mt-48 { margin-top: 3rem; }

.mb-8 { margin-bottom: 0.5rem; }
.mb-12 { margin-bottom: 0.75rem; }

.ml-10 { margin-left: 0.625rem; }

.mr-10 { margin-right: 0.625rem; }

/* ===== Layout utilities ===== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }

.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

/* ===== Display utilities ===== */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }

/* ===== Status badge variants ===== */
.badge-operational {
  background: rgba(0, 255, 136, 0.1);
  border-color: rgba(0, 255, 136, 0.3);
  color: var(--good);
}

.badge-locked {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: rgba(255, 71, 87, 0.08);
  border: 1px solid rgba(255, 71, 87, 0.3);
  border-radius: var(--radius-md);
}

.badge-unlocked {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: var(--radius-md);
}

/* ===== Text utilities ===== */
.text-muted-inline {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.text-muted-report {
  margin-top: 1rem;
}

.text-muted-tight { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
.text-muted-tight-bottom { margin-top: var(--space-sm); margin-bottom: 0; }

/* ===== Margin list utilities ===== */
.ml-list {
  margin-left: 1.25rem;
  color: var(--text-muted);
}

/* ===== App page helpers ===== */
.locked-box { display: none; margin-top: var(--space-md); padding: var(--space-md); background: rgba(255,71,87,0.08); border: 1px solid rgba(255,71,87,0.3); border-radius: var(--radius-md); }
.unlocked-box { display: none; margin-top: var(--space-md); padding: var(--space-md); background: rgba(0,255,136,0.08); border: 1px solid rgba(0,255,136,0.3); border-radius: var(--radius-md); }
.btn-margin-top-sm { margin-top: 0.5rem; }
.payload-header-row { margin-bottom: 0.5rem; }
.flex-row-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-md); }