sutra_ui

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

:root {
    --radius: 0.65rem;
    --background: oklch(1 0 0);
    --foreground: oklch(0.141 0.005 285.823);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.141 0.005 285.823);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.141 0.005 285.823);
    --primary: oklch(0.623 0.214 259.815);
    /* Use near-white for readable contrast on primary */
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.967 0.001 286.375);
    --secondary-foreground: oklch(0.21 0.006 285.885);
    --muted: oklch(0.967 0.001 286.375);
    --muted-foreground: oklch(0.552 0.016 285.938);
    --accent: oklch(0.967 0.001 286.375);
    --accent-foreground: oklch(0.21 0.006 285.885);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(0.92 0.004 286.32);
    --input: oklch(0.92 0.004 286.32);
    --ring: oklch(0.623 0.214 259.815);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.141 0.005 285.823);
    --sidebar-primary: oklch(0.623 0.214 259.815);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.967 0.001 286.375);
    --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
    --sidebar-border: oklch(0.92 0.004 286.32);
    --sidebar-ring: oklch(0.623 0.214 259.815);
    --scrollbar-track: transparent;
    --scrollbar-thumb: rgba(0, 0, 0, 0.3);
    --scrollbar-width: 6px;
    --scrollbar-radius: 6px;
    --chevron-down-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>'); /* --muted-foreground */
    --chevron-down-icon-50: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0 / 0.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>'); /* --muted-foreground + 50% opacity */
    --check-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.985 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>'); /* --primary-foreground */
}

.dark {
    --background: oklch(0.141 0.005 285.823);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.21 0.006 285.885);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.21 0.006 285.885);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.546 0.245 262.881);
    /* Keep foreground white in dark too */
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.274 0.006 286.033);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.274 0.006 286.033);
    --muted-foreground: oklch(0.705 0.015 286.067);
    --accent: oklch(0.274 0.006 286.033);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.488 0.243 264.376);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.21 0.006 285.885);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.546 0.245 262.881);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.274 0.006 286.033);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.488 0.243 264.376);
    --scrollbar-thumb: rgba(255, 255, 255, 0.3);
    --chevron-down-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.708 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>'); /* --muted-foreground */
    --chevron-down-icon-50: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.708 0 0 / 0.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>'); /* --muted-foreground + 50% opacity */
    --check-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.708 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>'); /* --muted-foreground */
    color-scheme: dark;
}

@theme {
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);
    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
    * {
        @apply border-border outline-ring/50;
    }
    html {
        @apply scroll-smooth;
    }
    body {
        @apply bg-background text-foreground overscroll-none antialiased;
    }
    .scrollbar {
        scrollbar-width: thin;
        scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);

        &::-webkit-scrollbar {
            width: var(--scrollbar-width);
        }
        &::-webkit-scrollbar-track {
            background: var(--scrollbar-track);
        }
        &::-webkit-scrollbar-thumb {
            background: var(--scrollbar-thumb);
            border-radius: var(--scrollbar-radius);
        }
    }
}

/* Alert */
@layer components {
    .alert,
    .alert-destructive {
        @apply relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>span]:grid-cols-[1rem_1fr] grid-cols-[0_1fr] has-[>span]:gap-x-3 gap-y-0.5 items-start [&>span]:size-4 [&>span]:translate-y-0.5 [&>span]:text-current;

        h2,
        h3 {
            @apply col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight;
        }
        section {
            @apply text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed;

            ul {
                @apply list-inside list-disc text-sm;
            }
        }
    }
    .alert {
        @apply bg-card text-card-foreground;
    }
    .alert-destructive {
        @apply text-destructive bg-card [&>span]:text-current;

        section {
            @apply text-destructive;
        }
    }
}

/* Badge */
@layer components {
    .badge,
    .badge-primary,
    .badge-secondary,
    .badge-destructive,
    .badge-outline,
    .badge-success,
    .badge-info {
        @apply inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden;
    }
    .badge,
    .badge-primary {
        @apply border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90;
    }
    .badge-secondary {
        @apply border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90;
    }
    .badge-destructive {
        @apply border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60;
    }
    .badge-outline {
        @apply text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground;
    }
    .badge-success {
        @apply border-transparent bg-green-500 text-white [a&]:hover:bg-green-500/90 dark:bg-green-600;
    }
    .badge-info {
        @apply border-transparent bg-blue-500 text-white [a&]:hover:bg-blue-500/90 dark:bg-blue-600;
    }
}

/* Button */
@layer components {
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-ghost,
    .btn-link,
    .btn-destructive,
    .btn-sm,
    .btn-sm-primary,
    .btn-sm-secondary,
    .btn-sm-outline,
    .btn-sm-ghost,
    .btn-sm-link,
    .btn-sm-destructive,
    .btn-lg,
    .btn-lg-primary,
    .btn-lg-secondary,
    .btn-lg-outline,
    .btn-lg-ghost,
    .btn-lg-link,
    .btn-lg-destructive,
    .btn-icon,
    .btn-icon-primary,
    .btn-icon-secondary,
    .btn-icon-outline,
    .btn-icon-ghost,
    .btn-icon-link,
    .btn-icon-destructive,
    .btn-sm-icon,
    .btn-sm-icon-primary,
    .btn-sm-icon-secondary,
    .btn-sm-icon-outline,
    .btn-sm-icon-ghost,
    .btn-sm-icon-link,
    .btn-sm-icon-destructive,
    .btn-lg-icon,
    .btn-lg-icon-primary,
    .btn-lg-icon-secondary,
    .btn-lg-icon-outline,
    .btn-lg-icon-ghost,
    .btn-lg-icon-link,
    .btn-lg-icon-destructive {
        @apply inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer rounded-md;
    }
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-ghost,
    .btn-link,
    .btn-destructive {
        @apply gap-2 h-9 px-4 py-2 has-[>svg]:px-3;
    }
    .btn-icon,
    .btn-icon-primary,
    .btn-icon-secondary,
    .btn-icon-outline,
    .btn-icon-ghost,
    .btn-icon-link,
    .btn-icon-destructive {
        @apply size-9;
    }
    .btn-sm,
    .btn-sm-primary,
    .btn-sm-secondary,
    .btn-sm-outline,
    .btn-sm-ghost,
    .btn-sm-link,
    .btn-sm-destructive {
        @apply gap-1.5 h-8 px-3 has-[>svg]:px-2.5;
    }
    .btn-sm-icon,
    .btn-sm-icon-primary,
    .btn-sm-icon-secondary,
    .btn-sm-icon-outline,
    .btn-sm-icon-ghost,
    .btn-sm-icon-link,
    .btn-sm-icon-destructive {
        @apply size-8;
    }
    .btn-lg,
    .btn-lg-primary,
    .btn-lg-secondary,
    .btn-lg-outline,
    .btn-lg-ghost,
    .btn-lg-link,
    .btn-lg-destructive {
        @apply gap-2 h-10 px-6 has-[>svg]:px-4;
    }
    .btn-lg-icon,
    .btn-lg-icon-primary,
    .btn-lg-icon-secondary,
    .btn-lg-icon-outline,
    .btn-lg-icon-ghost,
    .btn-lg-icon-link,
    .btn-lg-icon-destructive {
        @apply size-10;
    }
    .btn,
    .btn-primary,
    .btn-sm,
    .btn-sm-primary,
    .btn-lg,
    .btn-lg-primary,
    .btn-icon,
    .btn-icon-primary,
    .btn-sm-icon,
    .btn-sm-icon-primary,
    .btn-lg-icon,
    .btn-lg-icon-primary {
        @apply bg-primary text-primary-foreground shadow-xs hover:bg-primary/90;
        &[aria-pressed="true"] {
            @apply bg-primary/90;
        }
    }
    .btn-secondary,
    .btn-sm-secondary,
    .btn-lg-secondary,
    .btn-icon-secondary,
    .btn-sm-icon-secondary,
    .btn-lg-icon-secondary {
        @apply bg-secondary text-secondary-foreground shadow-xs;
        &:hover,
        &[aria-pressed="true"] {
            @apply bg-secondary/80;
        }
    }
    .btn-outline,
    .btn-sm-outline,
    .btn-lg-outline,
    .btn-icon-outline,
    .btn-sm-icon-outline,
    .btn-lg-icon-outline {
        @apply border border-input bg-transparent text-foreground shadow-xs dark:bg-input/30;
        &:hover,
        &[aria-pressed="true"] {
            @apply bg-accent/50 text-accent-foreground dark:bg-accent/30;
        }
    }
    .btn-ghost,
    .btn-sm-ghost,
    .btn-lg-ghost,
    .btn-icon-ghost,
    .btn-sm-icon-ghost,
    .btn-lg-icon-ghost {
        &:hover,
        &[aria-pressed="true"] {
            @apply bg-accent text-accent-foreground dark:bg-accent/50;
        }
    }
    .btn-link,
    .btn-sm-link,
    .btn-lg-link,
    .btn-icon-link,
    .btn-sm-icon-link,
    .btn-lg-icon-link {
        @apply text-primary underline-offset-4;
        &:hover,
        &[aria-pressed="true"] {
            @apply hover:underline;
        }
    }
    .btn-destructive,
    .btn-sm-destructive,
    .btn-lg-destructive,
    .btn-icon-destructive,
    .btn-sm-icon-destructive,
    .btn-lg-icon-destructive {
        @apply bg-destructive text-white shadow-xs focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60;
        &:hover,
        &[aria-pressed="true"] {
            @apply bg-destructive/90 dark:bg-destructive/50;
        }
    }
}

