/* MeoWorld Unified UI Utilities and Components
   Purpose: consolidate small, reusable classes to remove inline styles and keep a consistent look.
   Note: Builds on top of base.css (design source of truth) and enhancements.css. */

/* Layout helpers */
.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
.text-center { text-align: center; }
.w-full { width: 100%; }
.min-w-200 { min-width: 200px; }

/* Flexbox helpers */
.flex { display: flex; }
.flex-row { display: flex; flex-direction: row; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
/* Flex growth helper */
.flex-1 { flex: 1 1 0%; }

/* Gap helpers (use with flex/grid) */
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }

/* Spacing helpers */
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.pt-1 { padding-top: 0.5rem; }
.pt-2 { padding-top: 1rem; }
.pt-3 { padding-top: 1.5rem; }
.pt-4 { padding-top: 2rem; }
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }

/* Borders and dividers */
.border-top { border-top: 1px solid var(--color-gray); }
.border { border: 1px solid var(--color-gray); }
.rounded { border-radius: var(--border-radius); }
.rounded-lg { border-radius: calc(var(--border-radius) * 1.5); }

/* Buttons */
.btn--lg { padding: 0.875rem 2rem; font-size: 1.1rem; }

/* Cards */
.card-glass {
  background: rgba(17, 24, 39, 0.25);
  backdrop-filter: blur(20px);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-gray);
}

/* Animations (subtle) */
@keyframes uw-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn {
  animation: uw-fade-in var(--transition-base);
}
.animate-fadeInUp {
  animation: uw-fade-in var(--transition-base);
}

/* Accessibility helpers */
.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;
}

/* Forms */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
.label-strong { font-weight: 600; }

/* Message list a11y */
.message-list[role="log"] {
  outline: none;
}