/* ===== Reusable Components ===== */

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--radius-md);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  transition: all var(--tr-fast);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn-primary {
  background: var(--clr-accent);
  color: #fff;
}
.btn-primary:hover { background: var(--clr-accent-hover); }

.btn-secondary {
  background: var(--clr-surface-alt);
  color: var(--clr-text);
  border-color: var(--clr-border);
}
.btn-secondary:hover { background: var(--clr-border); }

.btn-danger {
  background: var(--clr-danger);
  color: #fff;
}
.btn-danger:hover { background: var(--clr-danger-hover); }

.btn-ghost {
  background: transparent;
  color: var(--clr-text-muted);
}
.btn-ghost:hover { color: var(--clr-text); background: var(--clr-surface); }

.btn-sm {
  padding: var(--sp-xs) var(--sp-md);
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
}

.btn-v2beta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-xs) var(--sp-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-accent-dim);
  color: var(--clr-accent);
  background: transparent;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: all var(--tr-fast);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
.btn-v2beta::after {
  content: 'BETA';
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: var(--clr-accent-dim);
  color: var(--clr-bg);
  border-radius: 3px;
  padding: 1px 4px;
  line-height: 1.4;
}
.btn-v2beta:hover {
  background: var(--clr-accent-dim);
  color: var(--clr-bg);
  box-shadow: 0 0 12px color-mix(in srgb, var(--clr-accent) 35%, transparent);
}
.btn-v2beta:hover::after {
  background: var(--clr-bg);
  color: var(--clr-accent);
}

.btn-lg {
  padding: var(--sp-md) var(--sp-xl);
  font-size: var(--fs-md);
}

.btn-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  transition: all var(--tr-fast);
}
.btn-icon:hover { background: var(--clr-surface-alt); }

.btn-accent {
  background: var(--clr-accent);
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--sp-xs) var(--sp-md);
  font-size: var(--fs-sm);
}
.btn-accent:hover { background: var(--clr-accent-hover); }

/* --- Cards --- */
.card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  transition: box-shadow var(--tr-fast);
}
.card:hover { box-shadow: var(--shadow-glow); }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-md);
}

.card-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

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

.badge-hero    { background: rgba(91,245,160,0.15); color: var(--clr-hero);    border-color: var(--clr-hero); }
.badge-villain { background: rgba(245,91,91,0.15);  color: var(--clr-villain); border-color: var(--clr-villain); }
.badge-npc     { background: rgba(245,185,91,0.15); color: var(--clr-npc);     border-color: var(--clr-npc); }
.badge-accent  { background: rgba(91,138,245,0.15); color: var(--clr-accent);  border-color: var(--clr-accent); }

/* --- Tag chips --- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--sp-sm);
  font-size: var(--fs-xs);
  background: var(--clr-surface-alt);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  color: var(--clr-text-muted);
}
.tag-remove {
  cursor: pointer;
  font-size: 0.8em;
  opacity: 0.6;
}
.tag-remove:hover { opacity: 1; color: var(--clr-danger); }

/* --- Form Groups --- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-md);
}

.form-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--clr-text-muted);
}

.form-row {
  display: flex;
  gap: var(--sp-md);
  flex-wrap: wrap;
}
.form-row > * { flex: 1; min-width: 120px; }

/* --- Tables --- */
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th,
.data-table td {
  padding: var(--sp-sm) var(--sp-md);
  text-align: left;
  border-bottom: 1px solid var(--clr-border);
  font-size: var(--fs-sm);
}
.data-table th {
  font-weight: var(--fw-medium);
  color: var(--clr-text-muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.data-table tr:hover td {
  background: var(--clr-surface-alt);
}

/* --- Empty States --- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3xl);
  color: var(--clr-text-dim);
  text-align: center;
  gap: var(--sp-md);
}
.empty-state-icon { font-size: 3rem; opacity: 0.5; }
.empty-state-text { font-size: var(--fs-md); }

/* --- Utility Classes --- */
.flex       { display: flex; }
.flex-col   { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-xs  { gap: var(--sp-xs); }
.gap-sm  { gap: var(--sp-sm); }
.gap-md  { gap: var(--sp-md); }
.gap-lg  { gap: var(--sp-lg); }
.gap-xl  { gap: var(--sp-xl); }
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.text-center { text-align: center; }
.text-muted  { color: var(--clr-text-muted); }
.text-dim    { color: var(--clr-text-dim); }
.text-accent { color: var(--clr-accent); }
.text-danger { color: var(--clr-danger); }
.text-success { color: var(--clr-success); }
.text-sm   { font-size: var(--fs-sm); }
.text-xs   { font-size: var(--fs-xs); }
.text-lg   { font-size: var(--fs-lg); }
.font-bold { font-weight: var(--fw-bold); }
.mt-sm  { margin-top: var(--sp-sm); }
.mt-md  { margin-top: var(--sp-md); }
.mt-lg  { margin-top: var(--sp-lg); }
.mb-sm  { margin-bottom: var(--sp-sm); }
.mb-md  { margin-bottom: var(--sp-md); }
.mb-lg  { margin-bottom: var(--sp-lg); }
.p-sm   { padding: var(--sp-sm); }
.p-md   { padding: var(--sp-md); }
.p-lg   { padding: var(--sp-lg); }
.hidden { display: none !important; }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  border: 0;
}

/* --- Grid layouts --- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-lg);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-lg);
}
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-lg);
}