/* ─────────────────────────────────────────────────────────────
   V-MEP Utilities
───────────────────────────────────────────────────────────── */

/* ── Screen reader only ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Display ── */
.hidden        { display: none !important; }
.d-flex        { display: flex; }
.d-grid        { display: grid; }
.d-block       { display: block; }
.d-inline-flex { display: inline-flex; }

/* ── Flex helpers ── */
.flex-col       { flex-direction: column; }
.align-center   { align-items: center; }
.align-start    { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-end    { justify-content: flex-end; }
.flex-wrap      { flex-wrap: wrap; }
.flex-grow      { flex-grow: 1; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* ── Text ── */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.text-sm  { font-size: 0.875rem; }
.text-xs  { font-size: 0.75rem; }
.text-lg  { font-size: 1.125rem; }
.text-xl  { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }

.font-medium { font-weight: 500; }
.font-semi   { font-weight: 600; }
.font-bold   { font-weight: 700; }

.text-orange  { color: var(--orange-500); }
.text-navy    { color: var(--navy-900); }
.text-muted   { color: var(--slate-500); }
.text-subtle  { color: var(--slate-400); }
.text-white   { color: var(--white); }
.text-success { color: #166534; }
.text-danger  { color: var(--track-f); }

.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── Backgrounds ── */
.bg-white  { background-color: var(--white); }
.bg-navy   { background: var(--gradient-navy); color: var(--white); }
.bg-orange { background: var(--gradient-orange); color: var(--white); }
.bg-light  { background-color: var(--slate-50); }
.bg-subtle { background-color: var(--slate-100); }

/* ── Margin / Padding ── */
.m-0  { margin: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.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-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

/* ── Width / Height ── */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.max-w-sm { max-width: 480px; }
.max-w-md { max-width: 640px; }
.max-w-lg { max-width: 820px; }

/* ── Border ── */
.border { border: 1px solid var(--slate-200); }
.border-t { border-top: 1px solid var(--slate-200); }
.border-b { border-bottom: 1px solid var(--slate-200); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* ── Shadow ── */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }

/* ── Overflow ── */
.overflow-hidden { overflow: hidden; }

/* ── Position ── */
.relative { position: relative; }
.sticky-top { position: sticky; top: var(--space-6); }

/* ── Divider ── */
.hr {
  height: 1px;
  background: var(--slate-100);
  border: none;
  margin: var(--space-6) 0;
}

/* ── Empty / Placeholder states ── */
.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  color: var(--slate-500);
}
.empty-state-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  opacity: 0.4;
}
.empty-state h3 { font-size: 1.125rem; color: var(--slate-700); font-family: var(--font-sans); }
.empty-state p  { font-size: 0.9rem; margin-top: var(--space-2); }

/* ── Loading skeleton ── */
.skeleton {
  background: linear-gradient(90deg, var(--slate-100) 25%, var(--slate-50) 50%, var(--slate-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Inline alert/notice ── */
.alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.alert-info    { background: var(--navy-50);   border-color: var(--navy-600); color: var(--navy-800); }
.alert-success { background: #ECFDF5; border-color: #059669; color: #065F46; }
.alert-warning { background: #FFFBEB; border-color: #D97706; color: #92400E; }
.alert-error   { background: #FEF2F2; border-color: var(--track-f); color: #991B1B; }

/* ── Fade-in animation utility ── */
.fade-in {
  animation: fadeIn 0.4s ease both;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}