@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");

* {
  font-family: "Plus Jakarta Sans", sans-serif;
}
.group-custom:last-child {
  border-bottom: none;
}
.group-custom-title {
  font-weight: bold;
  background-color: #f9f9f9;
}
.group-custom-item {
  padding-left: 2rem;
}
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}
.scrollbar-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Tom Select (match ui-input style) */
.ts-wrapper {
  width: 100%;
}

/* Tom Select wrapper may inherit .ui-input class from source select.
   Reset wrapper box style so only .ts-control looks like the input. */
.ts-wrapper.ui-input {
  padding: 0;
  border: 0;
  min-height: 0;
  background: transparent;
  box-shadow: none;
}

.ts-wrapper.ui-input:focus,
.ts-wrapper.ui-input:focus-within {
  border: 0;
  box-shadow: none;
}

/* Reset wrapper when using js-tom-select class (mirrors ui-input behavior) */
.ts-wrapper.js-tom-select {
  padding: 0;
  border: 0;
  min-height: 0;
  background: transparent;
  box-shadow: none;
}

.ts-wrapper.js-tom-select:focus,
.ts-wrapper.js-tom-select:focus-within {
  border: 0;
  box-shadow: none;
}

.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  width: 100%;
  min-height: 48px;
  border: 2px solid #f3f4f6;
  border-radius: 0.5rem;
  background-color: #ffffff;
  color: #111827;
  font-size: 0.875rem;
  line-height: 1.25rem;
  box-shadow: none;
  transition: all 100ms;
}

.ts-wrapper.single .ts-control {
  padding: 0.75rem;
}

.ts-wrapper.multi .ts-control {
  padding: 0.375rem 0.5rem;
}

.ts-wrapper .ts-control .item {
  color: #111827;
}

.ts-wrapper.single .ts-control input,
.ts-wrapper.multi .ts-control input {
  color: #111827;
  font-size: 0.875rem;
}

.ts-wrapper.single .ts-control input::placeholder,
.ts-wrapper.multi .ts-control input::placeholder {
  color: #6b7280;
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper .ts-control:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.18);
}

.ts-wrapper.disabled .ts-control,
.ts-wrapper.single.disabled .ts-control {
  background-color: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
}

/* Tom Select Error State Removed as per user request */

.ts-dropdown {
  border: 2px solid #f3f4f6;
  border-radius: 0.5rem;
  margin-top: 0.25rem;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
}

.ts-dropdown .option,
.ts-dropdown .create {
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: #111827;
}

.ts-dropdown .active {
  background-color: #eff6ff;
  color: #1d4ed8;
}

.dark .ts-wrapper.single .ts-control,
.dark .ts-wrapper.multi .ts-control {
  background-color: #111827;
  border-color: #111827;
  color: #f9fafb;
}

.dark .ts-wrapper .ts-control .item,
.dark .ts-wrapper .ts-control input {
  color: #f9fafb;
}

.dark .ts-wrapper .ts-control input::placeholder {
  color: #9ca3af;
}

.dark .ts-wrapper.focus .ts-control,
.dark .ts-wrapper.single.input-active .ts-control,
.dark .ts-wrapper .ts-control:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25);
}

.dark .ts-dropdown {
  background-color: #111827;
  border-color: #111827;
}

.dark .ts-dropdown .option,
.dark .ts-dropdown .create {
  color: #f9fafb;
}

.dark .ts-dropdown .active {
  background-color: rgba(30, 64, 175, 0.28);
  color: #dbeafe;
}

/* Custom Modal */
.modal-backdrop {
  transition: opacity 300ms ease-in-out;
}
.modal-backdrop.show {
  opacity: 1;
}
.modal-backdrop.hide {
  opacity: 0;
}
.modal-content {
  transition:
    transform 300ms ease-in-out,
    opacity 300ms ease-in-out;
  transform: scale(0.7) translateY(-20px);
  opacity: 0;
}
.modal-content.show {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.modal-content.hide {
  transform: scale(0.7) translateY(-20px);
  opacity: 0;
}

/* SweetAlert2 Dark Mode */
.dark .swal2-popup {
  background: #1f2937 !important;
  color: #e5e7eb !important;
}
.dark .swal2-title {
  color: #f3f4f6 !important;
}
.dark .swal2-html-container {
  color: #d1d5db !important;
}
.dark .swal2-validation-message {
  background: #374151 !important;
  color: #f3f4f6 !important;
}
.dark .swal2-input,
.dark .swal2-textarea,
.dark .swal2-select {
  background: #374151 !important;
  color: #f3f4f6 !important;
  border-color: #4b5563 !important;
}
.dark .swal2-input:focus,
.dark .swal2-textarea:focus,
.dark .swal2-select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 1px #3b82f6 !important;
}
.dark .swal2-close {
  color: #9ca3af !important;
}
.dark .swal2-close:hover {
  color: #f3f4f6 !important;
}