@import "tailwindcss/base";
@import "tailwindcss/components";

/*
 * Jumpstart Pro default styles
 * Remove these if you'd like to use TailwindUI which expects a clean slate
*/
@import "themes/dark";
@import "themes/juicy";
@import "themes/light";
@import "components/base";
@import "components/actiontext";
@import "components/alert";
@import "components/animation";
@import "components/announcements";
@import "components/avatars";
@import "components/buttons";
@import "components/cards";
@import "components/code";
@import "components/connected_accounts";
@import "components/direct_uploads";
@import "components/docs";
@import "components/forms";
@import "components/iframe";
@import "components/modal";
@import "components/nav";
@import "components/notifications";
@import "components/pagination";
@import "components/pills";
@import "components/strada";
@import "components/tabs";
@import "components/templates";
@import "components/toasts";
@import "components/tooltips";
@import "components/trix";
@import "components/typography";
@import "components/util";
@import "components/wells";
@import "components/braintree";
@import "select2/dist/css/select2.css";
@import "components/select2";

@import "tailwindcss/utilities";

@import "flatpickr/dist/flatpickr.css";
@import "tippy.js/dist/tippy.css";
@import "tom-select/dist/css/tom-select.css";

:root {
  --nexti-color-warning: #fdc22a;
  --nexti-default-light: #f69123;
  --nexti-color-default: #f05923;
  --nexti-default-dark: #d84926;
  --nexti-color-light: #e6e8e7;
  --nexti-color-secondary: #878a8b;
  --nexti-color-dark: #323738;
}

@layer components {

  /* Custom scrollbar for the sidebar */
  .scrollbar-thin {
    scrollbar-width: thin;
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 4px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgb(209 213 219);
    border-radius: 6px;
  }

  .dark .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgb(75 85 99);
  }

  /* Improved sidebar transitions */
  .sidebar-transition {
    @apply transition-all duration-300 ease-in-out transform;
  }

  /* Responsive sidebar container */
  .sidebar-container {
    @apply fixed md:relative h-full z-50;
  }

  /* Mobile overlay */
  .mobile-overlay {
    @apply fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity duration-300 ease-in-out md:hidden;
  }

  /* Active navigation item styles */
  .nav-item-active {
    @apply bg-gray-100 text-gray-900 shadow-sm;
  }

  .dark .nav-item-active {
    @apply bg-gray-700 text-white;
  }

  /* Navigation item hover effect */
  .nav-item-hover {
    @apply hover:bg-gray-50 hover:text-gray-900;
  }

  .dark .nav-item-hover {
    @apply hover:bg-gray-700 hover:text-white;
  }

  /* Mobile navigation styles */
  @screen md {
    .sidebar-container {
      @apply relative;
    }
  }

  /* Adicione estas classes */
  .sidebar-wrapper {
    @apply h-full bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700;
    transition: width 300ms ease-in-out;
  }

  .logo-container {
    @apply relative flex items-center px-4 py-5 border-b border-gray-200 dark:border-gray-700;
    height: 4.5rem;
  }

  .logo-wrapper {
    @apply relative flex items-center justify-center w-full transition-all duration-300 ease-in-out;
  }

  .logo-expanded {
    @apply w-32 h-8;
  }

  .logo-collapsed {
    @apply w-8 h-8;
  }

  .logo-transition {
    @apply absolute inset-0 flex items-center justify-center transition-opacity duration-300 ease-in-out;
  }

  .nav-link {
    @apply flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors;
    @apply text-gray-700 hover:bg-gray-100 hover:text-gray-900;
  }

  .nav-link-active {
    @apply bg-gray-100 text-gray-900;
  }

  /* Ajuste para alinhar as bordas */
  .header-border {
    @apply border-b border-gray-200 dark:border-gray-700;
    margin-bottom: -1px;
  }

  /* Improved Navigation Section */
  .nav-section {
    @apply flex flex-col gap-1 px-3 py-2;
  }

  .nav-item {
    @apply flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-700 hover:bg-gray-100 hover:text-gray-900 transition-colors duration-200 dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-white;
  }

  .nav-item-icon {
    @apply w-5 h-5 text-gray-500 transition-colors duration-200;
  }

  .nav-item-text {
    @apply text-sm font-medium transition-opacity duration-200;
  }

  /* Separator */
  .nav-separator {
    @apply my-2 border-t border-gray-200 dark:border-gray-700;
  }
}