/* Button Group */
@layer components {
    .button-group {
        @apply inline-flex w-fit items-stretch isolate;

        > *:focus-visible,
        > :is(.dropdown-menu, .popover, .select) > button:focus-visible {
            @apply relative z-10;
        }

        > hr[role="separator"] {
            @apply w-0 h-auto self-stretch border border-input shrink-0 m-0;
        }

        &:not([data-orientation="vertical"]) {
            > *:not(:first-child),
            > :is(.dropdown-menu, .popover, .select):not(:first-child)
                > button {
                @apply rounded-l-none border-l-0;
            }
            > *:not(:last-child),
            > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
                @apply rounded-r-none;
            }
        }
        &[data-orientation="vertical"] {
            @apply flex-col;

            > hr[role="separator"] {
                @apply w-auto h-px;
            }

            > *:not(:first-child),
            > :is(.dropdown-menu, .popover, .select):not(:first-child)
                > button {
                @apply rounded-t-none border-t-0;
            }
            > *:not(:last-child),
            > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
                @apply rounded-b-none;
            }
        }
    }
}

/* Card */
@layer components {
    .card {
        @apply bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm;

        > header {
            @apply @container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6;
            /* TODO: CLEAN has-data-[slot=card-action] */

            h2 {
                @apply leading-none font-semibold;
            }
            p {
                @apply text-muted-foreground text-sm;
            }
        }
        > section {
            @apply px-6;
        }
        > footer {
            @apply flex items-center px-6 [.border-t]:pt-6;
        }
    }
}

/* Checkbox */
@layer components {
    :is(.form, .field) input[type="checkbox"]:not([role="switch"]),
    .input[type="checkbox"]:not([role="switch"]) {
        @apply appearance-none border-input dark:bg-input/30 checked:bg-primary dark:checked:bg-primary checked:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50;

        &:checked:after {
            @apply content-[''] block size-3.5 bg-primary-foreground;
            mask-image: var(--check-icon);
            mask-size: 0.875rem;
            mask-repeat: no-repeat;
            mask-position: center;
        }
    }
}

/* Collapsible */
@layer components {
    details {
        &::details-content {
            block-size: 0;
            @apply block opacity-0 transition-discrete transition-all;
        }
        &[open]::details-content {
            block-size: auto;
            block-size: calc-size(auto, size);
            @apply opacity-100;
        }
        summary {
            @apply inline-flex items-center cursor-pointer;
        }
    }
    details > summary::-webkit-details-marker {
        display: none;
    }
}

/* Command */
@layer components {
    .command-dialog {
        @apply inset-y-0 opacity-0 transition-all transition-discrete;

        &:is([open], :popover-open) {
            @apply opacity-100;

            &::backdrop {
                @apply opacity-100;
            }
            > * {
                @apply scale-100;
            }

            @starting-style {
                @apply opacity-0;

                &::backdrop {
                    @apply opacity-0;
                }
                > * {
                    @apply scale-95;
                }
            }
        }
        &::backdrop {
            @apply bg-black/50 opacity-0 transition-all transition-discrete;
        }
        > * {
            @apply bg-background fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%_-_2rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-lg border shadow-lg sm:max-w-lg max-h-[min(640px,calc(100%_-_2rem))];
            @apply transition-all scale-95;

            > button,
            > form[method="dialog"] {
                @apply absolute top-4 right-4;
            }
            > button,
            > form[method="dialog"] > button {
                @apply ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground  rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
            }
        }

        .command {
            > header input {
                @apply h-12;
            }
            [role="menu"] {
                @apply px-2;

                [role="menuitem"] {
                    @apply py-3 px-2 [&_svg]:size-5;
                }
                [role="heading"] {
                    @apply px-2 py-1.5 font-medium text-muted-foreground;
                }
            }
        }
    }

    .command {
        > header {
            @apply flex items-center border-b px-3 gap-2;

            svg {
                @apply size-4 shrink-0 opacity-50;
            }
            input {
                @apply placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50;
            }
        }
        [role="menu"] {
            @apply max-h-[300px] overflow-y-auto overflow-x-hidden p-1;

            [role="menuitem"] {
                @apply aria-hidden:hidden relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 hover:bg-accent hover:text-accent-foreground;

                &.active {
                    @apply bg-accent text-accent-foreground;
                }
            }
            [role="heading"] {
                @apply text-muted-foreground flex px-2 py-1.5 text-xs font-medium;
            }
            [role="group"]:not(
                :has([role="menuitem"]:not([aria-hidden="true"]))
            ) {
                @apply hidden;
            }
            [role="separator"] {
                @apply border-border -mx-1 my-1;
            }
            &:not(:has([role="menuitem"]:not([aria-hidden="true"])))::before {
                @apply flex items-center justify-center py-6 px-3 text-sm truncate -m-1;
            }
            &[data-empty]:not(
                    :has([role="menuitem"]:not([aria-hidden="true"]))
                )::before {
                @apply content-[attr(data-empty)];
            }
            &:not([data-empty]):not(
                    :has([role="menuitem"]:not([aria-hidden="true"]))
                )::before {
                @apply content-['No_results_found'];
            }
        }
        &:not([data-command-initialized]) [role="menuitem"] {
            @apply hover:bg-accent hover:text-accent-foreground;
        }
        &:has(> header input:not(:placeholder-shown)) [role="separator"] {
            @apply hidden;
        }
    }
}

/* Dialog (div-based for screen share compatibility) */
@layer components {
    .dialog {
        @apply fixed inset-0 z-50 hidden;

        &.is-open {
            @apply flex items-center justify-center;

            .dialog-backdrop {
                @apply opacity-100;
            }

            .dialog-panel {
                @apply opacity-100 scale-100;
            }
        }

        .dialog-backdrop {
            @apply fixed inset-0 bg-black/50 opacity-0 transition-opacity duration-200;
        }

        .dialog-panel {
            @apply bg-background relative z-10 flex flex-col w-full max-w-[calc(100%_-_2rem)] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg max-h-[calc(100%_-_2rem)] overflow-y-auto;
            @apply opacity-0 scale-95 transition-all duration-200;

            > header {
                @apply flex flex-col gap-2 text-center sm:text-left;

                > h2 {
                    @apply text-lg leading-none font-semibold;
                }
                > p {
                    @apply text-muted-foreground text-sm;
                }
            }
            > section {
                @apply flex-1 -mx-6 px-6;
            }
            > footer {
                @apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end;
            }
            > button {
                @apply absolute top-4 right-4 ring-offset-background focus:ring-ring rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
            }
        }
    }
}

