@import 'tailwindcss';

@plugin 'tailwindcss-animate';
@plugin '@tailwindcss/forms' {
  strategy: 'class';
}

@custom-variant dark (&:is(.dark *));

@theme {
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
}

@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
  @media (width >= --theme(--breakpoint-sm)) {
    max-width: none;
  }
  @media (width >= 1400px) {
    max-width: 1400px;
  }
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-zinc-200, currentColor);
  }
}

@utility label {
  /*
    Label
  */
  @apply text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70;
}

@utility select {
  /*
    Select
  */
  @apply form-select w-48 border border-input bg-white dark:bg-black text-foreground rounded-md h-10 px-3 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
}

@utility badge {
  /*
    Badge
  */
  @apply border inline-flex items-center gap-x-1.5 rounded-md px-1.5 py-0.5 text-sm/5 font-medium sm:text-xs/5 forced-colors:outline;
}

@utility badge-primary {
  @apply border-transparent bg-primary text-primary-foreground hover:bg-primary/80;
}

@utility badge-secondary {
  @apply border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80;
}

@utility badge-destructive {
  @apply border-transparent bg-destructive/15 text-destructive dark:bg-destructive/10 dark:text-destructive-foreground;
}

@utility badge-outline {
  @apply text-foreground;
}

@utility badge-red {
  @apply border-transparent bg-red-500/15 text-red-700 dark:bg-red-500/10 dark:text-red-400;
}

@utility badge-orange {
  @apply border-transparent bg-orange-500/15 text-orange-700 dark:bg-orange-500/10 dark:text-orange-400;
}

@utility badge-amber {
  @apply border-transparent bg-amber-400/20 text-amber-700 dark:bg-amber-400/10 dark:text-amber-400;
}

@utility badge-yellow {
  @apply border-transparent bg-yellow-400/20 text-yellow-700 dark:bg-yellow-400/10 dark:text-yellow-300;
}

@utility badge-lime {
  @apply border-transparent bg-lime-400/20 text-lime-700 dark:bg-lime-400/10 dark:text-lime-300;
}

@utility badge-green {
  @apply border-transparent bg-green-500/15 text-green-700 dark:bg-green-500/10 dark:text-green-400;
}

@utility badge-emerald {
  @apply border-transparent bg-emerald-500/15 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400;
}

@utility badge-teal {
  @apply border-transparent bg-teal-500/15 text-teal-700 dark:bg-teal-500/10 dark:text-teal-300;
}

@utility badge-cyan {
  @apply border-transparent bg-cyan-400/20 text-cyan-700 dark:bg-cyan-400/10 dark:text-cyan-300;
}

@utility badge-sky {
  @apply border-transparent bg-sky-500/15 text-sky-700 dark:bg-sky-500/10 dark:text-sky-300;
}

@utility badge-blue {
  @apply border-transparent bg-blue-500/15 text-blue-700 dark:text-blue-400;
}

@utility badge-indigo {
  @apply border-transparent bg-indigo-500/15 text-indigo-700 dark:text-indigo-400;
}

@utility badge-violet {
  @apply border-transparent bg-violet-500/15 text-violet-700 dark:text-violet-400;
}

@utility badge-purple {
  @apply border-transparent bg-purple-500/15 text-purple-700 dark:text-purple-400;
}

@utility badge-fuchsia {
  @apply border-transparent bg-fuchsia-400/15 text-fuchsia-700 dark:bg-fuchsia-400/10 dark:text-fuchsia-400;
}

@utility badge-pink {
  @apply border-transparent bg-pink-400/15 text-pink-700 dark:bg-pink-400/10 dark:text-pink-400;
}

@utility badge-rose {
  @apply border-transparent bg-rose-400/15 text-rose-700 dark:bg-rose-400/10 dark:text-rose-400;
}

@utility badge-zinc {
  @apply border-transparent bg-zinc-600/7.5 text-zinc-700 dark:bg-white/5 dark:text-zinc-400;
}

@utility circle {
  /*
    Circle
  */
  @apply size-2 inline-flex items-center justify-center rounded-full;
}

@utility circle-primary {
  @apply bg-primary;
}

@utility circle-secondary {
  @apply bg-secondary;
}

@utility circle-destructive {
  @apply bg-destructive;
}

@utility circle-outline {
  @apply border border-current bg-background;
}

@utility circle-red {
  @apply bg-red-500;
}

@utility circle-orange {
  @apply bg-orange-500;
}

@utility circle-amber {
  @apply bg-amber-400;
}

@utility circle-yellow {
  @apply bg-yellow-400;
}

@utility circle-lime {
  @apply bg-lime-400;
}

@utility circle-green {
  @apply bg-green-500;
}

@utility circle-emerald {
  @apply bg-emerald-500;
}

@utility circle-teal {
  @apply bg-teal-500;
}

@utility circle-cyan {
  @apply bg-cyan-400;
}

@utility circle-sky {
  @apply bg-sky-500;
}

@utility circle-blue {
  @apply bg-blue-500;
}

@utility circle-indigo {
  @apply bg-indigo-500;
}

@utility circle-violet {
  @apply bg-violet-500;
}

@utility circle-purple {
  @apply bg-purple-500;
}

@utility circle-fuchsia {
  @apply bg-fuchsia-400;
}

@utility circle-pink {
  @apply bg-pink-400;
}

@utility circle-rose {
  @apply bg-rose-400;
}

@utility circle-zinc {
  @apply bg-zinc-400;
}

@utility alert {
  /*
    Alert
  */
  @apply relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground;
}

@utility alert-default {
  @apply bg-background text-foreground;
}

