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

@layer base {
  :root {
    --background:             0 0% 100%;
    --foreground:             222.2 84% 4.9%;
    --card:                   0 0% 100%;
    --card-foreground:        222.2 84% 4.9%;
    --popover:                0 0% 100%;
    --popover-foreground:     222.2 84% 4.9%;
    --primary:                239 84% 67%;
    --primary-foreground:     210 40% 98%;
    --secondary:              210 40% 96.1%;
    --secondary-foreground:   222.2 47.4% 11.2%;
    --muted:                  210 40% 96.1%;
    --muted-foreground:       215.4 16.3% 46.9%;
    --accent:                 210 40% 96.1%;
    --accent-foreground:      222.2 47.4% 11.2%;
    --destructive:            0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border:                 214.3 31.8% 91.4%;
    --input:                  214.3 31.8% 91.4%;
    --ring:                   239 84% 67%;
    --radius:                 0.6rem;

    /* Sidebar */
    --sidebar-background:          222 47% 11%;
    --sidebar-foreground:          210 40% 98%;
    --sidebar-primary:             239 84% 67%;
    --sidebar-primary-foreground:  210 40% 98%;
    --sidebar-accent:              223 47% 17%;
    --sidebar-accent-foreground:   210 40% 98%;
    --sidebar-border:              223 47% 17%;
    --sidebar-ring:                239 84% 67%;

    /* Status Colors */
    --status-draft:           215 20% 65%;
    --status-in-review:       38 92% 50%;
    --status-approved:        142 71% 45%;
    --status-scheduled:       239 84% 67%;
    --status-published:       142 71% 45%;
    --status-failed:          0 84% 60%;
    --status-changes:         25 95% 53%;
  }

  .dark {
    --background:             222.2 84% 4.9%;
    --foreground:             210 40% 98%;
    --card:                   222.2 84% 4.9%;
    --card-foreground:        210 40% 98%;
    --popover:                222.2 84% 4.9%;
    --popover-foreground:     210 40% 98%;
    --primary:                239 84% 67%;
    --primary-foreground:     222.2 47.4% 11.2%;
    --secondary:              217.2 32.6% 17.5%;
    --secondary-foreground:   210 40% 98%;
    --muted:                  217.2 32.6% 17.5%;
    --muted-foreground:       215 20.2% 65.1%;
    --accent:                 217.2 32.6% 17.5%;
    --accent-foreground:      210 40% 98%;
    --destructive:            0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border:                 217.2 32.6% 17.5%;
    --input:                  217.2 32.6% 17.5%;
    --ring:                   239 84% 67%;

    --sidebar-background:          222 47% 8%;
    --sidebar-foreground:          210 40% 98%;
    --sidebar-primary:             239 84% 67%;
    --sidebar-primary-foreground:  210 40% 98%;
    --sidebar-accent:              222 47% 13%;
    --sidebar-accent-foreground:   210 40% 98%;
    --sidebar-border:              222 47% 13%;
    --sidebar-ring:                239 84% 67%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold tracking-tight;
  }
}

@layer components {
  /* Skeleton shimmer */
  .skeleton {
    @apply animate-pulse rounded-md bg-muted;
  }

  /* Status badges */
  .status-draft           { @apply bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400; }
  .status-in_review       { @apply bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400; }
  .status-changes_requested { @apply bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400; }
  .status-approved        { @apply bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400; }
  .status-scheduled       { @apply bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400; }
  .status-published       { @apply bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400; }
  .status-failed          { @apply bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400; }
  .status-archived        { @apply bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-500; }

  /* Platform colors */
  .platform-facebook  { @apply text-[#1877F2]; }
  .platform-instagram { @apply text-[#E4405F]; }
  .platform-x         { @apply text-[#000000] dark:text-white; }

  /* Card hover effect */
  .card-hover {
    @apply transition-all duration-200 hover:shadow-md hover:-translate-y-0.5;
  }

  /* Sidebar nav item */
  .sidebar-item {
    @apply flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all
           text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent;
  }
  .sidebar-item.active {
    @apply bg-sidebar-primary text-sidebar-primary-foreground;
  }

  /* Stats card */
  .stats-card {
    @apply rounded-xl border bg-card p-6 shadow-sm;
  }

  /* Gradient text */
  .gradient-text {
    @apply bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent;
  }

  /* AI thinking animation */
  .ai-thinking {
    @apply inline-flex gap-1;
  }
  .ai-thinking span {
    @apply h-1.5 w-1.5 rounded-full bg-primary animate-bounce;
  }
  .ai-thinking span:nth-child(2) { animation-delay: 0.15s; }
  .ai-thinking span:nth-child(3) { animation-delay: 0.3s; }

  /* Scrollbar */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
  }
  .scrollbar-thin::-webkit-scrollbar { width: 4px; }
  .scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: hsl(var(--border));
    border-radius: 20px;
  }

  /* Calendar */
  .rbc-calendar { @apply font-sans text-sm; }
  .rbc-header { @apply bg-muted/50 py-2 text-xs font-medium text-muted-foreground uppercase; }
  .rbc-today { @apply bg-primary/5; }
  .rbc-event {
    @apply rounded-md border-0 text-xs font-medium px-1 py-0.5 cursor-pointer;
    background-color: hsl(var(--primary)) !important;
  }
  .rbc-event.status-scheduled { background-color: hsl(239 84% 67%) !important; }
  .rbc-event.status-published { background-color: hsl(142 71% 45%) !important; }
  .rbc-event.status-failed    { background-color: hsl(0 84% 60%) !important; }
  .rbc-event.status-draft     { background-color: hsl(215 20% 65%) !important; }
  .rbc-toolbar { @apply mb-4 flex flex-wrap items-center justify-between gap-2; }
  .rbc-toolbar button {
    @apply rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-muted;
  }
  .rbc-toolbar button.rbc-active {
    @apply bg-primary text-primary-foreground border-primary;
  }
}

@layer utilities {
  .text-balance { text-wrap: balance; }
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
}