/* =========================================================================
   utilities.css — Classes utilitárias pequenas e reutilizáveis
   Uso: para ajustes locais rápidos. Componentes complexos ganham CSS próprio.
   ========================================================================= */

/* ---------- Container principal (mobile-first) ---------- */
.container {
  width: 100%;
  max-width: var(--max-w-mobile);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.container-wide {
  width: 100%;
  max-width: var(--max-w-admin);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ---------- Flex ---------- */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.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; }
.justify-end     { justify-content: flex-end; }
.flex-1     { flex: 1 1 auto; }
.flex-wrap  { flex-wrap: wrap; }
.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-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* ---------- Grid ---------- */
.grid        { display: grid; }
.grid-2      { grid-template-columns: repeat(2, 1fr); }
.grid-3      { grid-template-columns: repeat(3, 1fr); }

/* ---------- Spacing (padding/margin por eixo) ---------- */
.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }

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

.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-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

/* ---------- Typography ---------- */
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-md { font-size: var(--fs-md); }
.text-lg { font-size: var(--fs-lg); }
.text-xl { font-size: var(--fs-xl); }

.font-medium { font-weight: var(--fw-medium); }
.font-semi   { font-weight: var(--fw-semi); }
.font-bold   { font-weight: var(--fw-bold); }

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

.text-muted   { color: var(--color-text-muted); }
.text-subtle  { color: var(--color-text-subtle); }
.text-primary { color: var(--color-primary); }
.text-danger  { color: var(--color-danger); }
.text-success { color: var(--color-success); }

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

/* ---------- Surfaces / Cards ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.card-compact {
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.surface-alt { background: var(--color-surface-alt); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;                    /* touch target mínimo mobile */
  padding: 0 var(--space-5);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  border-radius: var(--radius-lg);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  user-select: none;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
}
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }

.btn-secondary {
  background: var(--color-secondary);
  color: var(--color-secondary-text);
}
.btn-secondary:hover:not(:disabled) { background: var(--color-secondary-hover); }

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-ghost:hover:not(:disabled) { background: var(--color-surface-alt); }

.btn-danger {
  background: var(--color-danger);
  color: var(--color-text-inverse);
}

.btn-block { width: 100%; }

/* ---------- Inputs ---------- */
.input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.input.is-invalid {
  border-color: var(--color-danger);
}

.textarea {
  min-height: 96px;
  padding: var(--space-3) var(--space-4);
  line-height: var(--lh-normal);
  resize: vertical;
}

.label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.help-text {
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  margin-top: var(--space-1);
}
.help-text.is-error { color: var(--color-danger); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

/* ---------- Visibilidade ---------- */
.hidden     { display: none !important; }
.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;
}

/* ---------- Estados (skeleton/loading) ---------- */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-alt) 0%,
    var(--color-surface-muted) 50%,
    var(--color-surface-alt) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s var(--ease-in-out) infinite;
  border-radius: var(--radius-md);
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Divisor ---------- */
.divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-4) 0;
}