@use "../../../../styles/abstracts/variables" as *;

.marketDashboard {
  background: linear-gradient(135deg, #0b0b0b, #111111);
  color: #fff;
  padding: 6rem 1.5rem;
  font-family: $font-onest, sans-serif;

  .container { max-width: 1200px; margin: 0 auto; }

  .header {
    text-align: center;
    margin-bottom: 4rem;

    .badge {
      display: inline-block;
      padding: 0.5rem 1.2rem;
      border-radius: 999px;
      background: rgba(247,147,26,0.18);
      color: #fbbf24;
      font-size: 0.85rem;
      font-weight: 600;
      margin-bottom: 1rem;
    }

    h2 {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 800;
      margin-bottom: 1rem;

      span { color: #f7931a; }
    }

    p { font-size: 1.05rem; color: #cbd5e1; line-height: 1.6; }
  }

  .ticker {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 3rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar { display: none; }

    .tickerItem {
      background: rgba(255,255,255,0.03);
      padding: 0.6rem 1rem;
      border-radius: 16px;
      display: flex;
      gap: 0.6rem;
      align-items: center;
      font-size: 0.85rem;

      span { font-weight: 600; }

      .up { color: #22c55e; }
      .down { color: #ef4444; }

      .skeletonTicker {
        width: 60px;
        height: 12px;
        background: rgba(255,255,255,0.1);
        border-radius: 6px;
        animation: shimmer 1.4s ease infinite;
      }
    }
  }

  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;

    .card {
      background: rgba(255,255,255,0.03);
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.08);
      padding: 1.8rem 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      backdrop-filter: blur(12px);
      transition: transform 0.3s ease, box-shadow 0.3s ease;

      &:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 36px rgba(247,147,26,0.25);
      }

      .cardHeader {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        img { width: 36px; height: 36px; border-radius: 50%; }
      }

      .priceSection {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .price { font-weight: 700; font-size: 1rem; }
        .up { color: #22c55e; }
        .down { color: #ef4444; }
      }

      .sparkline { margin-top: 0.5rem; }

      /* Skeleton card */
      .skeleton {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        .skeletonHeader {
          width: 50%;
          height: 24px;
          background: rgba(255,255,255,0.1);
          border-radius: 6px;
          animation: shimmer 1.4s ease infinite;
        }

        .skeletonPrice {
          width: 70%;
          height: 20px;
          background: rgba(255,255,255,0.1);
          border-radius: 6px;
          animation: shimmer 1.4s ease infinite;
        }

        .skeletonChart {
          width: 100%;
          height: 40px;
          background: rgba(255,255,255,0.1);
          border-radius: 6px;
          animation: shimmer 1.4s ease infinite;
        }
      }
    }
  }
}

/* Shimmer effect */
@keyframes shimmer {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

/* Responsive */
@media (max-width: 1024px) {
  .cards { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; }
  .ticker { flex-direction: column; gap: 0.5rem; }
}