/* Minimal Modern Design System */

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 3.9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 96.1%;
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;
  --accent: 0 0% 96.1%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 0 0% 3.9%;
  --radius: 8px;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 84% 4.9%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 212.7 26.8% 83.9%;
}

* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Button Variants */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: all 150ms ease !important;
  outline: none !important;
  border-radius: var(--radius) !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.btn:focus-visible {
  outline: 2px solid hsl(var(--ring)) !important;
  outline-offset: 1px !important;
}

.btn:disabled {
  pointer-events: none !important;
  opacity: 0.6 !important;
}

.btn-default {
  height: 2.5rem !important;
  padding: 0.5rem 1rem !important;
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: 1px solid transparent !important;
}

.btn-default:hover {
  background-color: hsl(var(--primary) / 0.85) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px hsl(var(--primary) / 0.15) !important;
}

.btn-destructive {
  height: 2.5rem !important;
  padding: 0.5rem 1rem !important;
  background-color: hsl(var(--destructive)) !important;
  color: hsl(var(--destructive-foreground)) !important;
  border: 1px solid transparent !important;
}

.btn-destructive:hover {
  background-color: hsl(var(--destructive) / 0.85) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px hsl(var(--destructive) / 0.15) !important;
}

.btn-outline {
  height: 2.5rem !important;
  padding: 0.5rem 1rem !important;
  background-color: hsl(var(--background)) !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
}

.btn-outline:hover {
  background-color: hsl(var(--muted)) !important;
  border-color: hsl(var(--primary));
  transform: translateY(-1px);
  box-shadow: 0 2px 8px hsl(var(--border) / 0.15);
}

.btn-secondary {
  @apply btn h-10 px-4 py-2;
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border: 1px solid transparent;
}

.btn-secondary:hover {
  background-color: hsl(var(--secondary) / 0.8);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px hsl(var(--secondary) / 0.15);
}

.btn-ghost {
  @apply btn h-10 px-4 py-2;
  color: hsl(var(--foreground));
  background: transparent;
  border: 1px solid transparent;
}

.btn-ghost:hover {
  background-color: hsl(var(--muted));
  transform: translateY(-1px);
}

.btn-link {
  height: 2.5rem !important;
  padding: 0.5rem 1rem !important;
  color: hsl(var(--foreground)) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  background: transparent !important;
  border: none !important;
}

.btn-link:hover {
  color: hsl(var(--primary)) !important;
}

.btn-sm {
  height: 2rem !important;
  padding: 0 0.75rem !important;
  font-size: 0.75rem !important;
  border-radius: calc(var(--radius) - 2px) !important;
}

.btn-lg {
  height: 3rem !important;
  padding: 0 2rem !important;
  font-size: 1rem !important;
  border-radius: calc(var(--radius) + 2px) !important;
}

.btn-ghost {
  height: 2.5rem !important;
  padding: 0.5rem 1rem !important;
  background-color: transparent !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid transparent !important;
}

.btn-ghost:hover {
  background-color: hsl(var(--muted)) !important;
  color: hsl(var(--foreground)) !important;
}

.btn-icon {
  height: 2.5rem !important;
  width: 2.5rem !important;
  padding: 0 !important;
}

/* Card Component */
.card {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 1px 3px hsl(var(--foreground) / 0.05);
  transition: all 150ms ease;
}

.card:hover {
  box-shadow: 0 4px 12px hsl(var(--foreground) / 0.08);
}

.card-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  padding: 1.5rem !important;
}

.card-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.card-description {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1.6 !important;
}

.card-content {
  padding: 1.5rem !important;
  padding-top: 0 !important;
}

.card-footer {
  display: flex !important;
  align-items: center !important;
  padding: 1.5rem !important;
  padding-top: 0 !important;
}

/* Input Component */
.input {
  display: flex !important;
  height: 2.5rem !important;
  width: 100% !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  background-color: hsl(var(--background)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  color: hsl(var(--foreground)) !important;
  transition: all 150ms ease !important;
}

.input::placeholder {
  color: hsl(var(--muted-foreground)) !important;
}

.input:focus {
  outline: none !important;
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.3) !important;
}

.input:hover:not(:focus) {
  border-color: hsl(var(--border) / 0.8) !important;
}

