/* CRSEO PromptHub - Design System (Clean Light Theme) */

/* Reset and base overrides */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-y: scroll;
  background-color: #fafafa;
  color: #18181b;
}

/* Custom scrollbars matching Clean Light Theme */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #fafafa;
}

::-webkit-scrollbar-thumb {
  background: #e4e4e7; /* zinc-200 */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #d4d4d8; /* zinc-300 */
}

/* Hide scrollbar helper classes */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* Theme Pill Styles */
.theme-pill {
  border: 1px solid #ececef; /* border-zinc-200 */
  background-color: #ffffff;
  color: #71717a; /* text-zinc-500 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.theme-pill:hover {
  background-color: #fafafa;
  color: #18181b;
  border-color: #d4d4d8;
}

.theme-pill.active {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); /* Indigo to Purple */
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

/* Media Filter Styles */
.media-filter-btn {
  transition: all 0.2s ease-in-out;
}

/* Masonry Layout */
.masonry-grid {
  column-count: 1;
  column-gap: 1rem;
}

@media (min-width: 640px) {
  .masonry-grid {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  .masonry-grid {
    column-count: 3;
  }
}

@media (min-width: 1280px) {
  .masonry-grid {
    column-count: 4;
  }
}

/* Cards (Clean Light System: 16px radius, soft shadow, clean border) */
.masonry-card {
  break-inside: avoid;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid #ececef;
  border-radius: 16px; /* 16px radius */
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); /* Soft shadow */
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.masonry-card:hover {
  transform: translateY(-2px);
  border-color: #c7d2fe; /* Soft indigo border on hover */
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(79, 70, 229, 0.02);
}

/* Copy Animation Indicator */
@keyframes flash-indigo {
  0% { background-color: rgba(79, 70, 229, 0.15); }
  100% { background-color: transparent; }
}

.copy-flash {
  animation: flash-indigo 0.8s ease-out;
}

/* Modal animation triggers */
#detail-modal.active {
  opacity: 1;
  pointer-events: auto;
}

#detail-modal.active #modal-container {
  transform: scale(1);
}

#lead-modal.active {
  opacity: 1;
  pointer-events: auto;
}

#lead-modal.active #lead-container {
  transform: scale(1);
}

/* Dark Mode overrides */
.dark body {
  background-color: #09090b;
  color: #f4f4f5;
}

.dark ::-webkit-scrollbar-track {
  background: #09090b;
}

.dark ::-webkit-scrollbar-thumb {
  background: #27272a;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}

.dark .theme-pill {
  border-color: #27272a;
  background-color: #18181b;
  color: #a1a1aa;
}

.dark .theme-pill:hover {
  background-color: #27272a;
  color: #f4f4f5;
  border-color: #3f3f46;
}

.dark .masonry-card {
  background-color: #18181b;
  border-color: #27272a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.dark .masonry-card:hover {
  border-color: #4f46e5;
  box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(79, 70, 229, 0.1);
}