@tailwind base;
@tailwind components;
@tailwind utilities;

/* === Custom Base Styles === */
body {
  @apply bg-gray-50 text-gray-800 font-sans;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
  @apply w-full p-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500;
}

button {
  @apply px-4 py-2 rounded-lg font-semibold text-white transition-all duration-200;
}

button.primary {
  @apply bg-blue-600 hover:bg-blue-700;
}

button.secondary {
  @apply bg-gray-500 hover:bg-gray-600;
}

.card {
  @apply bg-white p-4 rounded-xl shadow-sm border border-gray-200;
}

.section-header {
  @apply text-xl font-semibold mb-4;
}

table {
  @apply w-full border-collapse mt-4;
}

table th,
table td {
  @apply text-left py-2 px-3 border-b border-gray-200;
}

/* === Mobile Card Item === */
.inventory-item {
  @apply flex justify-between items-center p-4 mb-2 rounded-xl bg-white shadow;
}

.inventory-item input[type="number"] {
  @apply w-20 text-right;
}

/* === Tag Styles === */
.tag {
  @apply inline-block px-2 py-1 text-xs font-medium rounded bg-gray-200 text-gray-700;
}

.tag.used {
  @apply bg-red-100 text-red-600;
}

.tag.added {
  @apply bg-green-100 text-green-600;
}

/* === Utility === */
.hidden-mobile {
  @apply hidden md:block;
}

.visible-mobile {
  @apply block md:hidden;
}