:root {
  --color-primary: #2c0a71;
  --color-secondary: #c69638;
  --color-neutral-100: #ffffff;
  --color-neutral-300: #adadad;
  --color-neutral-400: #9e9e9e;
  --color-neutral-500: #989898;
  --color-neutral-600: #b3b3b3;
}

@layer utilities {
  .bg-primary {
    background-color: var(--color-primary);
  }

  .text-primary {
    color: var(--color-primary);
  }

  .border-primary {
    border-color: var(--color-primary);
  }

  .border-secondary {
    border-color: var(--color-secondary);
  }

  .border-neutral-600 {
    border-color: var(--color-neutral-600);
  }

  .outline-primary {
    outline-color: var(--color-primary);
  }

  .bg-secondary {
    background-color: var(--color-secondary);
  }
  .bg-primary-100 {
    background-color: rgba(44, 10, 113, 0.1);
  }

  .text-primary-800 {
    color: #2c0a71;
  }

  .bg-secondary-100 {
  background-color: rgba(198, 150, 56, 0.1);
}

  .text-secondary-800 {
    color: #c69638;
  }
  .hover\:bg-primary:hover {
    background-color: var(--color-primary);
  }

  .text-secondary {
    color: var(--color-secondary);
  }

  .bg-neutral-100 {
    background-color: var(--color-neutral-100);
  }

  .bg-neutral-300 {
    background-color: var(--color-neutral-300);
  }

  .bg-neutral-400 {
    background-color: var(--color-neutral-400);
  }

  .bg-neutral-500 {
    background-color: var(--color-neutral-500);
  }

  .text-neutral-100 {
    color: var(--color-neutral-100);
  }

  .text-neutral-300 {
    color: var(--color-neutral-300);
  }

  .text-neutral-400 {
    color: var(--color-neutral-400);
  }

  .text-neutral-500 {
    color: var(--color-neutral-500);
  }
}

body {
  font-family: "Noto Sans Arabic", sans-serif;
}

/* Sidebar transition */
.sidebar-transition {
  transition: width 0.3s ease-in-out;
}

.sidebar-collapsed {
  width: 5rem !important;
}

.menu-item-collapsed span:not(.icon-only) {
  display: none;
}

.submenu-collapsed {
  display: none !important;
}

.pwt-datepicker-container {
  z-index: 9999 !important;
}

@media (max-width: 768px) {
  #sidebar {
    position: fixed;
    right: -18rem;
    top: 0;
    height: 100%;
    z-index: 50;
    transition: right 0.3s ease;
  }

  #sidebar.show {
    right: 0;
  }

  main {
    margin-right: 0 !important;
  }
}