@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.129 0.042 264.695);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.129 0.042 264.695);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.129 0.042 264.695);
  --primary: oklch(0.208 0.042 265.755);
  --primary-foreground: oklch(0.984 0.003 247.858);
  --secondary: oklch(0.968 0.007 247.896);
  --secondary-foreground: oklch(0.208 0.042 265.755);
  --muted: oklch(0.968 0.007 247.896);
  --muted-foreground: oklch(0.554 0.046 257.417);
  --accent: oklch(0.968 0.007 247.896);
  --accent-foreground: oklch(0.208 0.042 265.755);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.929 0.013 255.508);
  --input: oklch(0.929 0.013 255.508);
  --ring: oklch(0.704 0.04 256.788);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.984 0.003 247.858);
  --sidebar-foreground: oklch(0.129 0.042 264.695);
  --sidebar-primary: oklch(0.208 0.042 265.755);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.968 0.007 247.896);
  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
  --sidebar-border: oklch(0.929 0.013 255.508);
  --sidebar-ring: oklch(0.704 0.04 256.788);
}

.dark {
  --background: oklch(0.129 0.042 264.695);
  --foreground: oklch(0.984 0.003 247.858);
  --card: oklch(0.208 0.042 265.755);
  --card-foreground: oklch(0.984 0.003 247.858);
  --popover: oklch(0.208 0.042 265.755);
  --popover-foreground: oklch(0.984 0.003 247.858);
  --primary: oklch(0.929 0.013 255.508);
  --primary-foreground: oklch(0.208 0.042 265.755);
  --secondary: oklch(0.279 0.041 260.031);
  --secondary-foreground: oklch(0.984 0.003 247.858);
  --muted: oklch(0.279 0.041 260.031);
  --muted-foreground: oklch(0.704 0.04 256.788);
  --accent: oklch(0.279 0.041 260.031);
  --accent-foreground: oklch(0.984 0.003 247.858);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.551 0.027 264.364);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.208 0.042 265.755);
  --sidebar-foreground: oklch(0.984 0.003 247.858);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent: oklch(0.279 0.041 260.031);
  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.551 0.027 264.364);
}

/* === CUSTOM COLOR THEME === */
@theme {
  /* Extended Gray Scale */
  --color-gray-900: #050505;
  --color-gray-800: #141414;
  --color-gray-700: #212328;
  --color-gray-600: #30333A;
  --color-gray-500: #9095A1;
  --color-gray-400: #CCDADC;

  /* Vibrant Colors */
  --color-blue-600: #5862FF;
  --color-yellow-400: #FDD458;
  --color-yellow-500: #E8BA40;
  --color-teal-400: #0FEDBE;
  --color-red-500: #FF495B;
  --color-orange-500: #FF8243;
  --color-purple-500: #D13BFF;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-gray-900 text-foreground;
  }
}

