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

/* Shadcn/UI CSS Variables - Gray theme with dark mode */
:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.13 0.028 261.692);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.13 0.028 261.692);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.13 0.028 261.692);
  --primary: oklch(0.21 0.034 264.665);
  --primary-foreground: oklch(0.985 0.002 247.839);
  --primary-hover: oklch(0.18 0.030 264.665);
  --secondary: oklch(0.967 0.003 264.542);
  --secondary-foreground: oklch(0.21 0.034 264.665);
  --secondary-hover: oklch(0.95 0.003 264.542);
  --muted: oklch(0.967 0.003 264.542);
  --muted-foreground: oklch(0.551 0.027 264.364);
  --muted-hover: oklch(0.95 0.003 264.542);
  --accent: oklch(0.967 0.003 264.542);
  --accent-foreground: oklch(0.21 0.034 264.665);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0.002 247.839);
  --border: oklch(0.928 0.006 264.531);
  --input: oklch(0.928 0.006 264.531);
  --ring: oklch(0.707 0.022 261.325);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0.002 247.839);
  --sidebar-foreground: oklch(0.13 0.028 261.692);
  --sidebar-primary: oklch(0.21 0.034 264.665);
  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
  --sidebar-accent: oklch(0.967 0.003 264.542);
  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
  --sidebar-border: oklch(0.928 0.006 264.531);
  --sidebar-ring: oklch(0.707 0.022 261.325);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.13 0.028 261.692);
    --foreground: oklch(0.985 0.002 247.839);
    --card: oklch(0.21 0.034 264.665);
    --card-foreground: oklch(0.985 0.002 247.839);
    --popover: oklch(0.21 0.034 264.665);
    --popover-foreground: oklch(0.985 0.002 247.839);
    --primary: oklch(0.928 0.006 264.531);
    --primary-foreground: oklch(0.21 0.034 264.665);
    --primary-hover: oklch(0.85 0.006 264.531);
    --secondary: oklch(0.278 0.033 256.848);
    --secondary-foreground: oklch(0.985 0.002 247.839);
    --secondary-hover: oklch(0.32 0.033 256.848);
    --muted: oklch(0.278 0.033 256.848);
    --muted-foreground: oklch(0.707 0.022 261.325);
    --muted-hover: oklch(0.32 0.033 256.848);
    --accent: oklch(0.278 0.033 256.848);
    --accent-foreground: oklch(0.985 0.002 247.839);
    --destructive: oklch(0.704 0.191 22.216);
    --destructive-foreground: oklch(0.985 0.002 247.839);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.551 0.027 264.364);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.21 0.034 264.665);
    --sidebar-foreground: oklch(0.985 0.002 247.839);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
    --sidebar-accent: oklch(0.278 0.033 256.848);
    --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.551 0.027 264.364);
  }
}

.dark {
  --background: oklch(0.13 0.028 261.692);
  --foreground: oklch(0.985 0.002 247.839);
  --card: oklch(0.21 0.034 264.665);
  --card-foreground: oklch(0.985 0.002 247.839);
  --popover: oklch(0.21 0.034 264.665);
  --popover-foreground: oklch(0.985 0.002 247.839);
  --primary: oklch(0.928 0.006 264.531);
  --primary-foreground: oklch(0.21 0.034 264.665);
  --primary-hover: oklch(0.85 0.006 264.531);
  --secondary: oklch(0.278 0.033 256.848);
  --secondary-foreground: oklch(0.985 0.002 247.839);
  --secondary-hover: oklch(0.32 0.033 256.848);
  --muted: oklch(0.278 0.033 256.848);
  --muted-foreground: oklch(0.707 0.022 261.325);
  --muted-hover: oklch(0.32 0.033 256.848);
  --accent: oklch(0.278 0.033 256.848);
  --accent-foreground: oklch(0.985 0.002 247.839);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.985 0.002 247.839);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.551 0.027 264.364);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.21 0.034 264.665);
  --sidebar-foreground: oklch(0.985 0.002 247.839);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
  --sidebar-accent: oklch(0.278 0.033 256.848);
  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.551 0.027 264.364);
}

@layer base {
  * {
    @apply border-border;
  }
  
  body {
    @apply bg-background text-foreground;
  }
  
  html {
    color-scheme: light dark;
  }
}

@layer components {
  /* Button styles */
  .btn {
    @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50;
    @apply bg-primary text-primary-foreground shadow h-9 px-4 py-2;
  }
  
  .btn:hover {
    background-color: var(--primary-hover);
  }
  
  .btn-outline {
    @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50;
    @apply border border-input bg-background shadow-sm h-9 px-4 py-2;
  }
  
  .btn-outline:hover {
    @apply bg-accent text-accent-foreground;
  }
  
  .btn-sm {
    @apply h-8 rounded-md px-3 text-xs;
  }
  
  /* Card styles */
  .card {
    @apply rounded-xl border bg-card text-card-foreground shadow;
  }
  
  /* Force equal height cards with flexbox */
  .card.h-full {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .card header {
    @apply flex flex-col space-y-1.5 p-6;
  }
  
  .card header.flex-shrink-0 {
    flex-shrink: 0;
  }
  
  .card header h3,
  .card header h4 {
    @apply font-semibold leading-none tracking-tight;
  }
  
  .card header p {
    @apply text-sm text-muted-foreground;
  }
  
  .card section {
    @apply p-6 pt-0;
  }
  
  .card section.flex-grow {
    flex-grow: 1;
  }
  
  .card footer {
    @apply flex items-center p-6 pt-0;
  }
  
  /* Badge styles */
  .badge {
    @apply inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
    @apply border-transparent bg-secondary text-secondary-foreground;
  }
  
  .badge:hover {
    background-color: var(--secondary-hover);
  }
  
  /* Alert styles */
  .alert {
    @apply relative w-full rounded-lg border px-4 py-3 text-sm;
    @apply border-border text-foreground;
  }
  
  .alert h3 {
    @apply mb-1 font-medium leading-none tracking-tight;
  }
  
  .alert section {
    @apply leading-relaxed;
  }
  
  /* Table styles */
  .table {
    @apply w-full caption-bottom text-sm;
  }
  
  .table thead {
    @apply border-b;
  }
  
  .table tbody tr:last-child {
    @apply border-0;
  }
  
  .table tr {
    @apply border-b transition-colors;
  }
  
  .table tr:hover {
    background-color: var(--muted-hover);
  }
  
  .table th {
    @apply h-10 px-2 text-left align-middle font-medium text-muted-foreground;
  }
  
  .table td {
    @apply p-2 align-middle;
  }
  
  /* Code and pre styles */
  pre {
    @apply rounded-lg border bg-muted p-4 text-sm overflow-x-auto;
  }
  
  code {
    @apply relative rounded bg-muted px-1 py-0.5 font-mono text-sm;
  }
  
  pre code {
    @apply bg-transparent p-0;
  }
} 