/* Shadcn-inspired component styles - Ultra Dark Theme */

/* Global enhancements */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(0 0% 25%) hsl(0 0% 7%);
}

body {
  background: linear-gradient(180deg, 
    hsl(0 0% 3.9%) 0%, 
    hsl(0 0% 5%) 50%, 
    hsl(0 0% 3.9%) 100%);
}

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

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

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

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

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

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

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

.btn-sm {
  @apply h-9 px-3;
}

.btn-md {
  @apply h-10 px-4 py-2;
}

.btn-lg {
  @apply h-11 px-8;
}

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

/* Card components */
.card {
  @apply rounded-lg border bg-card text-card-foreground shadow-sm;
}

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

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

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

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

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

/* Badge components */
.badge {
  @apply inline-flex items-center rounded-full 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;
}

.badge-default {
  @apply border-transparent bg-primary text-primary-foreground;
}

.badge-secondary {
  @apply border-transparent bg-secondary text-secondary-foreground;
}

.badge-destructive {
  @apply border-transparent bg-destructive text-destructive-foreground;
}

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

.badge-success {
  @apply border-transparent bg-green-500/20 text-green-500;
}

.badge-warning {
  @apply border-transparent bg-yellow-500/20 text-yellow-500;
}

/* Alert components */
.alert {
  @apply relative w-full rounded-lg border p-4;
}

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

.alert-destructive {
  @apply border-destructive/50 text-destructive;
}

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

.alert-description {
  @apply text-sm;
}

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

.textarea {
  @apply flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
}

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

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

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

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

/* Separator */
.separator {
  @apply shrink-0 bg-border;
}

.separator-horizontal {
  @apply h-[1px] w-full;
}

.separator-vertical {
  @apply h-full w-[1px];
}

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

.table-header {
  @apply border-b;
}

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

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

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

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

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

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

/* Progress components */
.progress {
  @apply relative h-4 w-full overflow-hidden rounded-full bg-secondary;
}

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

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

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

/* Dialog/Modal */
.dialog-overlay {
  @apply fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0;
}

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

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

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

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