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

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

@layer base {
  /* Dynamic Color Themes (RGB Channels) */
  :root, .theme-rtv {
    --color-primary: 230 0 122;
    --color-primary-hover: 255 20 147;
    --color-primary-dark: 179 0 92;
    --color-accent: 0 223 216;
    --color-accent-hover: 51 255 249;
    --color-accent-dark: 0 163 158;
  }

  .theme-netflix {
    --color-primary: 229 9 20;
    --color-primary-hover: 255 30 39;
    --color-primary-dark: 184 29 36;
    --color-accent: 255 255 255;
    --color-accent-hover: 230 230 230;
    --color-accent-dark: 128 128 128;
  }

  .theme-spotify {
    --color-primary: 29 185 84;
    --color-primary-hover: 30 215 96;
    --color-primary-dark: 18 140 62;
    --color-accent: 30 215 96;
    --color-accent-hover: 53 227 115;
    --color-accent-dark: 26 163 74;
  }

  .theme-hbo {
    --color-primary: 124 58 237;
    --color-primary-hover: 139 92 246;
    --color-primary-dark: 109 40 217;
    --color-accent: 0 223 216;
    --color-accent-hover: 51 255 249;
    --color-accent-dark: 0 163 158;
  }

  .theme-disney {
    --color-primary: 193 154 107;
    --color-primary-hover: 212 175 55;
    --color-primary-dark: 154 123 86;
    --color-accent: 0 223 216;
    --color-accent-hover: 51 255 249;
    --color-accent-dark: 0 163 158;
  }
}

@layer base {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-dark text-white font-sans;
    overflow-x: hidden;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-dark-100;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-dark-400 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-dark-500;
  }

  ::selection {
    @apply bg-primary/30 text-white;
  }
}

@layer components {
  .glass {
    @apply bg-dark-100/80 backdrop-blur-xl border border-white/10;
  }

  .glass-strong {
    @apply bg-dark-200/90 backdrop-blur-2xl border border-white/15;
  }

  .glass-card {
    @apply bg-dark-100/60 backdrop-blur-lg border border-white/[0.08] rounded-card;
  }

  .glass-card-hover {
    @apply glass-card transition-all duration-300 hover:border-white/20 hover:bg-dark-100/80 hover:shadow-lg hover:shadow-primary/5;
  }

  .btn-primary {
    @apply bg-primary hover:bg-primary-hover text-white font-semibold px-6 py-3 rounded-lg transition-all duration-300 hover:shadow-lg hover:shadow-primary/30 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-secondary {
    @apply bg-white/10 hover:bg-white/20 text-white font-medium px-6 py-3 rounded-lg transition-all duration-300 border border-white/10 hover:border-white/20 active:scale-95;
  }

  .btn-accent {
    @apply bg-accent hover:bg-accent-hover text-dark font-semibold px-6 py-3 rounded-lg transition-all duration-300 hover:shadow-lg hover:shadow-accent/30 active:scale-95;
  }

  .btn-ghost {
    @apply bg-transparent hover:bg-white/10 text-white/70 hover:text-white font-medium px-4 py-2 rounded-lg transition-all duration-300;
  }

  .btn-danger {
    @apply bg-red-600 hover:bg-red-500 text-white font-semibold px-6 py-3 rounded-lg transition-all duration-300 hover:shadow-lg hover:shadow-red-600/30 active:scale-95;
  }

  .input-dark {
    @apply w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-white/30 focus:outline-none focus:border-primary/50 focus:ring-1 focus:ring-primary/30 transition-all duration-300;
  }

  .input-search {
    @apply w-full bg-dark-100/80 border border-white/10 rounded-full px-6 py-3 text-white placeholder-white/40 focus:outline-none focus:border-accent/50 focus:ring-1 focus:ring-accent/30 backdrop-blur-lg transition-all duration-300;
  }

  .gradient-overlay {
    @apply bg-gradient-to-t from-dark via-dark/60 to-transparent;
  }

  .gradient-overlay-left {
    @apply bg-gradient-to-r from-dark via-dark/60 to-transparent;
  }

  .text-glow {
    text-shadow: 0 0 20px rgba(229, 9, 20, 0.5);
  }

  .text-glow-accent {
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
  }

  .card-shine {
    position: relative;
    overflow: hidden;
  }

  .card-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: left 0.5s ease;
    z-index: 1;
  }

  .card-shine:hover::before {
    left: 100%;
  }

  .content-row-scroll {
    @apply flex gap-3 overflow-x-auto pb-4 snap-x snap-mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .content-row-scroll::-webkit-scrollbar {
    display: none;
  }

  .content-card {
    @apply relative overflow-hidden rounded-card cursor-pointer transition-all duration-300 flex-shrink-0 snap-start;
  }

  .content-card:hover {
    @apply scale-105 z-10;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
  }

  .loading-skeleton {
    @apply bg-dark-200 rounded-card animate-pulse;
  }

  .shimmer-bg {
    background: linear-gradient(90deg, #141414 25%, #1a1a2e 50%, #141414 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }

  .sidebar-link {
    @apply flex items-center gap-3 px-4 py-3 rounded-lg text-white/60 hover:text-white hover:bg-white/5 transition-all duration-300 cursor-pointer;
  }

  .sidebar-link.active {
    @apply text-white bg-primary/10 border-l-2 border-primary;
  }

  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }

  .badge-primary {
    @apply badge bg-primary/20 text-primary;
  }

  .badge-accent {
    @apply badge bg-accent/20 text-accent;
  }

  .badge-success {
    @apply badge bg-green-500/20 text-green-400;
  }

  .badge-warning {
    @apply badge bg-yellow-500/20 text-yellow-400;
  }

  .badge-danger {
    @apply badge bg-red-500/20 text-red-400;
  }

  .admin-table {
    @apply w-full text-sm;
  }

  .admin-table thead {
    @apply bg-dark-200/50;
  }

  .admin-table th {
    @apply px-4 py-3 text-left text-white/60 font-medium uppercase tracking-wider text-xs;
  }

  .admin-table td {
    @apply px-4 py-3 border-t border-white/5;
  }

  .admin-table tbody tr {
    @apply hover:bg-white/5 transition-colors;
  }

  .player-controls {
    @apply absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 to-transparent p-4 transition-opacity duration-300;
  }

  .progress-bar {
    @apply w-full h-1 bg-white/20 rounded-full cursor-pointer;
  }

  .progress-bar:hover {
    @apply h-1.5;
  }

  .progress-fill {
    @apply h-full bg-primary rounded-full transition-all relative;
  }

  .progress-fill::after {
    content: '';
    @apply absolute right-0 top-1/2 -translate-y-1/2 w-3 h-3 bg-primary rounded-full opacity-0 group-hover:opacity-100 transition-opacity;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

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

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

  .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;
  }
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

@keyframes scrollDown {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}
