index.css

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

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

@layer base {
  :root {
    /* ── Core palette — Warm Navy + Amber ── */
    --background:       220 20% 98%;
    --foreground:       222 20% 12%;
    --card:             0 0% 100%;
    --card-foreground:  222 20% 12%;
    --popover:          0 0% 100%;
    --popover-foreground: 222 20% 12%;

    /* Brand: warm navy-indigo */
    --primary:          230 65% 52%;
    --primary-foreground: 0 0% 100%;

    --secondary:        225 15% 95%;
    --secondary-foreground: 222 20% 18%;

    --muted:            225 15% 95%;
    --muted-foreground: 222 10% 50%;

    --accent:           32 95% 52%;
    --accent-foreground: 0 0% 100%;

    --destructive:      4 76% 56%;
    --destructive-foreground: 0 0% 100%;

    --success:          160 60% 40%;
    --success-foreground: 0 0% 100%;

    --warning:          38 92% 50%;
    --warning-foreground: 0 0% 100%;

    --info:             205 85% 50%;
    --info-foreground:  0 0% 100%;

    --border:           225 14% 91%;
    --input:            225 14% 91%;
    --ring:             230 65% 52%;
    --radius:           0.625rem;

    /* Sidebar — rich dark navy */
    --sidebar-background: 228 28% 12%;
    --sidebar-foreground: 225 15% 88%;
    --sidebar-primary:    230 65% 62%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent:     228 22% 18%;
    --sidebar-accent-foreground: 225 15% 95%;
    --sidebar-border:     228 20% 18%;
    --sidebar-ring:       230 65% 62%;
    --sidebar-muted:      225 12% 65%;
  }

  .dark {
    --background:       228 22% 7%;
    --foreground:       225 15% 92%;
    --card:             228 20% 10%;
    --card-foreground:  225 15% 92%;
    --popover:          228 20% 10%;
    --popover-foreground: 225 15% 92%;

    --primary:          230 65% 62%;
    --primary-foreground: 228 28% 8%;

    --secondary:        228 18% 16%;
    --secondary-foreground: 225 15% 85%;

    --muted:            228 18% 16%;
    --muted-foreground: 225 10% 55%;

    --accent:           32 90% 55%;
    --accent-foreground: 228 28% 8%;

    --destructive:      4 68% 50%;
    --destructive-foreground: 0 0% 100%;

    --success:          160 50% 42%;
    --success-foreground: 0 0% 100%;

    --warning:          38 85% 52%;
    --warning-foreground: 228 28% 8%;

    --border:           228 18% 18%;
    --input:            228 18% 18%;
    --ring:             230 65% 62%;

    --sidebar-background: 228 28% 6%;
    --sidebar-foreground: 225 15% 88%;
    --sidebar-accent:     228 22% 13%;
    --sidebar-accent-foreground: 225 15% 95%;
    --sidebar-border:     228 22% 14%;
    --sidebar-muted:      225 12% 65%;
  }

  * { @apply border-border; box-sizing: border-box; }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  }

  /* Premium scrollbar */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { @apply bg-border rounded-full; }
  ::-webkit-scrollbar-thumb:hover { @apply bg-muted-foreground/30; }

  /* Mono font */
  .font-mono { font-family: 'JetBrains Mono', monospace; }
}

@layer components {
  /* ── Glass card ── */
  .glass {
    @apply bg-white/80 dark:bg-card/80 backdrop-blur-xl border border-white/60 dark:border-white/5;
  }

  /* ── Stat card with accent line ── */
  .stat-card {
    @apply relative overflow-hidden rounded-xl border bg-card p-5 transition-all duration-200 hover:shadow-md;
  }
  .stat-card::before {
    content: '';
    @apply absolute inset-x-0 top-0 h-0.5 bg-gradient-to-r from-primary/60 via-primary to-primary/60 opacity-0 transition-opacity duration-200;
  }
  .stat-card:hover::before { @apply opacity-100; }

  /* ── Sidebar item ── */
  .sidebar-item {
    @apply flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-sidebar-foreground/70
           transition-all duration-150 cursor-pointer select-none;
  }
  .sidebar-item:hover {
    @apply bg-sidebar-accent text-sidebar-foreground;
  }
  .sidebar-item.active {
    @apply bg-sidebar-accent text-sidebar-primary;
  }

  /* ── Module badge ── */
  .module-badge {
    @apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium;
  }

  /* ── Data table row ── */
  .data-row {
    @apply border-b border-border/50 transition-colors duration-100 hover:bg-muted/40;
  }

  /* ── AI chat bubble ── */
  .chat-bubble-user {
    @apply ml-auto max-w-[80%] rounded-2xl rounded-tr-sm bg-primary text-primary-foreground px-4 py-3 text-sm;
  }
  .chat-bubble-ai {
    @apply mr-auto max-w-[85%] rounded-2xl rounded-tl-sm bg-card border px-4 py-3 text-sm;
  }

  /* ── KPI ── */
  .kpi-positive { @apply text-success; }
  .kpi-negative { @apply text-destructive; }
  .kpi-neutral  { @apply text-muted-foreground; }

  /* ── Gradient text ── */
  .gradient-text {
    @apply bg-gradient-to-r from-primary via-blue-500 to-accent bg-clip-text text-transparent;
  }

  /* ── Status pills ── */
  .pill-draft     { @apply bg-muted text-muted-foreground; }
  .pill-pending   { @apply bg-warning/10 text-warning; }
  .pill-active    { @apply bg-success/10 text-success; }
  .pill-paid      { @apply bg-primary/10 text-primary; }
  .pill-overdue   { @apply bg-destructive/10 text-destructive; }
  .pill-cancelled { @apply bg-muted text-muted-foreground line-through; }
}

@layer utilities {
  /* Fade in up animation */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in-up { animation: fadeInUp 0.35s ease-out both; }
  .animation-delay-100 { animation-delay: 0.1s; }
  .animation-delay-200 { animation-delay: 0.2s; }
  .animation-delay-300 { animation-delay: 0.3s; }
  .animation-delay-400 { animation-delay: 0.4s; }

  /* Shimmer for loading */
  @keyframes shimmer {
    from { background-position: -200% 0; }
    to   { background-position:  200% 0; }
  }
  .shimmer {
    background: linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--muted-foreground)/0.1) 50%, hsl(var(--muted)) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }

  /* Typing cursor for AI */
  @keyframes blink { 50% { opacity: 0; } }
  .cursor-blink { animation: blink 1s step-end infinite; }

  /* Glow pulse for active AI */
  @keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 0 0 hsl(var(--primary)/0.3); }
    50%       { box-shadow: 0 0 0 8px hsl(var(--primary)/0); }
  }
  .glow-pulse { animation: glowPulse 2s ease-in-out infinite; }

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