@utility alert-destructive {
  @apply border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive;
}

@utility alert-red {
  @apply border-red-500/50 text-red-700 dark:border-red-500 dark:text-red-300 [&>svg]:text-red-500;
}

@utility alert-green {
  @apply border-green-500/50 text-green-700 dark:border-green-500 dark:text-green-300 [&>svg]:text-green-500;
}

@utility alert-yellow {
  @apply border-yellow-500/50 text-yellow-700 dark:border-yellow-500 dark:text-yellow-300 [&>svg]:text-yellow-500;
}

@utility alert-blue {
  @apply border-blue-500/50 text-blue-700 dark:border-blue-500 dark:text-blue-300 [&>svg]:text-blue-500;
}

@utility alert-purple {
  @apply border-purple-500/50 text-purple-700 dark:border-purple-500 dark:text-purple-300 [&>svg]:text-purple-500;
}

@utility alert-pink {
  @apply border-pink-500/50 text-pink-700 dark:border-pink-500 dark:text-pink-300 [&>svg]:text-pink-500;
}

@utility alert-title {
  @apply mb-1 font-medium leading-none tracking-tight;
}

@utility alert-description {
  @apply text-sm [&_p]:leading-relaxed;
}

@utility btn {
  /*
    Button
  */
  @apply inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
}

@utility btn-default {
  @apply bg-primary text-primary-foreground hover:bg-primary/90;
}

@utility btn-destructive {
  @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
}

@utility btn-outline {
  @apply border border-input bg-background hover:bg-accent hover:text-accent-foreground;
}

@utility btn-secondary {
  @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
}

@utility btn-ghost {
  @apply hover:bg-accent hover:text-accent-foreground;
}

@utility btn-link {
  @apply text-primary underline-offset-4 hover:underline;
}

@utility btn-xs {
  @apply h-7 rounded-md px-2 gap-1;
}

@utility btn-sm {
  @apply h-9 rounded-md px-3 gap-1.5;
}

@utility btn-md {
  @apply h-10 px-4 py-2 gap-1.5;
}

@utility btn-lg {
  @apply h-11 rounded-md px-8 gap-2;
}

@utility btn-icon {
  @apply h-10 w-10;
}

@utility info-line {
  /*
    Info Line
  */
  @apply flex items-center gap-4;
}

@utility info-line-label {
  @apply text-zinc-500 whitespace-nowrap;
}

@utility info-line-separator {
  @apply h-px flex-1 bg-zinc-950/10 dark:border-white/10 translate-y-px;
}

@utility info-line-value {
  @apply font-medium text-right text-zinc-950 dark:text-white;
}

@utility card {
  /*
    Card
  */
  @apply rounded-lg border bg-card text-card-foreground shadow-xs;
}

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

@utility card-title {
  @apply text-2xl font-semibold leading-none tracking-tight;
}

@utility card-description {
  @apply text-sm text-muted-foreground;
}

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

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

@utility navbar {
  /*
    Navbar
  */
  @apply flex items-center gap-4 bg-background py-4;
}

@utility navbar-section {
  @apply flex gap-1.5;
}

@utility navbar-item {
  @apply inline-flex items-center rounded-md justify-center px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
}

@utility navbar-item-default {
  @apply text-foreground hover:bg-accent hover:text-accent-foreground;
}

@utility navbar-item-current {
  @apply bg-primary text-primary-foreground;
}

@utility table-wrapper {
  /*
    Table
  */
  @apply relative w-full overflow-auto;
}

@utility table {
  @apply w-full caption-bottom text-sm;
}

@utility table-header {
  @apply [&_tr]:border-b;
}

@utility table-body {
  @apply [&_tr:last-child]:border-0;
}

@utility table-footer {
  @apply border-t bg-muted/50 font-medium last:[&>tr]:border-b-0;
}

@utility table-row {
  @apply border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted;
}

@utility table-head {
  @apply h-12 px-4 text-left align-middle font-medium text-muted-foreground whitespace-nowrap [&:has([role=checkbox])]:pr-0;
}

@utility table-cell {
  @apply p-4 align-middle [&:has([role=checkbox])]:pr-0;
}

@utility table-caption {
  @apply mt-4 text-sm text-muted-foreground;
}

@utility pagination {
  /*
    Pagination
  */
  @apply flex justify-center;
}

@utility pagination-content {
  @apply flex flex-row items-center gap-1;
}

@utility pagination-item {
  @apply inline-block;
}

@utility pagination-link {
  @apply inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
}

@utility pagination-link-active {
  @apply border border-input bg-background hover:bg-accent hover:text-accent-foreground;
}

@utility pagination-link-inactive {
  @apply hover:bg-accent hover:text-accent-foreground;
}

@utility pagination-link-icon {
  @apply h-9 w-9;
}

@utility pagination-link-default {
  @apply h-10 px-4 py-2;
}

@utility pagination-previous {
  @apply h-10 px-4 py-2 gap-1;
  @apply pl-2.5;
}

@utility pagination-next {
  @apply h-10 px-4 py-2 gap-1;
  @apply pr-2.5;
}

@utility pagination-ellipsis {
  @apply flex h-9 w-9 items-center justify-center;
}

@layer base {
  :root {
    --background: 0 0% 98%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 93.8%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.65rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .dark {
    --background: 0 0% 1%;
    --foreground: 0 0% 92%;
    --card: 240 0% 10%;
    --card-foreground: 0 0% 92%;
    --popover: 240 0% 12%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 95%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 20%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 20%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 20%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 16%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

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

  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  [data-href] {
    @apply cursor-pointer;
  }

  .link {
    @apply underline hover:opacity-75;
  }
}