@layer utilities {
  .container {
    @apply mx-auto max-w-screen-2xl px-4 md:px-6 lg:px-8;
  }
  .yellow-btn {
    @apply h-12 cursor-pointer bg-gradient-to-b from-yellow-400 to-yellow-500 hover:from-yellow-500 hover:to-yellow-400 text-gray-950 font-medium text-base rounded-lg shadow-lg disabled:opacity-50;
  }
  .home-wrapper {
    @apply text-gray-400 flex-col gap-4 md:gap-10 items-center sm:items-start;
  }
  .home-section {
    @apply w-full gap-8 grid-cols-1 md:grid-cols-2 xl:grid-cols-3;
  }
  .header {
    @apply z-50 w-full h-[70px] bg-gray-800;
  }
  .header-wrapper {
    @apply flex justify-between items-center px-6 py-4 text-gray-500;
  }
  .auth-layout {
    @apply flex flex-col justify-between lg:flex-row h-screen bg-gray-900 relative overflow-hidden;
  }
  .auth-logo {
    @apply pt-6 lg:pt-8 mb-8 lg:mb-12;
  }
  .auth-left-section {
    @apply w-full lg:w-[45%] lg:h-screen px-6 lg:px-16 flex flex-col overflow-y-auto;
  }
  .auth-right-section {
    @apply w-full max-lg:border-t max-lg:border-gray-600 lg:w-[55%] lg:h-screen bg-gray-800 px-6 py-4 md:p-6 lg:py-12 lg:px-18 flex flex-col justify-start;
  }
  .auth-blockquote {
    @apply text-sm md:text-xl lg:text-2xl font-medium text-gray-400 mb-1 md:mb-6 lg:mb-8;
  }
  .auth-testimonial-author {
    @apply text-xs md:text-lg font-bold text-gray-400 not-italic;
  }
  .auth-dashboard-preview {
    @apply border-6 border-gray-800 left-0 hidden w-[1024px] h-auto max-w-none lg:block rounded-xl shadow-2xl;
  }
  .form-title {
    @apply text-4xl font-bold text-gray-400 mb-10;
  }
  .form-label {
    @apply text-sm font-medium text-gray-400;
  }
  .form-input {
    @apply h-12 px-3 py-3 text-white text-base! placeholder:text-gray-500 border-gray-600 bg-gray-800 rounded-lg focus:!border-yellow-500 focus:ring-0;
  }
  .select-trigger {
    @apply w-full !h-12 px-3 py-3 text-base border-gray-600 bg-gray-800 text-white rounded-lg focus:!border-yellow-500 focus:ring-0;
  }
  .country-select-trigger {
    @apply h-12 px-3 py-3 text-base w-full justify-between font-normal border-gray-600 bg-gray-800 text-gray-400 rounded-lg focus:!border-yellow-500 focus:ring-0;
  }
  .country-select-input {
    @apply !bg-gray-800 text-gray-400 border-0 border-b border-gray-600 rounded-none focus:ring-0 placeholder:text-gray-500;
  }
  .country-select-empty {
    @apply text-gray-500 py-6 text-center !bg-gray-800;
  }
  .country-select-item {
    @apply text-white cursor-pointer px-3 py-2 rounded-sm bg-gray-800 hover:!bg-gray-600;
  }
  .footer-link {
    @apply text-gray-400 font-medium hover:text-yellow-400 hover:underline transition-colors;
  }
}

/* Market News Component Styles */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* TradingView Advanced Chart Widget Styles */
.tradingview-widget-container {
  position: relative;
  background-color: #141414 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.tv-embed-widget-wrapper__body {
  background-color: #141414 !important;
}

.tradingview-widget-container__widget {
  background-color: #141414 !important;
  height: 100% !important;

}

.widget-stock-heatmap-container .screenerMapWrapper-BBVfGP0b {
  overflow: hidden !important;
  background: #141414 !important;
  background-color: #141414 !important;
}

.canvasContainer-tyaAU8aH {
  background: #141414 !important;
  background-color: #141414 !important;
}

.tv-site-widget--bg_none {
  background-color: transparent !important;
}

.tradingview-widget-copyright {
  font-size: 11px;
  color: #9ca3af;
  text-align: center;
  padding: 4px 0;
  background-color: transparent;
}

.tradingview-widget-copyright a {
  color: #60a5fa;
  text-decoration: none;
  transition: color 0.2s ease;
}

.tradingview-widget-copyright a:hover {
  color: #93c5fd;
  text-decoration: underline;
}

.tv-embed-widget-wrapper .tv-embed-widget-wrapper__body {
  background: #141414 !important;
  background-color: #141414 !important;
}

.tradingview-widget-container iframe {
  background-color: #141414 !important;
  width: 100% !important;
}

.custom-chart.tradingview-widget-container iframe {
  border: 1px solid #30333A;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Custom scrollbar that shows on hover */
.scrollbar-hide-default {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.scrollbar-hide-default::-webkit-scrollbar {
  width: 8px;
}

.scrollbar-hide-default::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-hide-default::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.scrollbar-hide-default:hover {
  scrollbar-color: #30333A transparent;
}

.scrollbar-hide-default:hover::-webkit-scrollbar-thumb {
  background-color: #30333A;
}

.scrollbar-hide-default::-webkit-scrollbar-thumb:hover {
  background-color: #9095A1;
}
