@import "tailwindcss";

/* Custom theme configuration for NANGO Dashboard */
@theme {
  /* NANGO Brand Colors */
  --color-primary-50: #f0f9f4;
  --color-primary-100: #dcf2e8;
  --color-primary-200: #bbf7d0;
  --color-primary-300: #86efac;
  --color-primary-400: #4ade80;
  --color-primary-500: #22c55e;
  --color-primary-600: #16a34a;
  --color-primary-700: #15803d;
  --color-primary-800: #166534;
  --color-primary-900: #14532d;

  /* NANGO Dark Green (brand primary) */
  --color-nango-dark: #006634;
  --color-nango-light: #98bfac;

  /* Secondary colors - complementary greens */
  --color-secondary-50: #f7f9f7;
  --color-secondary-100: #eff2f0;
  --color-secondary-200: #dfe6e1;
  --color-secondary-300: #c7d3cb;
  --color-secondary-400: #a8b8ae;
  --color-secondary-500: #8ba093;
  --color-secondary-600: #6f8577;
  --color-secondary-700: #586a5f;
  --color-secondary-800: #47564f;
  --color-secondary-900: #3a4a43;

  /* Accent colors - warm complementary */
  --color-accent-500: #8b5cf6;
  --color-accent-600: #7c3aed;

  /* Typography */
  --font-family-sans: "Inter", system-ui, sans-serif;
  --font-family-display: "Inter", system-ui, sans-serif;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 2rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Custom utility classes */
.btn-primary {
  background-color: #006634;
  @apply text-white px-4 py-2 rounded-md font-medium hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors;
  --tw-ring-color: rgba(0, 102, 52, 0.5);
}

.btn-secondary {
  background-color: #98bfac;
  @apply text-white px-4 py-2 rounded-md font-medium hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors;
  --tw-ring-color: rgba(152, 191, 172, 0.5);
}

.btn-nango {
  background-color: #006634;
  @apply text-white px-4 py-2 rounded-md font-medium hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors;
  --tw-ring-color: rgba(0, 102, 52, 0.5);
}

.card {
  @apply bg-white rounded-lg shadow-md border border-secondary-200 p-6;
}

.input-field {
  @apply w-full px-3 py-2 border border-secondary-300 rounded-md focus:outline-none focus:ring-2 focus:border-primary-500;
  --tw-ring-color: rgba(0, 102, 52, 0.5);
}

/* Dashboard specific styles */
.dashboard-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6;
}

.metric-card {
  /* Tailwind v4 @apply only supports utilities, not custom classes */
  @apply bg-white rounded-lg shadow-md border border-secondary-200 p-6 text-center;
}

.metric-value {
  @apply text-3xl font-bold text-primary-600 mb-2;
}

.metric-label {
  @apply text-secondary-600 text-sm uppercase tracking-wide;
}

/* Responsive navigation */
.nav-link {
  @apply px-3 py-2 rounded-md text-sm font-medium transition-colors;
}

.nav-link-active {
  @apply bg-primary-100 text-primary-700;
}

.nav-link.active {
  @apply bg-nango-dark text-white;
}

.nav-link:hover {
  @apply bg-secondary-100 text-secondary-900;
}

/* Loading states */
.loading {
  @apply animate-pulse bg-secondary-200 rounded;
}

.loading-spinner {
  @apply inline-block w-4 h-4 border-2 border-primary-600 border-t-transparent rounded-full animate-spin;
}

/* Chart containers */
.chart-container {
  @apply w-full h-64;
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }

  .print-break {
    page-break-before: always;
  }
}