@tailwind utilities;

@layer components {

    /* ─── Sidebar Menu Item ─── */
    .menu-item {
        @apply relative flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium cursor-pointer w-full;
    }
    .menu-item-active {
        @apply bg-brand-50 text-brand-700 dark:bg-brand-500/10 dark:text-brand-400;
    }
    .menu-item-inactive {
        @apply text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white;
    }

    /* ─── Sidebar Menu Icon ─── */
    .menu-item-icon-active {
        @apply text-brand-600 dark:text-brand-400;
    }
    .menu-item-icon-inactive {
        @apply text-gray-500 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white;
    }

    /* ─── Sidebar Menu Text ─── */
    .menu-item-text {
        @apply overflow-hidden whitespace-nowrap;
    }

    /* ─── Dropdown Items ─── */
    .menu-dropdown-item {
        @apply flex items-center w-full rounded-lg px-3 py-2 text-sm font-medium;
    }
    .menu-dropdown-item-active {
        @apply bg-brand-50 text-brand-700 dark:bg-brand-500/10 dark:text-brand-400;
    }
    .menu-dropdown-item-inactive {
        @apply text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white;
    }

    /* ─── Badges "new" ─── */
    .menu-dropdown-badge {
        @apply inline-flex items-center px-1.5 py-0.5 rounded text-xs font-semibold uppercase tracking-wide;
    }
    .menu-dropdown-badge-active {
        @apply bg-brand-100 text-brand-700 dark:bg-brand-500/10 dark:text-brand-400;
    }
    .menu-dropdown-badge-inactive {
        @apply bg-gray-100 text-gray-600 dark:bg-white/5 dark:text-gray-400;
    }

    /* ─── Badges "pro" ─── */
    .menu-dropdown-badge-pro {
        @apply inline-flex items-center px-1.5 py-0.5 rounded text-xs font-semibold uppercase tracking-wide;
    }
    .menu-dropdown-badge-pro-active {
        @apply bg-violet-100 text-violet-700 dark:bg-violet-500/10 dark:text-violet-400;
    }
    .menu-dropdown-badge-pro-inactive {
        @apply bg-gray-100 text-gray-600 dark:bg-white/5 dark:text-gray-400;
    }

    /* ─── Scrollbar hidden ─── */
    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
}