@import "tailwindcss";
@import "tom-select/dist/css/tom-select.css";

/* --- CONFIGURATION GLOBALE --- */
@layer base {
    form label {
        @apply text-white;
    }

    .custom-scrollbar {
        &::-webkit-scrollbar {
            @apply w-[5px] h-[5px];
        }
        &::-webkit-scrollbar-track {
            @apply bg-transparent;
        }
        &::-webkit-scrollbar-thumb {
            @apply bg-slate-300 rounded-full dark:bg-slate-700;
        }
    }
}

/* --- ANIMATIONS --- */
@theme {
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-in-out;
}

.page-transition {
    animation: fadeIn 0.3s ease-out;
}

/* --- UI COMPONENTS --- */
/* Menu Accordion sans JS */
details {
    & summary::-webkit-details-marker {
        display: none;
    }
    &[open] .arrow-icon {
        @apply rotate-180 transition-transform;
    }
}

.ts-control {
    .item {
        color: white !important;
    }
}

/* --- TOMSELECT CUSTOM DARK THEME --- */
/* On augmente la spécificité par le nesting pour éviter les !important */
.ts-wrapper {
    & .ts-control {
        @apply bg-slate-900/60 border-white/5 rounded p-2 flex flex-wrap transition-all shadow-none relative z-1;

        & > input {
            @apply text-slate-50 text-sm flex-1 min-w-[7rem] bg-transparent border-none outline-none;
            &::placeholder { @apply text-slate-500; }
        }
    }

    &.focus .ts-control {
        @apply ring-2 ring-blue-500/20 border-blue-500;
    }

    /* Tags (Multi-select) */
    &.multi .ts-control > div {
        @apply bg-blue-600 text-white rounded px-1.5 py-0.5 border border-blue-700 mr-1 mb-1 cursor-pointer;
        &.active { @apply bg-blue-800 border-blue-900; }
    }

    /* Dropdown menu */
    & .ts-dropdown {
        @apply absolute top-full left-0 w-full z-10 bg-slate-900 border border-white/10 shadow-2xl rounded-b mt-1 text-slate-50;

        & .option {
            @apply px-2 py-1.5 cursor-pointer transition-colors opacity-100;
            &.active { @apply bg-slate-800 text-blue-500; }
            &[data-selectable]:hover { @apply bg-slate-800; }
            &.highlight { @apply bg-blue-500/30 rounded-sm; }
        }

        & .optgroup-header {
            @apply px-2 py-1.5 text-slate-400 bg-slate-900 font-bold text-[10px] uppercase tracking-widest cursor-default border-t border-white/5;
        }

        & .no-results, & .create { @apply px-2 py-1.5; }
    }

    /* Plugins */
    &.plugin-clear_button .clear-button {
        @apply opacity-0 transition-opacity cursor-pointer text-red-500 absolute right-2 top-1/2 -translate-y-1/2;
    }
    &:hover.has-items .clear-button, &.focus.has-items .clear-button {
        @apply opacity-100;
    }

    &.disabled {
        @apply opacity-50;
        & .ts-control { @apply bg-slate-900 cursor-default; }
    }
}

/* --- LOGIQUE MÉTIER & FIXES --- */
.form-repeater__row {
    @apply relative z-[90];
}

/* Fix pour l'affichage des dropdowns dans les repeaters */
.ts-dropdown.single {
    @apply relative;
}

/* --- BOUTON BACK TO TOP (Injected via JS) --- */
/* --- BOUTON BACK TO TOP (Injected via JS) --- */
#back-to-top {
    /* Utilisation de la classe standard Tailwind pour la fluidité */
    @apply transition-all duration-500 ease-in-out;

    /* Optionnel : si tu veux vraiment un cubic-bezier spécifique, utilise les crochets : */
    /* transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); */

    &:active {
        @apply scale-95;
    }
}

.fc-event{
    background: rgba(177, 59, 246, 0.4) !important;
    display: block !important;
}