/* Dropdown Menu */
@layer components {
    .dropdown-menu {
        @apply relative inline-flex;

        .dropdown-menu-trigger {
            @apply flex h-9 items-center justify-between gap-2 rounded-md border border-input bg-transparent dark:bg-input/30 px-3 py-2 text-sm shadow-xs 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 whitespace-nowrap;

            &[aria-expanded="true"] {
                @apply ring-2 ring-ring ring-offset-2;
            }
        }

        .dropdown-menu-chevron {
            @apply shrink-0 opacity-50 transition-transform duration-200;
        }

        &:has([aria-expanded="true"]) .dropdown-menu-chevron {
            @apply rotate-180;
        }

        [data-popover] {
            @apply p-1;
            min-width: anchor-size(width);

            [role="menuitem"],
            [role="menuitemcheckbox"],
            [role="menuitemradio"] {
                @apply aria-hidden:hidden [&_svg]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg]:shrink-0 [&_svg]:size-4 aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate;

                &:not([aria-disabled="true"]) {
                    @apply focus-visible:bg-accent focus-visible:text-accent-foreground;
                }

                &.active {
                    @apply bg-accent text-accent-foreground;
                }
            }

            .dropdown-menu-item-content {
                @apply flex items-center gap-2 flex-1 truncate;
            }

            .dropdown-menu-item-destructive {
                @apply text-destructive focus-visible:text-destructive;

                &.active {
                    @apply bg-destructive/10 text-destructive;
                }
            }

            .dropdown-menu-shortcut {
                @apply ml-auto text-xs tracking-widest text-muted-foreground;
            }

            .dropdown-menu-label,
            .dropdown-menu-group-title {
                @apply px-2 py-1.5 text-xs font-medium text-muted-foreground;
            }

            .dropdown-menu-separator {
                @apply -mx-1 my-1 h-px bg-border;
            }

            [role="menu"] [role="heading"] {
                @apply flex px-2 py-1.5 text-sm font-medium;
            }

            [role="separator"] {
                @apply border-border -mx-1 my-1;
            }
        }

        &:not([data-dropdown-menu-initialized]) [data-popover] {
            [role="menuitem"],
            [role="menuitemcheckbox"],
            [role="menuitemradio"] {
                @apply hover:bg-accent hover:text-accent-foreground;
            }
        }
    }
}

/* Field */
@layer components {
    .fieldset {
        @apply flex flex-col gap-6;

        > legend {
            @apply text-base font-medium mb-3;
        }
    }
    .field {
        @apply flex flex-col w-full gap-3 data-[invalid=true]:text-destructive [&>*]:w-full [&>.sr-only]:w-auto;

        h2,
        h3 {
            @apply flex w-fit items-center gap-2 text-sm leading-snug font-medium;
        }
        [role="alert"] {
            @apply text-sm text-destructive font-normal;

            ul {
                @apply ml-4 flex list-disc flex-col gap-1;
            }
        }
        section {
            @apply flex flex-1 flex-col gap-1.5 leading-snug;
        }

        &[data-orientation="horizontal"] {
            @apply flex-row items-center [&>label]:flex-auto has-[>section]:items-start has-[>section]:[&>[type=checkbox],[type=radio]]:mt-px [&_p]:text-balance;
        }
    }
    .field-vertical {
        @apply flex flex-col gap-2;
    }
    .field-horizontal {
        @apply flex items-center gap-4;
    }
    .field-label {
        @apply text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70;
    }
    .field-description {
        @apply text-sm text-muted-foreground;
    }
    .field-error {
        @apply text-sm text-destructive;
    }
    .fieldset legend + p,
    .field > p,
    .field section > p {
        @apply text-muted-foreground text-sm leading-normal font-normal [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4;
    }
    .fieldset legend + p {
        @apply -mt-1.5;
    }
    .field > p {
        @apply last:mt-0 nth-last-2:-mt-1;
    }
    .fieldset-legend {
        @apply text-base font-semibold leading-7;
    }
    .fieldset-description {
        @apply mt-1 text-sm text-muted-foreground;
    }
    .fieldset-fields {
        @apply mt-4 space-y-4;
    }
    .fieldset-base {
        @apply border-none p-0 m-0;
    }
}

/* Input */
@layer components {
    :is(.form, .field) input[type="text"],
    :is(.form, .field) input[type="email"],
    :is(.form, .field) input[type="password"],
    :is(.form, .field) input[type="number"],
    :is(.form, .field) input[type="file"],
    :is(.form, .field) input[type="tel"],
    :is(.form, .field) input[type="url"],
    :is(.form, .field) input[type="search"],
    :is(.form, .field) input[type="date"],
    :is(.form, .field) input[type="datetime-local"],
    :is(.form, .field) input[type="month"],
    :is(.form, .field) input[type="week"],
    :is(.form, .field) input[type="time"],
    .input[type="text"],
    .input[type="email"],
    .input[type="password"],
    .input[type="number"],
    .input[type="file"],
    .input[type="tel"],
    .input[type="url"],
    .input[type="search"],
    .input[type="date"],
    .input[type="datetime-local"],
    .input[type="month"],
    .input[type="week"],
    .input[type="time"] {
        @apply appearance-none file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm;
        @apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px];
        @apply aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive;
    }
}

/* Kbd */
@layer components {
    .kbd {
        @apply bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3;
    }
}

/* Label */
@layer components {
    :is(.form, .field) label,
    .label {
        @apply flex items-center gap-2 text-sm leading-none font-medium select-none;

        &:has(> *:disabled),
        &:has(+ *:disabled) {
            @apply opacity-50 pointer-events-none;
        }
    }
}

/* Popover */
@layer components {
    [data-popover] {
        @apply absolute bg-popover text-popover-foreground overflow-x-hidden overflow-y-auto rounded-md border shadow-md z-50 visible opacity-100 scale-100 min-w-full w-max transition-all;

        &[aria-hidden="true"] {
            @apply invisible opacity-0 scale-95;

            &:not([data-side]),
            &[data-side="bottom"] {
                @apply -translate-y-2;
            }
            &[data-side="top"] {
                @apply translate-y-2;
            }
            &[data-side="left"] {
                @apply translate-x-2;
            }
            &[data-side="right"] {
                @apply -translate-x-2;
            }
        }
        &:not([data-side]),
        &[data-side="bottom"] {
            @apply mt-1 top-full;
        }
        &[data-side="top"] {
            @apply mb-1 bottom-full;
        }
        &[data-side="left"] {
            @apply mr-1 right-full;
        }
        &[data-side="right"] {
            @apply ml-1 left-full;
        }
        &:not([data-side]),
        &[data-side="bottom"],
        &[data-side="top"] {
            &:not([data-align]),
            &[data-align="start"] {
                @apply left-0;
            }
            &[data-align="end"] {
                @apply right-0;
            }
            &[data-align="center"] {
                @apply left-1/2 -translate-x-1/2;
            }
        }
        &[data-side="left"],
        &[data-side="right"] {
            &:not([data-align]),
            &[data-align="start"] {
                @apply top-0;
            }
            &[data-align="end"] {
                @apply bottom-0;
            }
            &[data-align="center"] {
                @apply top-1/2 -translate-y-1/2;
            }
        }
    }
    .popover {
        @apply relative inline-flex;

        [data-popover] {
            @apply p-4;
        }
    }
    .popover-trigger {
        @apply inline-flex items-center cursor-pointer bg-transparent border-0 p-0 text-foreground;
    }
}

/* Radio */
@layer components {
    :is(.form, .field) input[type="radio"],
    .input[type="radio"] {
        @apply appearance-none border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 relative;

        &:checked:before {
            @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 content-[''] rounded-full size-2 bg-primary;
        }
    }
}

/* Radio Group */
@layer components {
    .radio-group {
        @apply flex flex-col gap-3;
    }
    .radio-group-fieldset {
        @apply grid gap-3;
    }
    .radio-group-label {
        @apply flex cursor-pointer items-center gap-2 text-sm font-normal;
    }
    .radio-group-label-disabled {
        @apply cursor-not-allowed opacity-50;
    }
    .radio-group-label-content {
        @apply flex flex-col gap-0.5;
    }
    .radio-group-label-text {
        @apply text-sm font-medium;
    }
    .radio-group-label-description {
        @apply text-muted-foreground text-sm;
    }
    .radio-group-errors {
        @apply flex flex-col gap-1;
    }
    .radio-group-error {
        @apply text-destructive text-sm;
    }
}

