@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';
@import 'photoswipe/dist/photoswipe.css';

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';

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

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    --color-zinc-50: #fafafa;
    --color-zinc-100: #f5f5f5;
    --color-zinc-200: #e5e5e5;
    --color-zinc-300: #d4d4d4;
    --color-zinc-400: #a3a3a3;
    --color-zinc-500: #737373;
    --color-zinc-600: #525252;
    --color-zinc-700: #404040;
    --color-zinc-800: #262626;
    --color-zinc-900: #171717;
    --color-zinc-950: #0a0a0a;

    --color-accent: var(--color-neutral-800);
    --color-accent-content: var(--color-neutral-800);
    --color-accent-foreground: var(--color-white);
}

@layer theme {
    .dark {
        --color-accent: var(--color-white);
        --color-accent-content: var(--color-white);
        --color-accent-foreground: var(--color-neutral-800);
    }
}

@layer base {

    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }
}

[data-flux-field]:not(ui-radio, ui-checkbox) {
    @apply grid gap-1.5;
}

[data-flux-label] {
    @apply  !mb-0 !leading-tight !text-sm;
}

input:focus[data-flux-control],
textarea:focus[data-flux-control],
select:focus[data-flux-control] {
    @apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
}

/* \[:where(&)\]:size-4 {
    @apply size-4;
} */

/* Global design adjustments for compact UI */
@layer components {
    /* Reduce input/select heights */
    [data-flux-control] {
        @apply text-sm;
    }

    /* Compact form spacing */
    .space-y-6 > * + * {
        margin-top: 1rem !important;
    }

    /* Compact card padding */
    .card-compact {
        @apply p-4;
    }

    /* Hide native search input clear button */
    input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
    }

    /* SortableJS drag-and-drop styles */
    .sortable-ghost {
        @apply opacity-40 bg-blue-100 dark:bg-blue-900/30 border-blue-500 dark:border-blue-600;
    }

    .sortable-drag {
        @apply opacity-100 shadow-xl;
    }

    .spec-card {
        @apply transition-transform duration-200;
    }

    .drag-handle {
        @apply cursor-grab;
    }

    .drag-handle:active {
        @apply cursor-grabbing;
    }

    /* PhotoSwipe white background */
    .pswp {
        --pswp-bg: rgba(255, 255, 255, 0.95);
    }

    .pswp__bg {
        background: rgba(255, 255, 255, 0.95) !important;
    }

    /* Progress animation for search loading */
    @keyframes progress {
        0% {
            transform: translateX(-100%);
        }
        50% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(100%);
        }
    }

    .animate-progress {
        animation: progress 1.5s ease-in-out infinite;
    }

    /* Hero section floating animations */
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }

    @keyframes float-delayed {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }

    .animate-float {
        animation: float 3s ease-in-out infinite;
    }

    .animate-float-delayed {
        animation: float-delayed 3s ease-in-out infinite 0.5s;
    }

    /* Smooth hover transitions for cards */
    .card-hover-lift {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card-hover-lift:hover {
        transform: translateY(-4px);
    }

    /* Gradient text animation */
    @keyframes gradient-shift {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }

    .animate-gradient {
        background-size: 200% auto;
        animation: gradient-shift 3s ease infinite;
    }
}