/* Custom styles for Kepkept web interface */
/* Tailwind CSS is loaded via CDN in base.html */

/* Button components */
.btn-primary {
  padding: 0.5rem 1rem;
  background-color: rgb(37, 99, 235);
  color: white;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
  font-weight: 500;
}

.btn-primary:hover {
  background-color: rgb(29, 78, 216);
}

.btn-secondary {
  padding: 0.5rem 1rem;
  background-color: rgb(75, 85, 99);
  color: white;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
  font-weight: 500;
}

.btn-secondary:hover {
  background-color: rgb(55, 65, 81);
}

.btn-danger {
  padding: 0.5rem 1rem;
  background-color: rgb(220, 38, 38);
  color: white;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
  font-weight: 500;
}

.btn-danger:hover {
  background-color: rgb(185, 28, 28);
}

/* Input field */
.input-field {
  width: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid rgb(209, 213, 219);
  border-radius: 0.5rem;
  outline: none;
}

.input-field:focus {
  box-shadow: 0 0 0 2px rgb(59, 130, 246);
  border-color: transparent;
}

/* Card component */
.card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

/* Navigation link */
.nav-link {
  color: rgb(55, 65, 81);
  transition: color 0.2s;
  font-weight: 500;
}

.nav-link:hover {
  color: rgb(37, 99, 235);
}

/* Text shadow utility */
.text-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}