@tailwind base;
@tailwind components;
@tailwind utilities;

/* Tailwind v4 sources */
@source '../views';
@source '../../vendor/filament/**/*.blade.php';
@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 tokens only */
@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}

/* BASE = resets only */
@layer base {

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

/* COMPONENTS = Filament overrides */
@layer components {

    /* .fi-sidebar {
        @apply rounded-2xl shadow-lg bg-white/90 backdrop-blur-md;
    } */

    /* Wrap instead of margin */
    /* .fi-layout {
        @apply p-6;
    }

    .fi-main {
        @apply pl-2;
    }

    .dark .fi-sidebar {
        @apply bg-zinc-900 shadow-black/40;
    }

    .fi-sidebar-header {
        @apply border-none;
    } */
    /* Sidebar styling */
    .fi-sidebar {
        border-radius: 1rem;
        /* rounded-2xl */
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
        /* shadow-lg */
        /* background-color: rgba(255, 255, 255, 0.9) !important; */
        /* bg-white/90 */
        /* backdrop-filter: blur(12px) !important; */
        /* backdrop-blur-md */
        margin: 1rem 0 0 0 !important;
        height: calc(100vh - 2rem) !important;
        /* box-sizing: content-box !important; */
        border: 1px solid oklch(0.792 0.209 151.711) !important;
    }

    /* Layout padding instead of margin */
    .fi-layout {
        padding: 0 0 0 1rem !important;
        /* p-6 */
    }

    /* First sidebar item button */
    .fi-sidebar-item:first-child {
        .fi-sidebar-item-btn {
            background-color: oklch(0.792 0.209 151.711);
            /* Tailwind's primary blue, adjust if your theme primary differs */
            /* color: white; */
            /* Text color */
            text-align: center;
            /* Center text */
            border-radius: 0.5rem;
            /* Optional: rounded-md */
            padding: 0.5rem 1rem;
            /* Optional: padding like Tailwind */
            font-weight: 500;
            /* Optional: medium font weight */
            margin: 0.5rem 0rem 0.5rem 0rem !important;
        }

        .fi-sidebar-item-btn:hover {
            background-color: oklch(0.6 0.209 151.711);
        }

        .fi-sidebar-item-icon {
            color: black;
        }

        .fi-sidebar-item-label {
            /* color: white; */
        }
    }

    /* Optional hover effect to match Tailwind primary hover */
    .fi-sidebar-item-btn:first-child:hover {
        background-color: #2563eb;
        /* Slightly darker blue on hover */
    }


    .fi-main {
        /* padding-left: 0.5rem !important; */
        /* pl-2 */
    }

    /* Dark mode sidebar */
    .dark .fi-sidebar {
        /* background-color: #18181b !important; */
        /* bg-zinc-900 */
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.4) !important;
        /* shadow-black/40 */
    }

    /* Sidebar header */
    .fi-sidebar-header {
        border: none !important;
    }

}