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

:root {
  --background: #ffffff;
  --foreground: #171717;
  --accent: #da0018;
  --dark: #1a1a1a;
}

/* Force light theme by overriding NextUI variables */
:root, [data-theme="light"], .light {
  --nextui-background: 0 0% 100%;
  --nextui-foreground: 222.2 84% 4.9%;
  --nextui-primary: 349 100% 98%;
  --nextui-primary-foreground: 210 20% 98%;
  --nextui-secondary: 210 40% 96%;
  --nextui-secondary-foreground: 222.2 84% 4.9%;
  --nextui-muted: 210 40% 96%;
  --nextui-muted-foreground: 215.4 16.3% 46.9%;
  color-scheme: light;
}

/* Tab styling fixes */
[data-selected="true"] .MuiTab-wrapper,
[data-selected="true"] .MuiTab-wrapper span,
[data-selected="true"] .MuiTab-wrapper div {
  color: white !important;
}

[data-hover="true"] .MuiTab-wrapper,
[data-hover="true"] .MuiTab-wrapper span,
[data-hover="true"] .MuiTab-wrapper div {
  color: white !important;
}

/* Tab cursor fix */
[data-cursor="true"] .MuiTab-wrapper,
[data-cursor="true"] .MuiTab-wrapper span,
[data-cursor="true"] .MuiTab-wrapper div {
  color: white !important;
}

/* Force white text for all selected tabs */
[data-selected="true"] * {
  --nextui-primary-foreground: 0 0% 0% !important;
  color: white !important;
}

html, body {
  background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%) !important;
  background-color: #fafafa !important;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }
  body {
    background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%) !important;
    color: var(--foreground);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  }
}

@media print {
  html, body {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }

  .datasheet-print-hide {
    display: none !important;
  }

  .datasheet {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

@layer components {
  .card-hover {
    @apply transition-all duration-300 hover:shadow-xl hover:scale-[1.02] cursor-pointer;
  }
  
  .product-card {
    @apply bg-white rounded-xl border border-gray-200 overflow-hidden card-hover shadow-md;
  }
  
  .filter-section {
    @apply bg-white shadow-lg backdrop-blur-sm;
  }
  
  .section-title {
    @apply text-2xl font-bold text-gray-900 mb-6;
  }
  
  .product-name {
    @apply font-bold text-gray-900 line-clamp-2 text-base;
  }

  .custom-power-slider [data-slot="track"] {
    height: 0.5rem;
    border-radius: 9999px;
    background: linear-gradient(
      to right,
      #f3f4f6 var(--range-start),
      #666 var(--range-start),
      #666 var(--range-end),
      #f3f4f6 var(--range-end)
    );
  }

  .custom-power-slider [data-slot="thumb"] {
    background-color: #da0018 !important;
    border: 2px solid #da0018 !important;
  }

  /* Global divider styling */
  [data-slot="divider"] {
    background-color: #eee !important;
  }

  /* Global configure button styling - using Tailwind classes instead */
  .configure-button {
    background-color: #fff !important;
    color: black !important;
    border: 2px solid #333 !important;
  }

  .configure-button:hover {
    background-color: #333 !important;
    color: white !important;
  }
}