/* app/globals.css - Tailwind CSS 4 Syntax */

/* Import Tailwind CSS 4 */
@import "tailwindcss";

/* ========== CUSTOM THEME CONFIGURATION ========== */
@theme {
  /* Brand Colors - CTA/Action */
  --color-cta: #D97706;
  --color-cta-hover: #F59E0B;
  --color-cta-light: #FEF3C7;
  --color-cta-dark: #B45309;
  
  /* Status Colors */
  --color-success: #059669;
  --color-success-light: #D1FAE5;
  --color-success-dark: #047857;
  --color-danger: #EF4444;
  --color-danger-light: #FEE2E2;
  --color-info: #3B82F6;
  --color-warning: #F59E0B;
  
  /* Sidebar Colors */
  --color-sidebar: #1E293B;
  --color-sidebar-hover: #334155;
  
  /* Background Colors */
  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F1F5F9;
  
  /* Border Colors */
  --color-border: #E2E8F0;
  --color-border-muted: #CBD5E1;
  
  /* Text Colors */
  --color-text: #0F172A;
  --color-text-secondary: #475569;
  --color-text-tertiary: #64748B;
  --color-text-muted: #94A3B8;
  
  /* Chart & UI */
  --color-chart-grid: #E2E8F0;
  
  /* Shadows */
  --shadow-card-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-card-md: 0 4px 6px -1px rgb(0 0 0 / 0.05);
  --shadow-card-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08);
  --shadow-card-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08);
  
  /* Border Radius */
  --radius-card: 1.5rem;
  --radius-button: 2rem;

  --color-info: #3B82F6;
  --color-info-light: #EFF6FF;
  --color-warning-light: #FEF3C7;
  --color-success-light: #D1FAE5;
  
  /* Font Family */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
}

/* ========== DARK MODE VARIABLES ========== */
/* In Tailwind CSS 4, we use @variant or .dark class */
.dark {
  --color-sidebar: #0B1120;
  --color-sidebar-hover: #1E293B;
  --color-background: #0B1120;
  --color-surface: #111827;
  --color-surface-alt: #1F2937;
  --color-border: #1F2937;
  --color-border-muted: #374151;
  --color-text: #F9FAFB;
  --color-text-secondary: #E5E7EB;
  --color-text-tertiary: #D1D5DB;
  --color-text-muted: #9CA3AF;
  --color-cta-light: #422006;
  --color-success-light: #064E3B;
  --color-chart-grid: #1F2937;
  --color-info-light: #1E3A8A;
  --color-warning-light: #422006;
  --color-success-light: #064E3B;
  
  --shadow-card-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-card-md: 0 4px 6px -1px rgb(0 0 0 / 0.3);
  --shadow-card-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3);
  --shadow-card-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3);
}

@keyframes skeleton-pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-alt) 0%,
    var(--color-border) 50%,
    var(--color-surface-alt) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: 0.375rem;
}

/* Dark mode skeleton */
.dark .skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-alt) 0%,
    var(--color-border) 50%,
    var(--color-surface-alt) 100%
  );
}

/* Alternative simple skeleton (if gradient doesn't work) */
.skeleton-simple {
  background-color: var(--color-border);
  border-radius: 0.375rem;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* ========== GLOBAL CUSTOM SCROLLBAR (Light & Dark Mode) ========== */

/* Firefox ke liye - Global */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-cta) var(--color-surface-alt);
}

/* Chrome, Edge, Safari ke liye - Global */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--color-surface-alt);
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb {
  background: var(--color-cta);
  border-radius: 10px;
  transition: background 0.2s ease;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--color-cta-hover);
}

/* Dark mode mein bhi automatically adjust ho jayega */
.dark *::-webkit-scrollbar-track {
  background: var(--color-surface-alt);
}

.dark *::-webkit-scrollbar-thumb {
  background: var(--color-cta);
}

.dark *::-webkit-scrollbar-thumb:hover {
  background: var(--color-cta-hover);
}