/*
  Utility classes -- exist specifically so no page ever needs a style=""
  attribute, which Content-Security-Policy's style-src 'self' blocks in
  production with no 'unsafe-inline'. Every inline style previously in
  this codebase was moved here or into a component class.
*/
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }

.p-2 { padding: var(--space-2); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

.hidden { display: none; }
.w-full { width: 100%; }
.max-w-xs { max-width: 320px; }
.max-w-sm { max-width: 480px; }
.max-w-md { max-width: 600px; }
.max-w-lg { max-width: 720px; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-muted { color: var(--color-text-muted); }
.font-bold { font-weight: 700; }

.bordered-input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.bordered-box {
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.flex-1-min150 { flex: 1; min-width: 150px; }

/* Skeleton size presets (previously inline style="height:...;width:...;") */
.skel-h-16 { height: 16px; }
.skel-h-40 { height: 40px; }
.skel-h-44 { height: 44px; }
.skel-h-60 { height: 60px; }
.skel-h-64 { height: 64px; }
.skel-h-80 { height: 80px; }
.skel-h-120 { height: 120px; }
.skel-h-200 { height: 200px; }
.skel-w-44 { width: 44px; }
.skel-w-50 { width: 50%; }
.skel-w-70 { width: 70%; }
.skel-w-80 { width: 80%; }
.skel-w-85 { width: 85%; }
.skel-w-100 { width: 100%; }
.skel-radius-md { border-radius: var(--radius-md); }

/* Alert/banner boxes (form success/error summaries) */
.alert-box { padding: var(--space-4); border-radius: var(--radius-md); }
.alert-box--padded-5 { padding: var(--space-5); }
.alert-box--success { border-left: 4px solid var(--color-success); }
.alert-box--danger { border-left: 4px solid var(--color-danger); }

/* Grid column-count overrides for admin stat grids */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .grid-cols-4, .grid-cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-2, .grid-cols-3 { grid-template-columns: minmax(0, 1fr); }
}

/* Numeric alignment for data tables (e.g. graduate-count figures). */
.text-right { text-align: right; }

/* Additional compound utilities for remaining unique patterns */
.alert-box--success-padded { padding: var(--space-5); border-left: 4px solid var(--color-success); }
.alert-box--danger-padded { padding: var(--space-4); border-left: 4px solid var(--color-danger); margin-bottom: var(--space-5); }
.alert-box--info-padded { padding: var(--space-4); border-left: 4px solid var(--color-info); background: var(--color-surface-1); }
.text-align-left { text-align: left; }
.dept-hero-meta { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--sidebar-text); }
.dept-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.no-radius { border-radius: 0; }
.btn--hero-secondary { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.25); }
.editor-card { padding: var(--space-4); margin-bottom: var(--space-4); }
.editor-note-box { padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.editor-status-row { margin-top: var(--space-4); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.editor-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.editor-history-summary { cursor: pointer; font-size: var(--fs-xs); color: var(--color-text-muted); }
.editor-meta-text { margin-bottom: 4px; font-size: var(--fs-sm); color: var(--color-text-muted); }
.add-item-form-row { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.add-item-form-col { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); max-width: 500px; }
.align-self-start { align-self: flex-start; }
.filter-bar-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); align-items: flex-end; }
.stat-value-md { font-size: var(--fs-md); }
.stat-grid-row { display: flex; gap: var(--space-3); margin-bottom: var(--space-5); flex-wrap: wrap; }
.pagination-row { margin-top: var(--space-4); display: flex; gap: var(--space-2); }
.stat-muted-value { font-size: var(--fs-md); color: var(--color-text-muted); }
.integration-connected { color: var(--color-success); font-size: var(--fs-lg); }
.integration-not-connected { color: var(--color-danger); font-size: var(--fs-lg); }