/* shadcn/ui inspired components */

/* Button variants */
.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 h-10 py-2 px-4;
}

.btn-destructive {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 h-10 py-2 px-4 transition-colors;
}

.btn-outline {
    @apply border border-input hover:bg-accent hover:text-accent-foreground h-10 py-2 px-4;
}

.btn-secondary {
    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 py-2 px-4;
}

.btn-ghost {
    @apply hover:bg-accent hover:text-accent-foreground h-10 py-2 px-4;
}

.btn-link {
    @apply underline-offset-4 hover:underline text-primary h-10 py-2 px-4;
}

/* 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;
}

/* Input components */
.input {
    @apply flex h-10 w-full rounded-md border border-input bg-transparent 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-transparent 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;
}

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

/* Badge */
.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 hover:bg-primary/80;
}

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

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

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

/* 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;
}

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

/* Dialog/Modal overlay */
.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;
}

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

.table-header {
    @apply [&_tr]: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;
}

/* Select */
.select {
    @apply flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent 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;
}

.select-trigger {
    @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;
}

.select-content {
    @apply relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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-[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;
}

.select-item {
    @apply relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
}

.select-separator {
    @apply -mx-1 my-1 h-px bg-muted;
}

.select-label {
    @apply py-1.5 pl-8 pr-2 text-sm font-semibold;
}

/* Separator */
.separator {
    @apply shrink-0 bg-border h-[1px] w-full;
}

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

/* Dashboard responsive fixes */
.dashboard-main {
    @apply min-w-0 overflow-x-auto;
}

@media (max-width: 1024px) {
    .dashboard-content {
        @apply px-4;
    }
}