/* Import Tailwind directives */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Light mode */
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --success: 142.1 76.2% 36.3%;
    --warning: 47.9 95.8% 53.1%;
  }

  /* Dark mode */
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 3.9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 14.9%;
    --success: 142.1 76.2% 36.3%;
    --warning: 47.9 95.8% 53.1%;
  }

  /* Override Tailwind's slate colors with true neutrals */
  :root {
    --color-slate-50: oklch(98% 0 0);
    --color-slate-100: oklch(96% 0 0);
    --color-slate-200: oklch(93% 0 0);
    --color-slate-300: oklch(87% 0 0);
    --color-slate-400: oklch(70% 0 0);
    --color-slate-500: oklch(55% 0 0);
    --color-slate-600: oklch(45% 0 0);
    --color-slate-700: oklch(37% 0 0);
    --color-slate-800: oklch(28% 0 0);
    --color-slate-900: oklch(21% 0 0);
    --color-slate-950: oklch(13% 0 0);
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    @apply antialiased;
  }

  /* Global cursor pointer for interactive elements */
  button:not(:disabled),
  a:not([disabled]),
  [role="button"]:not([disabled]),
  input[type="checkbox"]:not(:disabled),
  input[type="radio"]:not(:disabled),
  label[for],
  select:not(:disabled),
  .cursor-pointer {
    cursor: pointer !important;
  }

  button:disabled,
  a[disabled],
  input:disabled,
  select:disabled,
  .disabled {
    cursor: not-allowed !important;
  }
}

@layer components {
  /* Button components - shadcn/ui inspired */
  .btn {
    @apply inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-9 px-4 py-2;
  }

  .btn-default {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    @apply shadow transition-all duration-200 hover:opacity-90 hover:shadow-md hover:scale-105;
  }

  .btn-destructive {
    background-color: hsl(var(--destructive));
    color: white;
    @apply shadow-sm transition-all duration-200 hover:opacity-90 hover:shadow-md hover:scale-105;
  }

  .btn-outline {
    border-color: hsl(var(--input));
    @apply border bg-transparent shadow-sm transition-all duration-200 hover:bg-slate-800 hover:shadow-md hover:scale-105;
  }

  .btn-secondary {
    background-color: hsl(var(--secondary));
    color: hsl(var(--foreground));
    @apply shadow-sm transition-all duration-200 hover:opacity-80 hover:shadow-md hover:scale-105;
  }

  .btn-ghost {
    @apply hover:bg-slate-800;
  }

  .btn-link {
    color: hsl(var(--primary));
    @apply underline-offset-4 hover:underline;
  }

  /* Size variants */
  .btn-sm {
    @apply h-8 rounded-md px-3 text-xs;
  }

  .btn-lg {
    @apply h-10 rounded-md px-8;
  }

  .btn-icon {
    @apply h-9 w-9 p-0;
  }

  /* Card component */
  .card {
    background-color: hsl(var(--card));
    border-color: hsl(var(--border));
    @apply rounded-lg border transition-all duration-200 hover:shadow-md hover:-translate-y-0.5;
  }

  .card-header {
    @apply flex flex-col space-y-1.5 p-6;
  }

  .card-title {
    @apply text-lg font-semibold leading-none tracking-tight;
  }

  .card-description {
    color: hsl(var(--muted-foreground));
    @apply text-sm;
  }

  .card-content {
    @apply p-6 pt-0;
  }

  .card-footer {
    @apply flex items-center p-6 pt-0;
  }

  /* Input component */
  .input {
    border-color: hsl(var(--input));
    background-color: transparent;
    @apply flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-400 disabled:cursor-not-allowed disabled:opacity-50;
  }

  .input::placeholder {
    color: hsl(var(--muted-foreground));
  }

  /* Label component */
  .label {
    @apply text-sm font-medium leading-none;
  }

  /* Badge component */
  .badge {
    @apply inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors;
  }

  .badge-default {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    @apply border-transparent;
  }

  .badge-secondary {
    background-color: hsl(var(--secondary));
    color: hsl(var(--foreground));
    @apply border-transparent;
  }

  .badge-destructive {
    background-color: hsl(var(--destructive));
    color: white;
    @apply border-transparent;
  }

  .badge-outline {
    color: hsl(var(--foreground));
  }

  /* Alert component */
  .alert {
    border-color: hsl(var(--border));
    @apply relative w-full rounded-lg border px-4 py-3 text-sm;
  }

  .alert-default {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }

  .alert-destructive {
    border-color: hsl(var(--destructive) / 0.5);
    color: hsl(var(--destructive));
  }

  /* Table component */
  .table {
    @apply w-full caption-bottom text-sm;
  }

  .table-header {
    border-bottom: 1px solid hsl(var(--border));
  }

  .table-body tr {
    border-bottom: 1px solid hsl(var(--border));
  }

  .table-body tr:last-child {
    border-bottom: none;
  }

  .table-row {
    @apply transition-colors;
  }

  .table-row:hover {
    background-color: hsl(var(--accent));
  }

  .table-head {
    color: hsl(var(--muted-foreground));
    @apply h-12 px-4 text-left align-middle font-medium;
  }

  .table-cell {
    @apply p-4 align-middle;
  }

  /* Separator */
  .separator {
    background-color: hsl(var(--border));
    @apply h-px w-full;
  }
}

/* Interactive hover states */
.sidebar-link {
  @apply transition-all duration-200 ease-in-out;
}

.sidebar-link:hover {
  @apply bg-accent shadow-sm translate-x-0.5;
  background-color: hsl(var(--accent));
}

.sidebar-link.active {
  @apply bg-accent shadow-sm;
  background-color: hsl(var(--accent));
}

/* Card hover effects */
.dashboard-card {
  @apply transition-all duration-200 cursor-pointer;
}

.dashboard-card:hover {
  @apply shadow-lg -translate-y-1;
}

/* Theme toggle button */
.theme-toggle {
  @apply transition-all duration-200;
}

.theme-toggle:hover {
  @apply scale-110 shadow-md;
  background-color: hsl(var(--accent));
}

/* All interactive elements */
a, button, [role="button"] {
  @apply transition-all duration-200;
}

/* Daily stats table row hover */
.daily-stat-row {
  @apply transition-colors duration-150;
}

.daily-stat-row:hover {
  background-color: hsl(var(--muted) / 0.5);
}