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

@source "app/views";
@source "app/javascript";
@source "app/helpers";

@theme {
  --color-wood: #8B4A2F;
  --color-wood-dark: #6B3420;
  --color-wood-light: #A05039;
  --color-wood-muted: #D0B5A6;
  --color-charcoal: #1C1C1C;
  --color-charcoal-soft: #2E2E2E;
  --color-forest: #4A6741;
  --color-forest-light: #5E8054;
  --color-cream: #F5EFE6;
  --color-cream-dark: #EDE4D8;
  --color-stone: #8A7965;
  --color-stone-light: #C8B9A8;
}

/* Photo Reordering Styles */
.photo-grid {
  @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4;
}

.photo-item {
  @apply relative aspect-square rounded-lg overflow-hidden bg-gray-100 cursor-move transition-all duration-200;
}

.photo-item img {
  @apply w-full h-full object-cover;
}

.drag-handle {
  @apply absolute top-2 right-2 w-8 h-8 bg-white/80 rounded flex items-center justify-center cursor-move opacity-0 transition-opacity duration-200;
}

.photo-item:hover .drag-handle {
  @apply opacity-100;
}

.photo-item.dragging {
  @apply opacity-50 scale-105 shadow-lg z-50;
}

.photo-item.drag-over {
  @apply border-2 border-dashed border-indigo-500;
}

.photo-item.success {
  @apply border-2 border-green-500;
  animation: success-pulse 1s ease-in-out;
}

@keyframes success-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.photo-item:focus-within {
  @apply outline-2 outline outline-indigo-500 outline-offset-2;
}

.photo-item.loading {
  @apply opacity-70 pointer-events-none;
}

.photo-item.error {
  @apply border-2 border-red-500;
}

/* Custom styles for the navbar */
.nav-link {
  @apply text-stone-light hover:text-cream px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200;
}

.nav-button {
  @apply bg-wood hover:bg-wood-dark text-cream px-6 py-2 rounded-md text-sm font-medium transition-colors duration-200;
}

.nav-container {
  @apply container mx-auto px-6;
}

/* Custom form styles */
.admin-input {
  @apply appearance-none relative block w-full px-8 py-4 bg-white text-gray-900 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-base shadow-sm border-2 border-gray-400;
  background-color: white !important;
  width: 100%;
}

/* Explicit custom color utilities — Tailwind v4 JIT does not scan ERB templates
   on Heroku so these must be defined here as plain CSS. */
.bg-wood            { background-color: #8B4A2F; }
.bg-wood-dark       { background-color: #6B3420; }
.bg-wood-light      { background-color: #A05039; }
.bg-wood-muted      { background-color: #D0B5A6; }
.bg-cream           { background-color: #F5EFE6; }
.bg-cream-dark      { background-color: #EDE4D8; }
.bg-charcoal        { background-color: #1C1C1C; }
.bg-charcoal-soft   { background-color: #2E2E2E; }
.bg-forest          { background-color: #4A6741; }
.bg-forest-light    { background-color: #5E8054; }

.text-wood          { color: #8B4A2F; }
.text-wood-dark     { color: #6B3420; }
.text-wood-light    { color: #A05039; }
.text-wood-muted    { color: #D0B5A6; }
.text-cream         { color: #F5EFE6; }
.text-charcoal      { color: #1C1C1C; }
.text-charcoal-soft { color: #2E2E2E; }
.text-stone         { color: #8A7965; }
.text-stone-light   { color: #C8B9A8; }
.text-forest        { color: #4A6741; }
.text-forest-light  { color: #5E8054; }

.border-wood        { border-color: #8B4A2F; }
.border-stone-light { border-color: #C8B9A8; }

.hover\:bg-wood:hover        { background-color: #8B4A2F; }
.hover\:bg-wood-dark:hover   { background-color: #6B3420; }
.hover\:bg-wood-muted:hover  { background-color: #D0B5A6; }
.hover\:bg-cream-dark:hover  { background-color: #EDE4D8; }
.hover\:text-cream:hover     { color: #F5EFE6; }
.hover\:text-wood:hover      { color: #8B4A2F; }
.hover\:text-wood-dark:hover { color: #6B3420; }
.hover\:border-wood:hover    { border-color: #8B4A2F; }

.active\:bg-wood:active      { background-color: #8B4A2F; }
.active\:bg-wood-dark:active { background-color: #6B3420; }

.focus\:ring-wood:focus   { --tw-ring-color: #8B4A2F; }
.focus\:border-wood:focus { border-color: #8B4A2F; }