@import "tailwindcss";

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

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

    --font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
}

@layer base {
    body {
        @apply font-sans;
        font-optical-sizing: auto;
        font-style: normal;
        font-weight: 400;
    }

    .toastify {
        @apply fixed z-[9999] max-w-sm w-fit px-4 py-3 !rounded-lg !shadow-sm cursor-pointer transition-all duration-300 ease-in-out text-sm  text-gray-600 bg-white border-0;

        /* background: white !important; */
    }
}

@layer components {
    .btn {
        @apply inline-flex items-center justify-center rounded-xl px-3 py-2.5 text-xs font-medium text-white shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 sm:px-5 sm:text-sm;
    }

    .btn-delete {
        @apply inline-flex items-center justify-center rounded-xl border border-red-200 bg-red-50
         px-3 py-2.5 text-xs font-medium text-red-700 transition-all duration-200
         hover:border-red-300 hover:bg-red-100
         focus:outline-none sm:px-5 sm:text-sm;
    }

    .btn-light {
        @apply inline-flex items-center justify-center rounded-xl bg-white px-3 py-2.5 text-xs font-medium text-gray-700 shadow-sm ring-1 ring-gray-200 transition-all duration-300 hover:bg-gray-50 hover:shadow-md hover:ring-gray-300 focus:outline-none sm:px-6 sm:text-sm;

        &.dark {
            @apply bg-gray-700 text-gray-300 ring-gray-600 hover:bg-gray-600 hover:ring-gray-500;
        }
    }

    .btn-save {
        @apply flex flex-1 items-center justify-center gap-2 rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white shadow transition hover:bg-gray-800;

        &.dark {
            @apply bg-indigo-600 hover:bg-indigo-700;
        }
    }

    .btn-back {
        @apply flex flex-1 items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow hover:bg-gray-50 transition-colors duration-200;

        &.dark {
            @apply border-gray-600 bg-gray-700 text-gray-300 hover:bg-gray-600;
        }
    }

    /* Dark Mode Aliases */
    .bg-surface {
        @apply bg-white;
        &.dark { @apply bg-gray-800; }
    }

    .bg-input {
        @apply bg-white border border-gray-300;
        &.dark { @apply bg-gray-700 border-gray-600; }
    }

    .text-primary {
        @apply text-gray-800;
        &.dark { @apply text-gray-100; }
    }

    .text-secondary {
        @apply text-gray-700;
        &.dark { @apply text-gray-300; }
    }

    .text-input {
        @apply text-gray-900 placeholder-gray-500;
        &.dark { @apply text-gray-100 placeholder-gray-400; }
    }

    .text-muted {
        @apply text-gray-600;
        &.dark { @apply text-gray-400; }
    }

    .border-default {
        @apply border-gray-300;
        &.dark { @apply border-gray-600; }
    }

    .border-upload {
        @apply border-gray-300 hover:border-indigo-400;
        &.dark { @apply border-gray-600 hover:border-indigo-400; }
    }

    .icon-muted {
        @apply text-gray-400;
        &.dark { @apply text-gray-500; }
    }

    .bg-toggle-active {
        @apply bg-indigo-600 text-white shadow-sm;
        &.dark { @apply bg-indigo-500; }
    }

    .bg-toggle-inactive {
        @apply text-gray-600 hover:text-gray-800 hover:bg-gray-100;
        &.dark { @apply text-gray-400 hover:text-gray-200 hover:bg-gray-700; }
    }

    /* Container backgrounds for dark mode */
    .bg-card {
        @apply bg-white/80 border border-white/60;
        &.dark { @apply bg-gray-800/80 border-gray-700/60; }
    }

    .bg-gradient-card {
        @apply bg-white/80 backdrop-blur-sm;
        &.dark { @apply bg-gray-800/80; }
    }
}