/* Gram Setu Premium Theme Extension */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

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

:root {
  --primary: 16, 185, 129;
  --primary-glow: rgba(16, 185, 129, 0.15);
  --accent: 99, 102, 241;
  --bg-deep: 2, 6, 23;
  --glass-bg: rgba(15, 23, 42, 0.6);
  --glass-border: rgba(255, 255, 255, 0.08);
}

@layer base {
  body {
    @apply bg-slate-950 text-slate-100 font-outfit antialiased selection:bg-emerald-500/30 selection:text-emerald-200 overflow-x-hidden;
    background-image: 
      radial-gradient(circle at 0% 0%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 100% 100%, rgba(99, 102, 241, 0.05) 0%, transparent 50%);
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-jakarta tracking-tight;
  }
}

@layer utilities {
  .font-outfit { font-family: 'Outfit', sans-serif; }
  .font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif; }

  /* Premium Glassmorphism */
  .glass {
    @apply backdrop-blur-xl border border-white/10 shadow-2xl;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  }
  
  .glass-card {
    @apply backdrop-blur-lg border border-white/5 shadow-xl rounded-2xl transition-all duration-500;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.2));
  }
  
  .glass-card:hover {
    @apply border-emerald-500/30 shadow-emerald-500/10;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.4));
    transform: translateY(-2px);
  }
  
  .glass-panel {
    @apply backdrop-blur-md border-y border-white/5 shadow-lg;
    background: rgba(15, 23, 42, 0.8);
  }

  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 via-teal-400 to-cyan-400;
  }
  
  .bg-gradient-premium {
    @apply bg-gradient-to-br from-emerald-600 via-teal-600 to-cyan-700 hover:from-emerald-500 hover:via-teal-500 hover:to-cyan-600 transition-all duration-500 shadow-lg shadow-emerald-900/20;
  }

  /* Shimmer animation */
  .shimmer {
    background: linear-gradient(90deg, #1e293b 0%, #334155 50%, #1e293b 100%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
  }

  @keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* Premium Animations */
  .animate-fade-in { animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  .animate-slide-up { animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  .animate-scale-in { animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

  .hover-glow:hover {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
  }

  /* Custom Scrollbar for inner containers */
  .custom-scrollbar::-webkit-scrollbar { width: 4px; }
  .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.1);
    border-radius: 20px;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(16, 185, 129, 0.4); }

  /* 3D Tilt Wrapper */
  .tilt-card {
    perspective: 1000px;
    transform-style: preserve-3d;
  }
  
  .tilt-content {
    transition: transform 0.1s ease-out;
  }

  /* Mouse Glow */
  .mouse-glow {
    position: fixed;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    transform: translate(-50%, -50%);
    transition: opacity 1s ease;
  }

  /* Pulse Glow Animation */
  .pulse-glow {
    animation: pulseGlow 2s infinite alternate;
  }

  @keyframes pulseGlow {
    0% { box-shadow: 0 0 5px rgba(16, 185, 129, 0.2); }
    100% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.5); }
  }

  /* Micro-interactions */
  .hover-scale {
    @apply transition-transform duration-300 hover:scale-[1.02] active:scale-[0.98];
  }

  /* No-Scrollbar Utility */
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
}

/* =====================================================
   LAYOUT SYSTEM — Outside @layer for highest priority
   ===================================================== */

/* Mobile: body scrolls normally */
.desktop-fixed-layout {
  overflow-x: hidden;
}

.layout-wrapper {
  display: flex;
  width: 100%;
  position: relative;
  padding-top: calc(73px + env(safe-area-inset-top));
}

.main-content-area {
  width: 100%;
}

/* Desktop: Professional fixed-sidebar + scrollable-content */
@media (min-width: 768px) {
  .desktop-fixed-layout {
    overflow: hidden !important;
    height: 100vh !important;
    width: 100vw !important;
  }

  .layout-wrapper {
    height: calc(100vh - 73px) !important;
    margin-top: 73px;
    overflow: hidden !important;
    padding-top: 0 !important;
  }

  .main-content-scrollable {
    height: 100% !important;
    max-height: calc(100vh - 73px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    min-height: 0 !important;
  }

  .sidebar-fixed-left {
    position: fixed;
    top: 73px;
    left: 0;
    bottom: 0;
    width: 288px;
    z-index: 40;
    background: #020617;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
  }

  .main-content-area {
    margin-left: 288px;
    width: calc(100% - 288px);
    height: 100% !important;
    min-height: 0 !important;
  }

  /* Edge Scrollbar for Main Content */
  .main-content-scrollable::-webkit-scrollbar { width: 6px; }
  .main-content-scrollable::-webkit-scrollbar-track { background: transparent; }
  .main-content-scrollable::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.1);
    border-radius: 20px;
  }
  .main-content-scrollable::-webkit-scrollbar-thumb:hover { background: rgba(16, 185, 129, 0.3); }
}