/* Range */
@layer components {
    :is(.form, .field) input[type="range"],
    .input[type="range"] {
        @apply appearance-none flex items-center p-0 outline-none disabled:pointer-events-none disabled:opacity-50;
        --slider-value: 20%;

        &:hover:not(:disabled),
        &:focus-visible:not(:disabled) {
            &::-webkit-slider-thumb {
                @apply ring-4;
            }
            &::-moz-range-thumb {
                @apply ring-4;
            }
            &::-ms-thumb {
                @apply ring-4;
            }
        }

        &::-webkit-slider-thumb {
            @apply appearance-none border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm -mt-1.25;
        }
        &::-webkit-slider-runnable-track {
            @apply appearance-none rounded-full h-1.5 w-full;
            background: linear-gradient(
                to right,
                var(--primary) var(--slider-value),
                var(--muted) var(--slider-value)
            );
        }
        &::-moz-range-thumb {
            @apply appearance-none border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm -mt-1.25;
        }
        &::-moz-range-track {
            @apply appearance-none rounded-full h-1.5 w-full;
            background: linear-gradient(
                to right,
                var(--primary) var(--slider-value),
                var(--muted) var(--slider-value)
            );
        }
        &::-ms-thumb {
            @apply appearance-none border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm -mt-1.25;
        }
        &::-ms-track {
            @apply appearance-none rounded-full h-1.5 w-full;
        }
        &::-ms-fill-lower {
            @apply bg-primary rounded-full;
        }
        &::-ms-fill-upper {
            @apply bg-muted rounded-full;
        }
    }
}

