global.css filled with content from jsmastery.com for tests

app/globals.css

@@ -1,7 +1,7 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
-@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+@custom-variant dark (&:is(.dark *));
 
 @theme inline {
   --color-background: var(--background);
@@ -41,13 +41,6 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
-    --radius-2xl: calc(var(--radius) + 8px);
-    --radius-3xl: calc(var(--radius) + 12px);
-    --radius-4xl: calc(var(--radius) + 16px);
-}
-
-body {
-    transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 :root {
@@ -119,11 +112,378 @@ body {
   --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-background text-foreground;
+    @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;
+  }
+  .search-text {
+    @apply cursor-pointer hover:text-yellow-500;
+  }
+  .search-btn {
+    @apply cursor-pointer px-4 py-2 w-fit flex items-center gap-2 text-sm md:text-base bg-yellow-500 hover:bg-yellow-500 text-black font-medium rounded;
+  }
+  .search-dialog {
+    @apply !bg-gray-800 lg:min-w-[800px] border-gray-600 fixed top-10 left-1/2 -translate-x-1/2 translate-y-10;
+  }
+  .search-field {
+    @apply !bg-gray-800 border-b border-gray-600 relative;
+  }
+  .search-list {
+    @apply !bg-gray-800 max-h-[400px];
+  }
+  .search-list-indicator {
+    @apply px-5 py-2
+  }
+  .search-list-empty {
+    @apply py-6 !bg-transparent text-center text-gray-500;
+  }
+  .search-input {
+    @apply !bg-gray-800 border-0 text-gray-400 placeholder:text-gray-500 focus:ring-0 text-base h-14 pr-10;
+  }
+  .search-loader {
+    @apply absolute right-12 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500 animate-spin;
+  }
+  .search-count {
+    @apply py-2 px-4 text-sm font-medium text-gray-400 bg-gray-700 border-b border-gray-700;
+  }
+  .search-item {
+    @apply rounded-none my-3 px-1 w-full data-[selected=true]:bg-gray-600;
+  }
+  .search-item-link {
+    @apply px-2 w-full cursor-pointer border-b border-gray-600 last:border-b-0 transition-colors flex items-center gap-3;
+  }
+  .search-item-name {
+    @apply font-medium text-base text-gray-400;
+  }
+  .nav-list {
+    @apply flex flex-col sm:flex-row p-2 gap-3 sm:gap-10 font-medium;
+  }
+  .stock-details-container {
+    @apply w-full grid-cols-1 gap-6 xl:grid-cols-3 space-y-6 sm:space-y-8;
+  }
+  .watchlist-btn {
+    @apply bg-yellow-500 text-base hover:bg-yellow-500 text-gray-900 w-full rounded h-11 font-semibold cursor-pointer;
+  }
+  .watchlist-remove {
+    @apply bg-red-500! hover:bg-red-500! text-gray-900!
+  }
+  .watchlist-empty-container {
+    @apply container gap-8 flex-col items-center md:mt-10 p-6 text-center;
+  }
+  .watchlist-empty {
+    @apply flex flex-col items-center justify-center text-center;
+  }
+  .watchlist-star {
+    @apply h-16 w-16 text-gray-500 mb-4;
+  }
+  .empty-title {
+    @apply text-xl font-semibold text-gray-400 mb-2;
+  }
+  .empty-description {
+    @apply text-gray-500 mb-6 max-w-md;
+  }
+  .watchlist-container {
+    @apply flex flex-col-reverse lg:grid lg:grid-cols-3 gap-8;
+  }
+  .watchlist {
+    @apply lg:col-span-2 space-y-8;
+  }
+  .watchlist-alerts {
+    @apply items-start gap-6 h-full flex-col w-full lg:col-span-1;
+  }
+  .watchlist-icon-btn {
+    @apply w-fit cursor-pointer hover:bg-transparent! text-gray-400 hover:text-yellow-500;
+  }
+  .watchlist-icon-added {
+    @apply !text-yellow-500 hover:!text-yellow-600;
+  }
+  .watchlist-icon {
+    @apply w-8 h-8 rounded-full flex items-center justify-center bg-gray-700/50;
+  }
+  .trash-icon {
+    @apply h-4 w-4 text-gray-400 hover:text-red-400;
+  }
+  .star-icon {
+    @apply h-4 w-4;
+  }
+  .watchlist-title {
+    @apply text-xl md:text-2xl font-bold text-gray-100;
+  }
+  .watchlist-table {
+    @apply !relative overflow-hidden !w-full bg-gray-800 border !border-gray-600 !rounded-lg;
+  }
+  .table-header-row {
+    @apply text-gray-400 font-medium bg-gray-700 border-b border-gray-600 hover:bg-gray-700;
+  }
+  .table-header:first-child {
+    @apply pl-4;
+  }
+  .table-row {
+    @apply border-b cursor-pointer text-gray-100 border-gray-600 hover:bg-gray-700/50 transition-colors;
+  }
+  .table-cell {
+    @apply font-medium text-base
+  }
+  .add-alert {
+    @apply flex text-sm items-center whitespace-nowrap gap-1.5 px-3 w-fit py-2 text-yellow-600 border border-yellow-600/20 rounded font-medium bg-transparent hover:bg-transparent cursor-pointer transition-colors;
+  }
+  .watchlist-news {
+    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
+  }
+  .news-item {
+    @apply bg-gray-800 rounded-lg border w-full border-gray-600  p-4 duration-200 hover:border-gray-600 cursor-pointer;
+  }
+  .news-tag {
+    @apply inline-block w-fit px-2 py-1 mb-5 rounded bg-gray-600/60 text-green-500 text-sm font-mono font-medium;
+  }
+  .news-title {
+    @apply text-lg  font-semibold text-gray-100 leading-tight mb-3 line-clamp-2;
+  }
+  .news-meta {
+    @apply flex items-center text-sm text-gray-500 mb-1;
+  }
+  .news-summary {
+    @apply text-gray-400 flex-1 text-base leading-relaxed mb-3 line-clamp-3;
+  }
+  .news-cta {
+    @apply text-sm align-bottom text-yellow-500 hover:text-gray-400;
+  }
+  .alert-dialog {
+    @apply bg-gray-800 border-gray-600 text-gray-400 max-w-md;
+  }
+  .alert-title {
+    @apply text-xl font-semibold text-gray-100;
+  }
+  .alert-list {
+    @apply overflow-y-auto w-full max-h-[911px] rounded-lg flex border border-gray-600 flex-col gap-4 bg-gray-800 p-3 flex-1;
+  }
+  .alert-empty {
+    @apply px-6 py-8 text-center text-gray-500/50;
+  }
+  .alert-item {
+    @apply p-4 rounded-lg bg-gray-700 border border-gray-600;
+  }
+  .alert-name {
+    @apply mb-2 text-lg text-yellow-500 font-semibold;
+  }
+  .alert-details {
+    @apply flex border-b pb-3 items-center justify-between gap-3 mb-2;
+  }
+  .alert-company {
+    @apply text-gray-400 text-base;
+  }
+  .alert-price {
+    @apply text-gray-100 font-bold;
+  }
+  .alert-actions {
+    @apply flex items-end justify-between;
+  }
+  .alert-update-btn {
+    @apply text-gray-400 rounded-full bg-transparent hover:bg-green-500/15 cursor-pointer;
+  }
+  .alert-delete-btn {
+    @apply text-gray-400 rounded-full hover:bg-red-600/15 bg-transparent cursor-pointer transition-colors;
+  }
+}
+
+/* Market News Component Styles */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* 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;
+}