/*
 * EmanoCRM Webinar — Component styles
 * Complementa o Tailwind Play CDN com classes reutilizáveis.
 * Não usa @apply — CSS puro, sem etapa de compilação.
 *
 * Brand palette (Indigo):
 *   50:#eef2ff  100:#e0e7ff  200:#c7d2fe  300:#a5b4fc
 *   400:#818cf8 500:#6366f1  600:#4f46e5  700:#4338ca
 *   800:#3730a3 900:#312e81
 */

/* ─── Reset base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
  line-height: 1.25rem;
}

.btn-primary {
  background-color: #4f46e5;
  color: #ffffff;
}
.btn-primary:hover  { background-color: #4338ca; }
.btn-primary:focus  { outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,.35); }

.btn-secondary {
  background-color: #ffffff;
  color: #374151;
  border: 1px solid #d1d5db;
}
.btn-secondary:hover { background-color: #f9fafb; }
.btn-secondary:focus { outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,.25); }

.btn-danger {
  background-color: #dc2626;
  color: #ffffff;
}
.btn-danger:hover  { background-color: #b91c1c; }
.btn-danger:focus  { outline: none; box-shadow: 0 0 0 3px rgba(220,38,38,.35); }

.btn-ghost {
  background-color: transparent;
  color: #4b5563;
}
.btn-ghost:hover { background-color: #f3f4f6; }
.btn-ghost:focus { outline: none; }

/* ─── Form elements ──────────────────────────────────────────────────────── */
.input {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #111827;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input::placeholder { color: #9ca3af; }
.input:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(99,102,241,.35);
}
.input[readonly], .input[disabled] {
  background-color: #f9fafb;
  cursor: not-allowed;
  opacity: 0.75;
}

.label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.25rem;
}

.form-group { margin-bottom: 1rem; }

/* ─── Card ───────────────────────────────────────────────────────────────── */
.card {
  background-color: #ffffff;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  padding: 1.5rem;
}

/* ─── Badges ─────────────────────────────────────────────────────────────── */
.badge-active,
.badge-draft,
.badge-ended,
.badge-archived {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.badge-active   { background-color: #dcfce7; color: #166534; }
.badge-draft    { background-color: #fef9c3; color: #854d0e; }
.badge-ended    { background-color: #f3f4f6; color: #4b5563; }
.badge-archived { background-color: #e5e7eb; color: #374151; }

/* ─── Table ──────────────────────────────────────────────────────────────── */
.table-base {
  width: 100%;
  font-size: 0.875rem;
  text-align: left;
  border-collapse: collapse;
}
.table-base thead {
  background-color: #f9fafb;
}
.table-base th {
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.table-base td {
  padding: 0.75rem 1rem;
  border-top: 1px solid #f3f4f6;
  color: #111827;
}
.table-base tbody tr:hover td {
  background-color: #f9fafb;
}

/* ─── Scrollbar hide ─────────────────────────────────────────────────────── */
.scrollbar-hide {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none !important;
}