@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap")
layer(base);

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

@theme {
  --font-*: initial;
  --font-outfit: Outfit, sans-serif;

  --breakpoint-*: initial;
  --breakpoint-2xsm: 375px;
  --breakpoint-xsm: 425px;
  --breakpoint-3xl: 2000px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  --text-title-2xl: 72px;
  --text-title-2xl--line-height: 90px;
  --text-title-xl: 60px;
  --text-title-xl--line-height: 72px;
  --text-title-lg: 48px;
  --text-title-lg--line-height: 60px;
  --text-title-md: 36px;
  --text-title-md--line-height: 44px;
  --text-title-sm: 30px;
  --text-title-sm--line-height: 38px;
  --text-theme-xl: 20px;
  --text-theme-xl--line-height: 30px;
  --text-theme-sm: 14px;
  --text-theme-sm--line-height: 20px;
  --text-theme-xs: 12px;
  --text-theme-xs--line-height: 18px;

  --color-current: currentColor;
  --color-transparent: transparent;
  --color-white: #ffffff;
  --color-black: #101828;

  --color-brand-25: #f2f7ff;
  --color-brand-50: #ecf3ff;
  --color-brand-100: #dde9ff;
  --color-brand-200: #c2d6ff;
  --color-brand-300: #9cb9ff;
  --color-brand-400: #7592ff;
  --color-brand-500: #465fff;
  --color-brand-600: #3641f5;
  --color-brand-700: #2a31d8;
  --color-brand-800: #252dae;
  --color-brand-900: #262e89;
  --color-brand-950: #161950;

  --color-gray-25: #fcfcfd;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f2f4f7;
  --color-gray-200: #e4e7ec;
  --color-gray-300: #d0d5dd;
  --color-gray-400: #98a2b3;
  --color-gray-500: #667085;
  --color-gray-600: #475467;
  --color-gray-700: #344054;
  --color-gray-800: #1d2939;
  --color-gray-900: #101828;
  --color-gray-950: #0c111d;
  --color-gray-dark: #1a2231;

  --color-success-25: #f6fef9;
  --color-success-50: #ecfdf3;
  --color-success-100: #d1fadf;
  --color-success-500: #12b76a;
  --color-success-700: #027a48;
  --color-success-800: #05603a;
  
  --color-error-25: #fffbfa;
  --color-error-50: #fef3f2;
  --color-error-100: #fee4e2;
  --color-error-500: #f04438;
  --color-error-700: #b42318;
  --color-error-800: #912018;
  
  --color-warning-25: #fffcf5;
  --color-warning-50: #fffaeb;
  --color-warning-100: #fef0c7;
  --color-warning-500: #f79009;
  --color-warning-700: #b54708;
  --color-warning-800: #93370d;
  
  --color-orange-400: #fd853a;
  
  --color-blue-100: #dbeafe;
  --color-blue-500: #3b82f6;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
  
  body {
    @apply relative text-base font-normal z-1 bg-gray-50 dark:bg-gray-900;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
}

@utility menu-item {
  @apply relative flex items-center gap-3 px-4 py-3 font-medium rounded-xl text-sm;
}

@utility menu-item-active {
  @apply bg-gradient-to-r from-brand-50 to-brand-100 text-brand-600 shadow-sm border-l-4 border-brand-500 dark:from-brand-500/[0.15] dark:to-brand-500/[0.08] dark:text-brand-400 dark:border-brand-400;
}

@utility menu-item-inactive {
  @apply text-gray-600 hover:bg-gradient-to-r hover:from-gray-50 hover:to-gray-100 hover:text-gray-800 hover:shadow-sm dark:text-gray-300 dark:hover:from-white/5 dark:hover:to-white/10 dark:hover:text-white;
}

@utility menu-dropdown-item {
  @apply text-sm relative flex items-center gap-3 rounded-lg px-3 py-2.5 font-medium;
}

@utility menu-dropdown-item-active {
  @apply bg-gradient-to-r from-brand-50 to-brand-100 text-brand-600 shadow-sm dark:from-brand-500/[0.15] dark:to-brand-500/[0.08] dark:text-brand-400;
}

@utility menu-dropdown-item-inactive {
  @apply text-gray-600 hover:bg-gradient-to-r hover:from-gray-50 hover:to-gray-100 hover:text-gray-800 dark:text-gray-300 dark:hover:from-white/5 dark:hover:to-white/10 dark:hover:text-white;
}

@utility no-scrollbar {
  &::-webkit-scrollbar {
    display: none;
  }
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@utility custom-scrollbar {
  &::-webkit-scrollbar {
    @apply w-1.5 h-1.5;
  }

  &::-webkit-scrollbar-track {
    @apply rounded-full;
  }

  &::-webkit-scrollbar-thumb {
    @apply bg-gray-200 rounded-full dark:bg-gray-700;
  }
}

.sidebar {
  @apply fixed left-0 top-0 z-999 flex h-screen w-20 flex-col overflow-y-hidden bg-white duration-300 ease-linear dark:bg-gray-800 lg:static lg:translate-x-0;
  width: 280px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-right: 1px solid rgba(229, 231, 235, 0.8);
}

.sidebar:hover {
  width: 280px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.sidebar:hover .logo {
  display: block;
}

.sidebar:hover .logo-icon {
  display: none;
}

.sidebar:hover .sidebar-header {
  /* justify-content: space-between; */
}

.sidebar:hover .menu-group-title {
  display: block;
}

.sidebar:hover .menu-group-icon {
  display: none;
}

.sidebar:hover .menu-item-text {
  display: inline;
}

.sidebar:hover .menu-item-arrow {
  display: block;
}

.sidebar:hover .menu-dropdown {
  display: flex;
}

.px-6 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.flex.items-center.space-x-2.ml-3 {
    margin-top: 20px !important;
}
.flex.justify-between.items-center.mb-2 {
    padding-top: 10px !important;
}
@media (min-width: 1024px) {
    .lg:justify-center {
        justify-content: inherit !important;
    }
}
.top-4 {
    top: 5.5rem !important;
}