.input:disabled {
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* Label Component */
.label {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: hsl(var(--foreground)) !important;
  display: block !important;
  margin-bottom: 0.5rem !important;
}

/* Badge Component */
.badge {
  @apply inline-flex items-center px-2.5 py-0.5 text-xs font-medium;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid transparent;
  transition: all 150ms ease;
}

.badge-default {
  @apply badge;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.badge-secondary {
  @apply badge;
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

.badge-destructive {
  @apply badge;
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}

.badge-outline {
  @apply badge;
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
  background-color: transparent;
}

/* Alert Component */
.alert {
  @apply relative w-full p-4;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background-color: hsl(var(--background));
}

.alert-destructive {
  @apply alert;
  border-color: hsl(var(--destructive) / 0.5);
  background-color: hsl(var(--destructive) / 0.05);
  color: hsl(var(--destructive));
}

.alert-title {
  @apply mb-2 font-medium text-foreground;
}

.alert-description {
  @apply text-sm text-muted-foreground leading-relaxed;
}

/* Navigation Component */
.nav {
  background-color: hsl(var(--background)) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  padding: 1rem 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
}

.nav-container {
  max-width: 80rem !important;
  margin: 0 auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

@media (min-width: 640px) {
  .nav-container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

@media (min-width: 1024px) {
  .nav-container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

.nav-brand a {
  text-decoration: none !important;
  color: hsl(var(--foreground)) !important;
}

.nav-menu {
  display: flex !important;
  align-items: center !important;
  gap: 2rem !important;
}

.nav-item {
  display: flex !important;
  align-items: center !important;
  padding: 0.5rem 1rem !important;
  border-radius: var(--radius) !important;
  color: hsl(var(--muted-foreground)) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 150ms ease !important;
}

.nav-item:hover {
  color: hsl(var(--foreground)) !important;
  background-color: hsl(var(--muted)) !important;
}

/* Dialog/Modal Component */
.dialog-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 50 !important;
  backdrop-filter: blur(4px) !important;
  background-color: hsl(var(--background) / 0.8) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
}

.dialog-content {
  position: relative !important;
  z-index: 51 !important;
  width: 100% !important;
  display: grid !important;
  gap: 1.5rem !important;
  background-color: hsl(var(--background)) !important;
  padding: 2rem !important;
  box-shadow: 0 25px 50px -12px hsl(var(--foreground) / 0.25) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  max-width: 42rem !important;
}

.dialog-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.dialog-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: hsl(var(--foreground)) !important;
}

.dialog-description {
  font-size: 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1.6 !important;
}

.dialog-footer {
  display: flex !important;
  flex-direction: column-reverse !important;
  gap: 0.75rem !important;
}

@media (min-width: 640px) {
  .dialog-footer {
    flex-direction: row !important;
    justify-content: flex-end !important;
  }
}

/* Spinner/Loading */
.spinner {
  @apply inline-block h-4 w-4 animate-spin rounded-full border-2 border-solid border-current border-r-transparent motion-reduce:animate-[spin_1.5s_linear_infinite];
}

/* Status badges for projects */
.status-queued { 
  @apply badge-outline;
  color: hsl(45 93% 47%);
  background-color: hsl(45 93% 47% / 0.1);
  border-color: hsl(45 93% 47% / 0.2);
}
.status-crawling { 
  @apply badge-outline;
  color: hsl(221 83% 53%);
  background-color: hsl(221 83% 53% / 0.1);
  border-color: hsl(221 83% 53% / 0.2);
}
.status-processing { 
  @apply badge-outline;
  color: hsl(262 83% 58%);
  background-color: hsl(262 83% 58% / 0.1);
  border-color: hsl(262 83% 58% / 0.2);
}
.status-completed { 
  @apply badge-outline;
  color: hsl(142 76% 36%);
  background-color: hsl(142 76% 36% / 0.1);
  border-color: hsl(142 76% 36% / 0.2);
}
.status-failed { 
  @apply badge-outline;
  color: hsl(var(--destructive));
  background-color: hsl(var(--destructive) / 0.1);
  border-color: hsl(var(--destructive) / 0.2);
}

/* Navigation */
.nav {
  @apply bg-background;
  border-bottom: 1px solid hsl(var(--border));
}

.nav-container {
  @apply container flex h-16 items-center;
}

.nav-brand {
  @apply flex items-center space-x-3;
}

.nav-menu {
  @apply flex items-center space-x-8;
}

.nav-item {
  @apply text-sm font-medium text-muted-foreground hover:text-foreground transition-all duration-150 flex items-center px-3 py-2 rounded-md;
}

.nav-item:hover {
  background-color: hsl(var(--muted) / 0.5);
}

/* Utility classes */
.text-background { color: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }
.text-card { color: hsl(var(--card)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }
.text-popover { color: hsl(var(--popover)); }
.text-popover-foreground { color: hsl(var(--popover-foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-secondary { color: hsl(var(--secondary)); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
.text-muted { color: hsl(var(--muted)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-accent { color: hsl(var(--accent)); }
.text-accent-foreground { color: hsl(var(--accent-foreground)); }
.text-destructive { color: hsl(var(--destructive)); }
.text-destructive-foreground { color: hsl(var(--destructive-foreground)); }
.text-border { color: hsl(var(--border)); }
.text-input { color: hsl(var(--input)); }
.text-ring { color: hsl(var(--ring)); }

.bg-background { background-color: hsl(var(--background)); }
.bg-foreground { background-color: hsl(var(--foreground)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-card-foreground { background-color: hsl(var(--card-foreground)); }
.bg-popover { background-color: hsl(var(--popover)); }
.bg-popover-foreground { background-color: hsl(var(--popover-foreground)); }
.bg-primary { background-color: hsl(var(--primary)); }
.bg-primary-foreground { background-color: hsl(var(--primary-foreground)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.bg-secondary-foreground { background-color: hsl(var(--secondary-foreground)); }
.bg-muted { background-color: hsl(var(--muted)); }
.bg-muted-foreground { background-color: hsl(var(--muted-foreground)); }
.bg-accent { background-color: hsl(var(--accent)); }
.bg-accent-foreground { background-color: hsl(var(--accent-foreground)); }
.bg-destructive { background-color: hsl(var(--destructive)); }
.bg-destructive-foreground { background-color: hsl(var(--destructive-foreground)); }
.bg-border { background-color: hsl(var(--border)); }
.bg-input { background-color: hsl(var(--input)); }
.bg-ring { background-color: hsl(var(--ring)); }

.border-background { border-color: hsl(var(--background)); }
.border-foreground { border-color: hsl(var(--foreground)); }
.border-card { border-color: hsl(var(--card)); }
.border-card-foreground { border-color: hsl(var(--card-foreground)); }
.border-popover { border-color: hsl(var(--popover)); }
.border-popover-foreground { border-color: hsl(var(--popover-foreground)); }
.border-primary { border-color: hsl(var(--primary)); }
.border-primary-foreground { border-color: hsl(var(--primary-foreground)); }
.border-secondary { border-color: hsl(var(--secondary)); }
.border-secondary-foreground { border-color: hsl(var(--secondary-foreground)); }
.border-muted { border-color: hsl(var(--muted)); }
.border-muted-foreground { border-color: hsl(var(--muted-foreground)); }
.border-accent { border-color: hsl(var(--accent)); }
.border-accent-foreground { border-color: hsl(var(--accent-foreground)); }
.border-destructive { border-color: hsl(var(--destructive)); }
.border-destructive-foreground { border-color: hsl(var(--destructive-foreground)); }
.border-input { border-color: hsl(var(--input)); }
.border-ring { border-color: hsl(var(--ring)); }

/* Card content padding fixes */
.card-content {
    padding: 20px !important;
}

.card-header {
    padding: 20px !important;
    padding-bottom: 12px !important;
}

.card-footer {
    padding: 20px !important;
    padding-top: 12px !important;
}

/* Ensure consistent padding for all card content variants */
.card-content.space-y-4,
.card-content.border-t,
.card-content.border-t.border-border,
.card-content.border-t.border-border.first\:border-t-0,
.card .card-content,
.card > .card-content {
    padding: 20px !important;
}

/* Prose styles for content display */
.prose {
    max-width: none !important;
    line-height: 1.6 !important;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    color: hsl(var(--foreground)) !important;
    font-weight: 600 !important;
    margin-top: 1.5em !important;
    margin-bottom: 0.5em !important;
}

.prose p {
    color: hsl(var(--foreground)) !important;
    margin-bottom: 1em !important;
}

.prose ul, .prose ol {
    padding-left: 1.5em !important;
    margin-bottom: 1em !important;
}

.prose li {
    margin-bottom: 0.5em !important;
    color: hsl(var(--foreground)) !important;
}

.prose blockquote {
    border-left: 4px solid hsl(var(--border)) !important;
    padding-left: 1em !important;
    margin: 1em 0 !important;
    font-style: italic !important;
    color: hsl(var(--muted-foreground)) !important;
}

.prose strong, .prose b {
    font-weight: 600 !important;
    color: hsl(var(--foreground)) !important;
}

.prose em, .prose i {
    font-style: italic !important;
}

.status-completed {
  padding: 0px 5px;
}