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

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :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%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* DataWizz Promotion Styles */
.datawizz-button {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 2px solid #334155;
  border-radius: 8px;
  padding: 12px 24px;
  box-shadow: 3px 3px 0px #334155;
  transition: all 0.2s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
  justify-content: center;
}

.datawizz-button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0px #334155;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.datawizz-logo {
  width: 140px;
  height: auto;
  flex-shrink: 0;
}

.datawizz-tagline {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
  font-style: italic;
  margin: 0;
  white-space: nowrap;
}

.datawizz-promotion {
  position: relative;
  display: inline-block;
}

/* DataWizz Tooltip Styles */
.datawizz-tooltip {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  animation: fadeIn 0.2s ease-in-out;
}

.datawizz-tooltip-content {
  background: linear-gradient(135deg, #fefefe 0%, #f9f9f9 100%);
  color: #374151;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  max-width: 280px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 2px dotted #000000;
  backdrop-filter: blur(8px);
}

.datawizz-tooltip-arrow {
  position: absolute;
  top: -8px;
  left: 16px;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #fefefe 0%, #f9f9f9 100%);
  border-top: 2px dotted #000000;
  border-left: 2px dotted #000000;
  border-right: none;
  border-bottom: none;
  transform: rotate(45deg);
  border-radius: 2px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* .datawizz-arrow-container {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: -5px;
  white-space: nowrap;
}

.datawizz-arrow-wrapper {
  width: 80px;
  height: 60px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.datawizz-marker-arrow {
  width: 200px;
  height: 200px;
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.1));
  transform: scaleX(-1) translate(-20px, -30px);
}

.datawizz-try-text {
  font-size: 1.1rem;
  color: #fcd34d;
  font-weight: 600;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  font-family: 'Comic Sans MS', cursive, sans-serif;
} */

@media (max-width: 768px) {
  .datawizz-button {
    padding: 10px 20px;
    min-width: 180px;
    gap: 8px;
  }
  
  .datawizz-logo {
    width: 120px;
  }
  
  .datawizz-tagline {
    font-size: 0.8rem;
  }
  
  .datawizz-tooltip-content {
    font-size: 0.8rem;
    padding: 10px 14px;
    max-width: 240px;
  }
  
  /* .datawizz-arrow-container {
    margin-top: -3px;
  }
  
  .datawizz-arrow-wrapper {
    width: 60px;
    height: 45px;
  }

  .datawizz-marker-arrow {
    width: 160px;
    height: 160px;
    transform: scaleX(-1) translate(-15px, -25px);
  }
  
  .datawizz-try-text {
    font-size: 1rem;
  } */
}
