/* MoonUI - Complete CSS System */
@tailwind base;
@tailwind components;
@tailwind utilities;

@import "./tokens.css";
@import "./design-system.css";

/* ======================
   MOONUI COMPONENT STYLES
   ====================== */

@layer components {
  /* ======================
     BUTTON COMPONENT
     ====================== */
  .moonui-button-base {
    @apply inline-flex items-center justify-center rounded-md text-sm font-medium;
    @apply ring-offset-background transition-colors duration-200;
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
    @apply disabled:pointer-events-none disabled:opacity-50;
  }

  /* ======================
     CARD COMPONENT
     ====================== */
  .moonui-card-base {
    @apply rounded-lg border bg-card text-card-foreground shadow-sm;
  }

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

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

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

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

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

  /* ======================
     INPUT COMPONENT
     ====================== */
  .moonui-input-base {
    @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2;
    @apply text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium;
    @apply placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2;
    @apply focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
  }

  /* ======================
     LABEL COMPONENT
     ====================== */
  .moonui-label-base {
    @apply text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70;
  }

  /* ======================
     DIALOG COMPONENT
     ====================== */
  .moonui-dialog-overlay {
    @apply fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out;
    @apply data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0;
  }

  .moonui-dialog-content {
    @apply fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%];
    @apply gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in;
    @apply data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0;
    @apply data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2;
    @apply data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2;
    @apply data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg;
  }

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

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

  /* ======================
     BADGE COMPONENT
     ====================== */
  .moonui-badge-base {
    @apply inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold;
    @apply transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
  }

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

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

  .moonui-badge-destructive {
    @apply border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80;
  }

  .moonui-badge-outline {
    @apply text-foreground;
  }

  /* ======================
     TABLE COMPONENT
     ====================== */
  .moonui-table-base {
    @apply w-full caption-bottom text-sm;
  }

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

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

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

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

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

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

  /* ======================
     TOGGLE COMPONENT
     ====================== */
  .moonui-toggle-base {
    @apply inline-flex items-center justify-center rounded-md text-sm font-medium;
    @apply ring-offset-background transition-all duration-200;
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
    @apply disabled:pointer-events-none disabled:opacity-50;
    color: hsl(var(--foreground));
  }

  /* ======================
     SWITCH COMPONENT
     ====================== */
  .moonui-switch-base {
    @apply peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2;
    @apply border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2;
    @apply focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;
    @apply disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary;
    @apply data-[state=unchecked]:bg-input;
  }

  .moonui-switch-thumb {
    @apply pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0;
    @apply transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0;
  }

  /* ======================
     CHECKBOX COMPONENT
     ====================== */
  .moonui-checkbox-base {
    @apply peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background;
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
    @apply disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary;
    @apply data-[state=checked]:text-primary-foreground;
  }

  /* ======================
     RADIO GROUP COMPONENT
     ====================== */
  .moonui-radio-base {
    @apply aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background;
    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
    @apply disabled:cursor-not-allowed disabled:opacity-50;
  }

  /* ======================
     SELECT COMPONENT
     ====================== */
  .moonui-select-trigger {
    @apply flex h-10 w-full items-center justify-between rounded-md border border-input;
    @apply bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground;
    @apply focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
    @apply disabled:cursor-not-allowed disabled:opacity-50;
  }

  .moonui-select-content {
    @apply relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover;
    @apply text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out;
    @apply data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95;
    @apply data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2;
  }

  /* ======================
     TOOLTIP COMPONENT
     ====================== */
  .moonui-tooltip-content {
    @apply z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground;
    @apply shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out;
    @apply data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95;
    @apply data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2;
    @apply data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2;
  }

  /* ======================
     SKELETON COMPONENT
     ====================== */
  .moonui-skeleton-base {
    @apply animate-pulse rounded-md bg-muted;
  }

  /* ======================
     AVATAR COMPONENT
     ====================== */
  .moonui-avatar-base {
    @apply relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full;
  }

  .moonui-avatar-image {
    @apply aspect-square h-full w-full;
  }

  .moonui-avatar-fallback {
    @apply flex h-full w-full items-center justify-center rounded-full bg-muted;
  }

  /* ======================
     ACCORDION COMPONENT
     ====================== */
  .moonui-accordion-item {
    @apply border-b;
  }

  .moonui-accordion-trigger {
    @apply flex flex-1 items-center justify-between py-4 font-medium transition-all;
    @apply hover:underline [&[data-state=open]>svg]:rotate-180;
  }

  .moonui-accordion-content {
    @apply overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up;
    @apply data-[state=open]:animate-accordion-down;
  }

  /* ======================
     TABS COMPONENT
     ====================== */
  .moonui-tabs-list {
    @apply inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground;
  }

  .moonui-tabs-trigger {
    @apply inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5;
    @apply text-sm font-medium ring-offset-background transition-all focus-visible:outline-none;
    @apply focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
    @apply disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background;
    @apply data-[state=active]:text-foreground data-[state=active]:shadow-sm;
  }

  .moonui-tabs-content {
    @apply mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2;
    @apply focus-visible:ring-ring focus-visible:ring-offset-2;
  }

  /* ======================
     PROGRESS COMPONENT
     ====================== */
  .moonui-progress-base {
    @apply relative h-4 w-full overflow-hidden rounded-full bg-secondary;
  }

  .moonui-progress-indicator {
    @apply h-full w-full flex-1 bg-primary transition-all;
  }

  /* ======================
     SLIDER COMPONENT
     ====================== */
  .moonui-slider-base {
    @apply relative flex w-full touch-none select-none items-center;
  }

  .moonui-slider-track {
    @apply relative h-2 w-full grow overflow-hidden rounded-full bg-secondary;
  }

  .moonui-slider-range {
    @apply absolute h-full bg-primary;
  }

  .moonui-slider-thumb {
    @apply block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background;
    @apply transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring;
    @apply focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
  }
}