src/index.css

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

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

@layer base {
  :root {
    /* Government Professional Theme - Deep Teal & Blue */
    --background: 210 25% 98%;
    --foreground: 215 28% 17%;

    --card: 0 0% 100%;
    --card-foreground: 215 28% 17%;

    --popover: 0 0% 100%;
    --popover-foreground: 215 28% 17%;

    /* Deep Teal Primary */
    --primary: 187 70% 32%;
    --primary-foreground: 0 0% 100%;

    /* Light Slate Secondary */
    --secondary: 210 20% 96%;
    --secondary-foreground: 215 28% 17%;

    --muted: 210 20% 94%;
    --muted-foreground: 215 16% 47%;

    /* Warm Accent */
    --accent: 38 92% 50%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 214 20% 90%;
    --input: 214 20% 90%;
    --ring: 187 70% 32%;

    --radius: 0.625rem;

    /* Sidebar - Darker Professional */
    --sidebar-background: 215 28% 17%;
    --sidebar-foreground: 210 20% 92%;
    --sidebar-primary: 187 70% 50%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 215 25% 22%;
    --sidebar-accent-foreground: 210 20% 92%;
    --sidebar-border: 215 25% 25%;
    --sidebar-ring: 187 70% 50%;

    /* Custom Colors */
    --success: 160 60% 40%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;
    --info: 200 80% 50%;
    --info-foreground: 0 0% 100%;

    /* Status Colors */
    --status-pending: 38 92% 50%;
    --status-approved: 160 60% 40%;
    --status-rejected: 0 84% 60%;
    --status-in-progress: 200 80% 50%;
    --status-completed: 160 60% 40%;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(187 70% 32%), hsl(200 70% 35%));
    --gradient-accent: linear-gradient(135deg, hsl(38 92% 50%), hsl(25 95% 55%));
    --gradient-success: linear-gradient(135deg, hsl(160 60% 40%), hsl(170 60% 45%));
    --gradient-sidebar: linear-gradient(180deg, hsl(215 28% 17%), hsl(215 28% 12%));
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 hsl(215 28% 17% / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(215 28% 17% / 0.1), 0 2px 4px -2px hsl(215 28% 17% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(215 28% 17% / 0.1), 0 4px 6px -4px hsl(215 28% 17% / 0.1);
    --shadow-glow: 0 0 20px hsl(187 70% 32% / 0.3);
  }

  .dark {
    --background: 215 28% 10%;
    --foreground: 210 20% 92%;

    --card: 215 28% 14%;
    --card-foreground: 210 20% 92%;

    --popover: 215 28% 14%;
    --popover-foreground: 210 20% 92%;

    --primary: 187 70% 50%;
    --primary-foreground: 215 28% 10%;

    --secondary: 215 25% 20%;
    --secondary-foreground: 210 20% 92%;

    --muted: 215 25% 18%;
    --muted-foreground: 215 16% 60%;

    --accent: 38 92% 55%;
    --accent-foreground: 215 28% 10%;

    --destructive: 0 70% 50%;
    --destructive-foreground: 0 0% 100%;

    --border: 215 25% 22%;
    --input: 215 25% 22%;
    --ring: 187 70% 50%;

    --sidebar-background: 215 28% 8%;
    --sidebar-foreground: 210 20% 85%;
    --sidebar-primary: 187 70% 55%;
    --sidebar-primary-foreground: 215 28% 8%;
    --sidebar-accent: 215 28% 14%;
    --sidebar-accent-foreground: 210 20% 85%;
    --sidebar-border: 215 25% 15%;
    --sidebar-ring: 187 70% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-family: 'Inter', system-ui, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  }
}

@layer components {
  .glass-card {
    @apply bg-card/80 backdrop-blur-md border border-border/50 shadow-lg;
  }

  .stat-card {
    @apply relative overflow-hidden rounded-xl bg-card p-6 shadow-md transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5;
  }

  .stat-card::before {
    content: '';
    @apply absolute top-0 left-0 w-1 h-full bg-gradient-to-b from-primary to-primary/60;
  }

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

  .status-pending {
    @apply bg-amber-100 text-amber-800;
  }

  .status-approved {
    @apply bg-emerald-100 text-emerald-800;
  }

  .status-rejected {
    @apply bg-red-100 text-red-800;
  }

  .status-in-progress {
    @apply bg-blue-100 text-blue-800;
  }

  .workflow-step {
    @apply flex items-center gap-3 p-4 rounded-lg transition-all duration-200;
  }

  .workflow-step-active {
    @apply bg-primary/10 border-l-4 border-primary;
  }

  .workflow-step-completed {
    @apply bg-emerald-50 border-l-4 border-emerald-500;
  }

  .sidebar-nav-item {
    @apply flex items-center gap-3 px-3 py-2.5 rounded-lg text-sidebar-foreground/80 transition-all duration-200 hover:bg-sidebar-accent hover:text-sidebar-foreground;
  }

  .sidebar-nav-item-active {
    @apply bg-sidebar-primary/20 text-sidebar-primary font-medium;
  }

  .table-row-hover {
    @apply hover:bg-muted/50 transition-colors duration-150;
  }

  .input-focus {
    @apply focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-200;
  }

  .btn-primary-gradient {
    background: var(--gradient-primary);
    @apply text-primary-foreground shadow-md hover:shadow-lg transition-all duration-200;
  }

  .card-hover {
    @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5;
  }

  .animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
  }

  .animate-slide-up {
    animation: slideUp 0.4s ease-out forwards;
  }

  .animate-scale-in {
    animation: scaleIn 0.3s ease-out 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.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 5px hsl(187 70% 32% / 0.3);
  }
  50% {
    box-shadow: 0 0 20px hsl(187 70% 32% / 0.5);
  }
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-muted/30 rounded-full;
}

::-webkit-scrollbar-thumb {
  @apply bg-muted-foreground/20 rounded-full hover:bg-muted-foreground/30;
}