/* Select */
@layer components {
    :is(.form, .field) select,
    select.select {
        @apply appearance-none border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent pl-3 pr-9 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-9;
        background-image: var(--chevron-down-icon-50);
        background-repeat: no-repeat;
        background-position: center right 0.75rem;
        background-size: 1rem;

        option,
        optgroup {
            @apply bg-popover text-popover-foreground;
        }
    }

    /* Custom select component */
    *:not(select).select {
        @apply relative inline-flex w-full;

        .select-trigger {
            @apply flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent dark:bg-input/30 px-3 py-1 text-sm shadow-xs 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-value {
            @apply truncate;
        }

        .select-icon {
            @apply ml-2 size-4 shrink-0 opacity-50;
        }

        .select-popover,
        [data-popover] {
            @apply absolute z-50 mt-1 w-full rounded-md border bg-popover text-popover-foreground shadow-md outline-none p-1;

            &[aria-hidden="true"] {
                @apply hidden;
            }

            .select-option,
            [role="option"] {
                @apply aria-hidden:hidden [&_svg]:text-muted-foreground relative flex cursor-pointer items-center gap-2 rounded-sm pl-2 py-1.5 pr-7.5 text-sm outline-hidden select-none [&_svg]:shrink-0 [&_svg]:size-4 aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate;

                &[aria-selected="true"] {
                    background-image: var(--check-icon);
                    background-repeat: no-repeat;
                    background-position: center right 0.5rem;
                    background-size: 0.875rem;
                }
                &.active,
                &:focus-visible {
                    @apply bg-accent text-accent-foreground;
                }
            }

            .select-option-disabled {
                @apply cursor-not-allowed opacity-50;
            }

            .select-group-label,
            [role="listbox"] [role="heading"] {
                @apply flex text-muted-foreground px-2 py-1.5 text-xs font-medium;
            }

            .select-group:not(:has(.select-option:not([aria-hidden="true"]))),
            [role="listbox"]
                [role="group"]:not(
                    :has([role="option"]:not([aria-hidden="true"]))
                ) {
                @apply hidden;
            }

            .select-separator,
            [role="separator"] {
                @apply border-border -mx-1 my-1 h-px bg-muted;
            }

            > header {
                @apply flex h-9 items-center gap-2 border-b px-3 -mx-1 -mt-1 mb-1;

                svg {
                    @apply size-4 shrink-0 opacity-50;
                }
                input[role="combobox"] {
                    @apply placeholder:text-muted-foreground flex h-10 flex-1 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50 min-w-0;
                }
            }

            .select-listbox,
            [role="listbox"] {
                @apply max-h-[300px] overflow-y-auto;
            }

            [role="listbox"]:not(
                    :has([data-value]:not([aria-hidden="true"]))
                )::before {
                @apply flex items-center justify-center p-6 text-sm truncate;
            }
            [role="listbox"][data-empty]:not(
                    :has([data-value]:not([aria-hidden="true"]))
                )::before {
                @apply content-[attr(data-empty)];
            }
            [role="listbox"]:not([data-empty]):not(
                    :has([data-value]:not([aria-hidden="true"]))
                )::before {
                @apply content-['No_results_found'];
            }
        }

        .select-popover:has(> header input:not(:placeholder-shown))
            .select-separator,
        [data-popover]:has(> header input:not(:placeholder-shown))
            [role="separator"] {
            @apply hidden;
        }

        &:not([data-select-initialized]) .select-popover .select-option,
        &:not([data-select-initialized]) [data-popover] [role="option"] {
            @apply hover:bg-accent hover:text-accent-foreground;
        }
    }
}

/* LiveSelect - Dynamic searchable selection */
@layer components {
    .live-select {
        @apply relative w-full;
    }

    .live-select-disabled {
        @apply opacity-50 pointer-events-none;
    }

    /* Tags container */
    .live-select-tags {
        @apply flex flex-wrap gap-1 mb-2;
    }

    .live-select-tag {
        @apply inline-flex items-center gap-1 px-2 py-1 text-sm bg-secondary text-secondary-foreground rounded-md;
    }

    .live-select-tag-sticky {
        @apply bg-primary/20 text-primary;
    }

    .live-select-tag-label {
        @apply truncate max-w-[150px];
    }

    .live-select-tag-remove {
        @apply flex-shrink-0 rounded-sm opacity-70 hover:opacity-100 hover:bg-secondary-foreground/20 transition-opacity cursor-pointer;
    }

    /* Input container */
    .live-select-input-container {
        @apply relative flex items-center;
    }

    .live-select-input {
        @apply flex h-9 w-full rounded-md border border-input bg-transparent dark:bg-input/30 px-3 py-1 text-sm shadow-xs ring-offset-background;
        @apply placeholder:text-muted-foreground;
        @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;
    }

    .live-select-clear {
        @apply absolute right-2 p-1 rounded-sm opacity-50 hover:opacity-100 hover:bg-muted transition-opacity cursor-pointer;
    }

    /* Dropdown */
    .live-select-dropdown {
        @apply absolute z-50 top-full left-0 right-0 mt-1 max-h-60 overflow-auto;
        @apply rounded-md border bg-popover text-popover-foreground shadow-md;
        animation: live-select-dropdown-in 0.15s ease-out;

        &[hidden] {
            @apply hidden;
        }
    }

    @keyframes live-select-dropdown-in {
        from {
            opacity: 0;
            transform: scale(0.95);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .live-select-option {
        @apply relative flex cursor-pointer select-none items-center px-3 py-2 text-sm outline-none;
        @apply hover:bg-accent hover:text-accent-foreground;
        @apply transition-colors;
    }

    .live-select-option[data-active="true"] {
        @apply bg-accent text-accent-foreground;
    }

    .live-select-option-selected {
        @apply bg-primary/10;

        &::after {
            content: "✓";
            @apply absolute right-3 text-primary;
        }
    }

    .live-select-option-disabled {
        @apply opacity-50 cursor-not-allowed pointer-events-none;
    }

    /* Empty state inside dropdown */
    .live-select-empty-item {
        @apply px-3 py-6 text-center text-sm text-muted-foreground;
    }
}

/* Switch */
@layer components {
    .switch {
        @apply appearance-none focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50;
        @apply bg-input dark:bg-input/80 checked:bg-primary dark:checked:bg-primary;
        @apply before:content-[''] before:pointer-events-none before:block before:size-4 before:rounded-full before:ring-0 before:transition-all;
        @apply before:bg-background dark:before:bg-foreground;
        @apply dark:checked:before:bg-primary-foreground checked:before:ms-3.5;
    }
}

/* Tables */
@layer components {
    .table {
        @apply w-full caption-bottom text-sm;
        thead {
            @apply [&_tr]:border-b;
        }
        tbody {
            @apply [&_tr:last-child]:border-0;
        }
        tfoot {
            @apply bg-muted/50 border-t font-medium [&>tr]:last:border-b-0;
        }
        tr {
            @apply hover:bg-muted/50 border-b transition-colors;
        }
        th {
            @apply text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px];
        }
        td {
            @apply p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px];
        }
        caption {
            @apply text-muted-foreground mt-4 text-sm;
        }
    }
}

/* Tabs */
@layer components {
    .tabs {
        @apply flex flex-col gap-2;

        [role="tablist"] {
            @apply bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px];

            [role="tab"] {
                @apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground dark:text-muted-foreground inline-flex h-[calc(100%_-_1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer;

                &[aria-selected="true"] {
                    @apply bg-background dark:text-foreground dark:border-input dark:bg-input/30 shadow-sm;
                }
            }
        }
        [role="tabpanel"] {
            @apply flex-1 outline-none;
        }
    }
}

/* Textarea */
@layer components {
    :is(.form, .field) textarea,
    .textarea {
        @apply border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm;
    }
}

/* Toasts */
@layer components {
    .toaster {
        @apply fixed bottom-0 p-4 pointer-events-none z-50 w-full sm:max-w-90 flex flex-col-reverse;

        &:not([data-align]),
        &[data-align="end"] {
            @apply right-0;
        }
        &[data-align="start"] {
            @apply left-0;
        }
        &[data-align="center"] {
            @apply left-1/2 -translate-x-1/2;
        }
        .toast {
            @apply pointer-events-auto w-full mt-4 animate-[toast-up_0.3s_ease-in-out] grid  grid-rows-[1fr] transition-[grid-template-rows,opacity,margin] duration-300 ease-in-out;

            .toast-content {
                @apply text-popover-foreground text-[13px] bg-popover border shadow-lg rounded-lg overflow-hidden flex gap-2.5 p-3 items-center;

                svg {
                    @apply size-4 shrink-0;
                }
                section {
                    h2 {
                        @apply font-medium tracking-tight;
                    }
                    p {
                        @apply text-muted-foreground break-all;
                    }
                }
                footer {
                    @apply ml-auto flex flex-col gap-2;

                    [data-toast-action],
                    [data-toast-cancel] {
                        @apply h-6 px-2.5 text-xs;
                    }
                }
            }
            &[aria-hidden="true"] {
                @apply grid-rows-[0fr] opacity-0 m-0 border-0 p-0 overflow-hidden;

                .toast-content {
                    @apply border-0;
                }
            }
        }
    }
}
@keyframes toast-up {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
}

/* Spin animation for spinners/loaders */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@utility animate-spin {
    animation: spin 1s linear infinite;
}

/* Tooltip */
@layer components {
    .tooltip-trigger {
        @apply relative inline-flex;

        .tooltip-content {
            @apply absolute bg-primary text-primary-foreground z-[60] truncate max-w-xs w-fit rounded-md px-3 py-1.5 text-xs invisible opacity-0 scale-95 transition-all pointer-events-none whitespace-nowrap;
        }

        &:hover .tooltip-content,
        &:focus-within .tooltip-content {
            &:not([aria-hidden="true"]) {
                @apply visible opacity-100 scale-100;
            }
        }

        /* Top positioning (default) */
        &:not([data-side]) .tooltip-content,
        &[data-side="top"] .tooltip-content,
        &[data-side="auto"]:not([data-computed-side]) .tooltip-content,
        &[data-side="auto"][data-computed-side="top"] .tooltip-content {
            @apply bottom-full left-1/2 -translate-x-1/2 mb-2;
        }
        /* Bottom positioning */
        &[data-side="bottom"] .tooltip-content,
        &[data-side="auto"][data-computed-side="bottom"] .tooltip-content {
            @apply top-full left-1/2 -translate-x-1/2 mt-2;
        }
        /* Left positioning */
        &[data-side="left"] .tooltip-content,
        &[data-side="auto"][data-computed-side="left"] .tooltip-content {
            @apply right-full top-1/2 -translate-y-1/2 mr-2;
        }
        /* Right positioning */
        &[data-side="right"] .tooltip-content,
        &[data-side="auto"][data-computed-side="right"] .tooltip-content {
            @apply left-full top-1/2 -translate-y-1/2 ml-2;
        }
        /* Alignment overrides for top/bottom */
        &:not([data-side]),
        &[data-side="top"],
        &[data-side="bottom"],
        &[data-side="auto"]:not([data-computed-side]),
        &[data-side="auto"][data-computed-side="top"],
        &[data-side="auto"][data-computed-side="bottom"] {
            &[data-align="start"] .tooltip-content {
                @apply left-0 translate-x-0;
            }
            &[data-align="end"] .tooltip-content {
                @apply left-auto right-0 translate-x-0;
            }
        }
        /* Alignment overrides for left/right */
        &[data-side="left"],
        &[data-side="right"],
        &[data-side="auto"][data-computed-side="left"],
        &[data-side="auto"][data-computed-side="right"] {
            &[data-align="start"] .tooltip-content {
                @apply top-0 translate-y-0;
            }
            &[data-align="end"] .tooltip-content {
                @apply top-auto bottom-0 translate-y-0;
            }
        }
    }
}

/* Accordion */
@layer components {
    .accordion {
        @apply w-full divide-y divide-border;
    }
    .accordion-item {
        @apply border-b border-border;

        &:last-child {
            @apply border-b-0;
        }
        &[data-state="open"] .accordion-chevron {
            @apply rotate-180;
        }
    }
    .accordion-disabled {
        @apply opacity-50 pointer-events-none;
    }
    .accordion-header {
        @apply flex;
    }
    .accordion-trigger {
        @apply flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left cursor-pointer [&[disabled]]:pointer-events-none [&[disabled]]:opacity-50;

        &[aria-expanded="true"] .accordion-chevron {
            @apply rotate-180;
        }
    }
    .accordion-chevron {
        @apply size-4 shrink-0 text-muted-foreground transition-transform duration-200;
    }
    .accordion-content {
        @apply overflow-hidden text-sm;

        &[hidden] {
            @apply hidden;
        }
    }
    .accordion-content-inner {
        @apply pb-4 pt-0;
    }
}

/* Breadcrumb */
@layer components {
    .breadcrumb {
        @apply flex;
    }
    .breadcrumb-list {
        @apply flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5;
    }
    .breadcrumb-item {
        @apply inline-flex items-center gap-1.5;
    }
    .breadcrumb-separator {
        @apply text-muted-foreground [&>svg]:size-3.5;
    }
    .breadcrumb-link {
        @apply transition-colors hover:text-foreground rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
    }
    .breadcrumb-page {
        @apply font-normal text-foreground;
    }
}

/* Dropdown */
@layer components {
    .dropdown {
        @apply relative inline-flex;
    }
    .dropdown-trigger {
        @apply inline-flex items-center gap-2 cursor-pointer bg-transparent border rounded-md px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors;
    }
    .dropdown-chevron {
        @apply size-4 opacity-50 transition-transform duration-200;
    }
    .dropdown-open .dropdown-chevron {
        @apply rotate-180;
    }
    .dropdown-content {
        @apply absolute z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md;
        @apply hidden opacity-0 scale-95 transition-all flex-col;
    }
    .dropdown-open .dropdown-content {
        @apply flex opacity-100 scale-100;
    }
    .dropdown-content[aria-hidden="false"] {
        @apply flex opacity-100 scale-100;
    }
    .dropdown-bottom {
        @apply top-full mt-1;
    }
    .dropdown-top {
        @apply bottom-full mb-1;
    }
    .dropdown-left {
        @apply right-full mr-1;
    }
    .dropdown-right {
        @apply left-full ml-1;
    }
    .dropdown-align-start {
        @apply left-0;
    }
    .dropdown-align-center {
        @apply left-1/2 -translate-x-1/2;
    }
    .dropdown-align-end {
        @apply right-0;
    }
    .dropdown-item {
        @apply relative flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground;

        &:disabled {
            @apply opacity-50 pointer-events-none;
        }
    }
    .dropdown-item-icon {
        @apply flex-shrink-0 w-4 h-4 mr-2 flex items-center justify-center text-muted-foreground [&>span]:size-4 [&>span>svg]:size-4;
    }
    .dropdown-item-icon-placeholder {
        @apply w-4 mr-2;
    }
    .dropdown-item-label {
        @apply flex-1 text-left;
    }
    .dropdown-item-shortcut {
        @apply flex-shrink-0 ml-auto pl-4 text-[10px] tracking-widest text-muted-foreground bg-muted px-1.5 py-0.5 rounded font-mono;
    }
    .dropdown-item-destructive {
        @apply text-destructive focus:text-destructive hover:text-destructive focus:bg-destructive/10 hover:bg-destructive/10;
    }
    .dropdown-item-disabled {
        @apply opacity-50 pointer-events-none;
    }
    .dropdown-label {
        @apply px-2 py-1.5 text-sm font-semibold;
    }
    .dropdown-separator {
        @apply -mx-1 my-1 h-px bg-border;
    }
}

/* Empty State */
@layer components {
    .empty,
    .empty-outline {
        @apply flex flex-col items-center justify-center py-12 px-4 text-center;

        header {
            @apply flex flex-col items-center gap-2;
        }
        h3 {
            @apply text-lg font-semibold;
        }
        p {
            @apply text-sm text-muted-foreground max-w-sm;
        }
        section {
            @apply mt-6 flex flex-wrap items-center justify-center gap-2;
        }
    }
    .empty-icon {
        @apply mb-4 text-muted-foreground [&>svg]:size-12;
    }
    .empty-outline {
        @apply border-2 border-dashed border-border rounded-lg;
    }
}

/* Header */
@layer components {
    .header {
        @apply flex flex-col gap-1;

        &.header-with-actions {
            @apply flex-row items-start justify-between gap-4;
        }
    }
    .header-title {
        @apply text-2xl font-semibold tracking-tight;
    }
    .header-subtitle {
        @apply text-sm text-muted-foreground;
    }
    .header-actions {
        @apply flex items-center gap-2 shrink-0;
    }
}

/* Pagination */
@layer components {
    .pagination {
        @apply flex justify-center;
    }
    .pagination-list {
        @apply flex flex-row items-center gap-1;
    }
    .pagination-btn {
        @apply inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 w-9 cursor-pointer;
    }
    .pagination-prev,
    .pagination-next {
        @apply gap-1 px-2.5;
    }
    .pagination-page {
        @apply border border-input bg-background shadow-sm;
    }
    .pagination-active {
        @apply bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground;
    }
    .pagination-ellipsis {
        @apply flex h-9 w-9 items-center justify-center text-muted-foreground;
    }
}

/* Progress */
@layer components {
    .progress {
        @apply relative h-2 w-full overflow-hidden rounded-full bg-primary/20;
    }
    .progress-indicator {
        @apply h-full bg-primary transition-all duration-300 ease-in-out rounded-full;
    }
    .progress-sm {
        @apply h-1;
    }
    .progress-lg {
        @apply h-3;
    }
    .progress-xl {
        @apply h-4;
    }
}

/* Skeleton */
@layer components {
    .skeleton {
        @apply animate-pulse rounded-md bg-primary/10;
    }
}

/* Spinner */
@layer components {
    .spinner {
        @apply inline-flex items-center gap-2;
    }
    .spinner-text {
        @apply text-sm;
    }
}

/* Toast Component (additional styles) */
@layer components {
    .toast-container {
        @apply fixed bottom-0 right-0 p-4 pointer-events-none z-50 w-full max-w-sm flex flex-col gap-2;
    }
    .toast {
        @apply pointer-events-auto w-full bg-popover text-popover-foreground border shadow-lg rounded-lg overflow-hidden flex items-start gap-3 p-4 transition-all;
    }
    .toast-content {
        @apply flex-1 min-w-0;
    }
    .toast-title {
        @apply font-medium text-sm;
    }
    .toast-description {
        @apply text-sm text-muted-foreground mt-1;
    }
    .toast-action {
        @apply shrink-0;
    }
    .toast-close {
        @apply shrink-0 rounded-md p-1 text-muted-foreground hover:text-foreground transition-colors;
    }
    .toast-success {
        @apply border-green-500/50 bg-green-50 dark:bg-green-950/50;

        .toast-title {
            @apply text-green-700 dark:text-green-400;
        }
    }
    .toast-destructive {
        @apply border-destructive/50 bg-destructive/10;

        .toast-title {
            @apply text-destructive;
        }
    }
    .toast-show {
        @apply opacity-100 translate-y-0;
    }
    .toast-hide {
        @apply opacity-0 translate-y-2;
    }
    .toast-hidden {
        @apply hidden;
    }
}

/* Avatar */
@layer components {
    .avatar {
        @apply relative flex shrink-0 overflow-hidden;
    }
    .avatar-circle {
        @apply rounded-full;
    }
    .avatar-square {
        @apply rounded-md;
    }
    .avatar-sm {
        @apply size-8 text-xs;
    }
    .avatar-md {
        @apply size-10 text-sm;
    }
    .avatar-lg {
        @apply size-12 text-base;
    }
    .avatar-xl {
        @apply size-16 text-lg;
    }
    .avatar-image {
        @apply aspect-square size-full object-cover;
    }
    .avatar-fallback {
        @apply flex size-full items-center justify-center bg-muted text-muted-foreground font-medium [&>span]:flex [&>span]:items-center [&>span]:justify-center [&_svg]:size-[60%];
    }
    .avatar-fallback-hidden {
        @apply hidden;
    }
    .avatar-group {
        @apply flex -space-x-3;

        .avatar {
            @apply ring-2 ring-background;
        }
    }
}

/* Carousel */
@layer components {
    .carousel {
        @apply relative w-full;
    }
    .carousel-viewport {
        @apply flex flex-row flex-nowrap overflow-x-auto snap-x snap-mandatory scroll-smooth;
        -ms-overflow-style: none;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }
        &:focus {
            @apply outline-none ring-2 ring-ring ring-offset-2 rounded-lg;
        }
    }
    .carousel-item {
        @apply flex-shrink-0 flex-grow-0 snap-start w-full min-w-full;
    }
    .carousel-prev,
    .carousel-next {
        @apply absolute top-1/2 -translate-y-1/2 z-10 size-8 rounded-full bg-background/80 border shadow-sm flex items-center justify-center cursor-pointer transition-all hover:bg-background hover:scale-110 disabled:opacity-50 disabled:cursor-not-allowed;
    }
    .carousel-prev {
        @apply left-2;
    }
    .carousel-next {
        @apply right-2;
    }
    .carousel-indicators {
        @apply flex justify-center gap-2 mt-4;
    }
    .carousel-indicator {
        @apply size-2 rounded-full bg-muted transition-all cursor-pointer;

        &:hover {
            @apply bg-muted-foreground/50;
        }
    }
    .carousel-indicator-active {
        @apply bg-primary w-6;
    }
}

/* Filter Bar */
@layer components {
    .filter-bar {
        @apply mb-6 space-y-4;
    }
    .filter-bar-grid {
        @apply grid gap-4;
    }
    .filter-bar-cols-1 {
        @apply grid-cols-1;
    }
    .filter-bar-cols-2 {
        @apply grid-cols-1 sm:grid-cols-2;
    }
    .filter-bar-cols-3 {
        @apply grid-cols-1 sm:grid-cols-2 lg:grid-cols-3;
    }
    .filter-bar-cols-4 {
        @apply grid-cols-1 sm:grid-cols-2 lg:grid-cols-4;
    }
    .filter-bar-cols-5 {
        @apply grid-cols-1 sm:grid-cols-2 lg:grid-cols-5;
    }
    .filter-bar-cols-6 {
        @apply grid-cols-1 sm:grid-cols-2 lg:grid-cols-6;
    }
    .filter-bar-item {
        @apply w-full p-3;
    }
    .filter-bar-actions {
        @apply flex justify-end;
    }
    .filter-bar-clear {
        @apply text-muted-foreground inline-flex items-center gap-2 text-sm transition-colors hover:text-foreground cursor-pointer;
    }
}

/* Input Group */
@layer components {
    .input-group {
        @apply relative;
    }
    .input-group-prefix,
    .input-group-suffix {
        @apply absolute top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none;
    }
    .input-group-prefix {
        @apply left-3;
    }
    .input-group-suffix {
        @apply right-3;
    }
    .input-group-prefix-icon,
    .input-group-suffix-icon {
        @apply absolute top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none [&_svg]:size-4;
    }
    .input-group-prefix-icon {
        @apply left-3;
    }
    .input-group-suffix-icon {
        @apply right-3;
    }
    .input-group-prefix-interactive,
    .input-group-suffix-interactive {
        @apply absolute top-1/2 -translate-y-1/2 pointer-events-auto;
    }
    .input-group-prefix-interactive {
        @apply left-2;
    }
    .input-group-suffix-interactive {
        @apply right-2;
    }
    .input-group-text {
        @apply text-sm;
    }
    .input-group-footer {
        @apply absolute bottom-0 left-0 right-0 flex items-center gap-2 p-3 border-t bg-background/50;
    }
    .input-group-horizontal {
        @apply flex;
    }
    .input-group-label {
        @apply inline-flex items-center px-3 text-sm text-muted-foreground bg-muted border border-input;
    }
    .input-group-label-start {
        @apply rounded-l-md border-r-0;
    }
    .input-group-label-end {
        @apply rounded-r-md border-l-0;
    }
}

/* Item */
@layer components {
    .item {
        @apply flex items-center gap-3 p-3 rounded-lg transition-colors;
    }
    .item-default {
        @apply border border-transparent;
    }
    .item-outline {
        @apply border border-border;
    }
    .item-muted {
        @apply border border-transparent bg-muted/50;
    }
    .item-compact {
        @apply py-2;
    }
    .item-leading {
        @apply flex-shrink-0;
    }
    .item-content {
        @apply flex-1 min-w-0;
    }
    .item-title {
        @apply font-medium text-sm leading-tight truncate;
    }
    .item-description {
        @apply text-sm text-muted-foreground mt-0.5 line-clamp-2;
    }
    .item-trailing {
        @apply flex-shrink-0 flex items-center gap-2;
    }
    .item-icon-box {
        @apply size-10 rounded-md bg-muted flex items-center justify-center text-muted-foreground [&_svg]:size-5;
    }
    .item-icon-inline {
        @apply text-muted-foreground [&_svg]:size-5;
    }

    /* Interactive item states */
    a.item,
    button.item {
        @apply cursor-pointer hover:bg-accent/50;

        &:focus-visible {
            @apply outline-none ring-2 ring-ring ring-offset-2;
        }
    }
}

/* Loading State */
@layer components {
    .loading-state {
        @apply flex flex-col items-center justify-center gap-4 py-12;
    }
    .loading-state-message {
        @apply text-sm text-muted-foreground;
    }
}

/* Simple Form - auto-styling for child elements */
@layer components {
    .form {
        /* Labels */
        & label {
            @apply text-sm font-medium leading-none;

            &:has(+ *:disabled) {
                @apply cursor-not-allowed opacity-70;
            }
        }

        /* Text inputs */
        & input[type="text"],
        & input[type="email"],
        & input[type="password"],
        & input[type="number"],
        & input[type="tel"],
        & input[type="url"],
        & input[type="search"],
        & input[type="date"],
        & input[type="datetime-local"],
        & input[type="month"],
        & input[type="week"],
        & input[type="time"] {
            @apply flex h-10 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;
        }

        /* File input */
        & input[type="file"] {
            @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 file:text-foreground 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 */
        & 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 */
        & 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;
        }

        /* Checkbox */
        & input[type="checkbox"]:not([role="switch"]) {
            @apply size-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:bg-primary checked:text-primary-foreground accent-primary;
        }

        /* Radio */
        & input[type="radio"] {
            @apply size-4 shrink-0 rounded-full border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:border-primary accent-primary;
        }

        /* Range input */
        & input[type="range"] {
            @apply w-full h-2 bg-secondary rounded-lg appearance-none cursor-pointer accent-primary;
        }

        /* Switch (checkbox with role="switch") */
        & input[type="checkbox"][role="switch"] {
            @apply 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 bg-input checked:bg-primary appearance-none;

            &::before {
                content: "";
                @apply pointer-events-none block size-5 rounded-full bg-background shadow-lg ring-0 transition-transform translate-x-0;
            }

            &:checked::before {
                @apply translate-x-5;
            }
        }
    }
}

/* Nav Pills */
@layer components {
    .nav-pills {
        @apply relative;
    }
    .nav-pills-desktop {
        @apply hidden sm:flex items-center gap-1 p-1 bg-muted rounded-lg;
    }
    .nav-pills-item {
        @apply inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md transition-colors text-muted-foreground hover:text-foreground;
    }
    .nav-pills-item-active {
        @apply bg-background text-foreground shadow-sm;
    }
    .nav-pills-mobile {
        @apply relative sm:hidden;
    }
    .nav-pills-mobile-trigger {
        @apply w-full flex items-center justify-between px-4 py-2 text-sm font-medium bg-background border rounded-lg cursor-pointer;
    }
    .nav-pills-mobile-chevron {
        @apply size-4 transition-transform;
    }
    .nav-pills-mobile-trigger[aria-expanded="true"] .nav-pills-mobile-chevron {
        @apply rotate-180;
    }
    .nav-pills-mobile-menu {
        @apply absolute z-50 w-full mt-1 py-1 bg-popover border rounded-lg shadow-lg;

        &[aria-hidden="true"] {
            @apply hidden;
        }
    }
    .nav-pills-mobile-item {
        @apply flex items-center gap-2 px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent;
    }
    .nav-pills-mobile-item-active {
        @apply text-foreground bg-accent;
    }
}

/* Sidebar */
@layer components {
    .sidebar {
        --sidebar-width: 16rem;
        --sidebar-mobile-width: 18rem;
        --sidebar-height: 16rem;

        /* Backdrop overlay */
        & > .sidebar-backdrop {
            @apply fixed inset-0 bg-black/50 z-40 opacity-0 pointer-events-none transition-opacity duration-200;
        }

        &[aria-hidden="false"] > .sidebar-backdrop {
            @apply opacity-100 pointer-events-auto cursor-pointer;
        }

        /* The aside contains the actual sidebar content */
        & > aside {
            @apply fixed z-50 flex flex-col bg-sidebar text-sidebar-foreground transition-transform duration-200;

            /* Left/Right positioning */
            &[data-side="left"],
            .sidebar[data-side="left"] > & {
                @apply left-0 inset-y-0 border-r border-sidebar-border w-[var(--sidebar-width)];
            }
            &[data-side="right"],
            .sidebar[data-side="right"] > & {
                @apply right-0 inset-y-0 border-l border-sidebar-border w-[var(--sidebar-width)];
            }
            /* Top/Bottom positioning */
            &[data-side="top"],
            .sidebar[data-side="top"] > & {
                @apply top-0 inset-x-0 border-b border-sidebar-border h-[var(--sidebar-height)];
            }
            &[data-side="bottom"],
            .sidebar[data-side="bottom"] > & {
                @apply bottom-0 inset-x-0 border-t border-sidebar-border h-[var(--sidebar-height)];
            }
        }

        /* Position based on parent data-side */
        &[data-side="left"] > aside {
            @apply left-0 inset-y-0 border-r border-sidebar-border w-[var(--sidebar-width)];
        }
        &[data-side="right"] > aside {
            @apply right-0 inset-y-0 border-l border-sidebar-border w-[var(--sidebar-width)];
        }
        &[data-side="top"] > aside {
            @apply top-0 inset-x-0 border-b border-sidebar-border h-[var(--sidebar-height)];
        }
        &[data-side="bottom"] > aside {
            @apply bottom-0 inset-x-0 border-t border-sidebar-border h-[var(--sidebar-height)];
        }

        /* Hidden state - translate off screen */
        &[aria-hidden="true"] {
            &[data-side="left"] > aside {
                @apply -translate-x-full;
            }
            &[data-side="right"] > aside {
                @apply translate-x-full;
            }
            &[data-side="top"] > aside {
                @apply -translate-y-full;
            }
            &[data-side="bottom"] > aside {
                @apply translate-y-full;
            }
        }

        /* Mobile state */
        @media (max-width: 767px) {
            &[data-side="left"] > aside,
            &[data-side="right"] > aside {
                @apply w-[var(--sidebar-mobile-width)] max-w-[80vw];
            }
            &[data-side="top"] > aside,
            &[data-side="bottom"] > aside {
                @apply h-[var(--sidebar-height)] max-h-[60vh];
            }
        }

        /* Nav structure inside aside */
        & > aside > nav {
            @apply flex flex-col h-full overflow-hidden;

            & > header {
                @apply flex-shrink-0 p-4 border-b border-sidebar-border;
            }

            & > section {
                @apply flex-1 overflow-y-auto p-2;
            }

            & > footer {
                @apply flex-shrink-0 p-2 border-t border-sidebar-border mt-auto;
            }
        }

        /* Horizontal nav layout for top/bottom */
        &[data-side="top"] > aside > nav,
        &[data-side="bottom"] > aside > nav {
            @apply flex-row;

            & > header {
                @apply border-b-0 border-r;
            }

            & > section {
                @apply flex-row overflow-x-auto overflow-y-hidden;
            }

            & > footer {
                @apply border-t-0 border-l mt-0 ml-auto;
            }
        }

        /* Group styling */
        & [role="group"] {
            @apply mb-4;

            & > h3 {
                @apply px-2 py-1.5 text-xs font-semibold text-sidebar-foreground/60 uppercase tracking-wider;
            }

            & > ul {
                @apply space-y-0.5;
            }
        }

        /* Horizontal group styling for top/bottom */
        &[data-side="top"] [role="group"],
        &[data-side="bottom"] [role="group"] {
            @apply mb-0 mr-4 flex items-center gap-2;

            & > ul {
                @apply flex flex-row space-y-0 space-x-1;
            }
        }

        /* Item styling */
        & li > a {
            @apply flex items-center gap-3 px-3 py-2 text-sm rounded-md transition-colors text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground cursor-pointer;

            &[aria-current="page"] {
                @apply bg-sidebar-accent text-sidebar-accent-foreground font-medium;
            }

            &[data-variant="outline"] {
                @apply border border-sidebar-border;
            }

            &[data-size="sm"] {
                @apply px-2 py-1.5 text-xs;
            }

            &[data-size="lg"] {
                @apply px-4 py-3;
            }
        }

        /* Submenu styling */
        & details {
            & > summary {
                @apply flex items-center justify-between px-3 py-2 text-sm rounded-md cursor-pointer transition-colors text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground list-none;

                &::marker,
                &::-webkit-details-marker {
                    display: none;
                }

                &::after {
                    content: "";
                    @apply size-4 bg-current opacity-50 transition-transform;
                    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
                        center / contain no-repeat;
                }
            }

            &[open] > summary::after {
                @apply rotate-180;
            }

            & > ul {
                @apply ml-4 mt-0.5 space-y-0.5 border-l border-sidebar-border pl-2;
            }
        }

        /* Separator */
        & hr {
            @apply my-2 border-sidebar-border;
        }
    }
}

/* Tab Nav */
@layer components {
    .tab-nav {
        @apply inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground;
    }
    .tab-nav-item {
        @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;
    }
    .tab-nav-item-active {
        @apply bg-background text-foreground shadow-sm;
    }
    .tab-nav-icon {
        @apply size-4 mr-2;
    }
}

/* Theme Switcher */
@layer components {
    .theme-switcher-dark {
        @apply hidden;
    }
    .theme-switcher-light {
        @apply block;
    }

    .dark .theme-switcher-dark {
        @apply block;
    }
    .dark .theme-switcher-light {
        @apply hidden;
    }
}

/* Range Slider (dual-handle) */
@layer components {
    .range-slider {
        @apply relative w-full select-none;
        /* Larger touch target area */
        padding: 0.5rem 0;
    }
    .range-slider-track {
        @apply relative w-full h-2 bg-muted rounded-full cursor-pointer;
    }
    .range-slider-range {
        @apply absolute h-full bg-primary rounded-full pointer-events-none;
        /* Smooth transition for server updates */
        transition:
            left 150ms ease-out,
            width 150ms ease-out;
    }
    .range-slider-thumb {
        @apply absolute top-1/2 -translate-y-1/2 -translate-x-1/2 size-5 bg-background border-2 border-primary rounded-full shadow-md cursor-grab outline-none z-10;
        /* Smooth transition for server updates, but not during drag */
        transition:
            left 150ms ease-out,
            box-shadow 150ms ease,
            transform 150ms ease;

        &:hover {
            @apply ring-4 ring-primary/20 scale-105;
        }
        &:focus-visible {
            @apply ring-4 ring-ring/50;
        }
        &.range-slider-thumb-active {
            @apply cursor-grabbing ring-4 ring-primary/30 scale-110;
            /* Disable transition during drag for immediate response */
            transition:
                box-shadow 150ms ease,
                transform 100ms ease;
        }
    }
    .range-slider-tooltip {
        @apply absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-primary text-primary-foreground text-xs rounded whitespace-nowrap pointer-events-none;
        @apply opacity-0;
        transition: opacity 150ms ease;
    }
    /* Show tooltip on thumb hover or active drag */
    .range-slider-thumb:hover .range-slider-tooltip,
    .range-slider-thumb:focus .range-slider-tooltip,
    .range-slider-thumb-active .range-slider-tooltip {
        @apply opacity-100;
    }
    .range-slider-disabled {
        @apply opacity-50 pointer-events-none;

        .range-slider-thumb {
            @apply cursor-not-allowed;
        }
    }
    .range-slider-dragging {
        @apply cursor-grabbing;

        /* Disable transitions during drag for immediate response */
        .range-slider-thumb {
            transition:
                box-shadow 150ms ease,
                transform 100ms ease;
        }
        .range-slider-range {
            transition: none;
        }
    }

    /* Pips (scale markers) */
    .range-slider-pips {
        @apply relative w-full mt-3 h-6;
    }

    .range-slider-pip {
        @apply absolute flex flex-col items-center;
        transform: translateX(-50%);
    }

    .range-slider-pip-marker {
        @apply w-px h-1.5 bg-border;
    }

    .range-slider-pip-large .range-slider-pip-marker {
        @apply h-2 w-0.5;
    }

    .range-slider-pip-label {
        @apply text-[10px] text-muted-foreground mt-0.5 whitespace-nowrap;
    }
}

/* LiveSelect - Dynamic searchable selection */
@layer components {
    .live-select {
        @apply relative w-full;
    }

    .live-select-disabled {
        @apply opacity-50 pointer-events-none;
    }

    /* Tags container */
    .live-select-tags {
        @apply flex flex-wrap gap-1 mb-2;
    }

    .live-select-tag {
        @apply inline-flex items-center gap-1 px-2 py-1 text-sm bg-secondary text-secondary-foreground rounded-md;
    }

    .live-select-tag-sticky {
        @apply bg-primary/20 text-primary;
    }

    .live-select-tag-label {
        @apply truncate max-w-[150px];
    }

    .live-select-tag-remove {
        @apply flex-shrink-0 rounded-sm opacity-70 hover:opacity-100 hover:bg-secondary-foreground/20 transition-opacity cursor-pointer;
    }

    /* Input container */
    .live-select-input-container {
        @apply relative flex items-center;
    }

    .live-select-input {
        @apply flex h-9 w-full rounded-md border border-input bg-transparent dark:bg-input/30 px-3 py-1 text-sm shadow-xs ring-offset-background;
        @apply placeholder:text-muted-foreground;
        @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;
    }

    .live-select-clear {
        @apply absolute right-2 p-1 rounded-sm opacity-50 hover:opacity-100 hover:bg-muted transition-opacity cursor-pointer;
    }

    /* Dropdown */
    .live-select-dropdown {
        @apply absolute z-50 top-full left-0 right-0 mt-1 max-h-60 overflow-auto;
        @apply rounded-md border bg-popover text-popover-foreground shadow-md;
        animation: live-select-dropdown-in 0.15s ease-out;
    }

    @keyframes live-select-dropdown-in {
        from {
            opacity: 0;
            transform: scale(0.95);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .live-select-option {
        @apply relative flex cursor-pointer select-none items-center px-3 py-2 text-sm outline-none;
        @apply hover:bg-accent hover:text-accent-foreground;
        @apply transition-colors;
    }

    .live-select-option-active {
        @apply bg-accent text-accent-foreground;
    }

    .live-select-option-selected {
        @apply bg-primary/10;

        &::after {
            content: "✓";
            @apply absolute right-3 text-primary;
        }
    }

    .live-select-option-disabled {
        @apply opacity-50 cursor-not-allowed pointer-events-none;
    }

    /* Empty state */
    .live-select-empty {
        @apply px-3 py-6 text-center text-sm text-muted-foreground;
    }
}

/* Flash - Notification messages */
@layer components {
    .flash-group {
        @apply fixed top-4 right-4 z-50 flex flex-col gap-2 w-80 sm:w-96;
    }

    .flash {
        @apply relative flex items-start gap-3 p-4 rounded-lg border shadow-lg cursor-pointer;
        @apply transition-all duration-200 ease-out;
        @apply hover:shadow-xl;
    }

    .flash-info {
        @apply bg-blue-50 border-blue-200 text-blue-800;
        @apply dark:bg-blue-950 dark:border-blue-800 dark:text-blue-200;
    }

    .flash-error {
        @apply bg-red-50 border-red-200 text-red-800;
        @apply dark:bg-red-950 dark:border-red-800 dark:text-red-200;
    }

    .flash-icon {
        @apply shrink-0 mt-0.5;
    }

    .flash-content {
        @apply flex-1 min-w-0;
    }

    .flash-title {
        @apply font-semibold;
    }

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

    .flash-close {
        @apply shrink-0 cursor-pointer opacity-40 transition-opacity;
        @apply hover:opacity-70;
    }
}