/* Variáveis e utilitários leves para complementar Tailwind */
:root {
  --ring: 0 0 0 3px rgba(99,102,241,0.35);
}

.input {
  width: 100%;
  background-color: rgba(2, 6, 23, 0.6);
  border: 1px solid rgb(51 65 85);
  border-radius: 0.75rem;
  padding: 0.625rem 0.75rem;
  color: rgb(226 232 240);
  font-size: 0.875rem;
}
.input:focus {
  outline: none;
  box-shadow: var(--ring);
  border-color: rgb(99 102 241);
}

.btn-primary {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-image: linear-gradient(to right, rgb(79 70 229), rgb(59 130 246));
  color: #fff;
  font-size: 0.875rem;
  box-shadow: 0 10px 15px -3px rgb(2 6 23 / 0.4), 0 4px 6px -4px rgb(2 6 23 / 0.4);
  transition: transform 120ms ease, opacity 120ms ease, background-color 120ms ease;
}
.btn-primary:hover {
  transform: scale(1.01);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: rgb(30 41 59);
  color: rgb(226 232 240);
  font-size: 0.875rem;
  border: 1px solid rgb(51 65 85);
  transition: background-color 120ms ease;
}
.btn-secondary:hover {
  background-color: rgb(51 65 85);
}

.btn-outline {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(51 65 85);
  color: rgb(203 213 225);
  font-size: 0.875rem;
  transition: border-color 120ms ease, color 120ms ease;
}
.btn-outline:hover {
  border-color: rgb(99 102 241);
  color: rgb(165 180 252);
}

#dropzone.dragover {
  outline: var(--ring);
}

tbody tr:hover {
  background: rgb(2 6 23 / 0.35);
}