.mt-4 {
  margin-top: calc(var(--spacing) * 4);
}

.inline-block {
  display: inline-block;
}

.h-2 {
  height: calc(var(--spacing) * 2);
}

.h-3 {
  height: calc(var(--spacing) * 3);
}

.w-3 {
  width: calc(var(--spacing) * 3);
}

.bg-green-500\/20 {
  background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
  }
}
.cursor-not-allowed {
  cursor: not-allowed !important;
  pointer-events: none;
}
.bg-gray-400 {
  background-color: var(--color-gray-400);
}

.bg-indigo-600 {
  background-color: var(--color-indigo-600);
}

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

.text-indigo-600 {
  color: var(--color-indigo-600);
}

.text-slate-900 {
  color: var(--color-slate-900);
}

/* Pagination css */

.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid #e5e7eb;
    font-size: 14px;
    color: #6b7280;
}

.pagination-info {
    font-size: 13px;
    color: #6b7280;
}

.pagination-nav {
    display: flex;
    align-items: center;
}

.pagination-list {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-item {
    border-radius: 6px;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    font-size: 14px;
    color: #374151;
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.page-link:hover {
    background-color: #f3f4f6;
}

.page-item.active .page-link {
    background-color: #eef2ff;
    border-color: #6366f1;
    color: #4338ca;
    font-weight: 600;
}

.page-item.disabled .page-link {
    color: #9ca3af;
    background-color: #f9fafb;
    border-color: #e5e7eb;
    cursor: not-allowed;
}

/* Make Tom Select look Tailwind-y */
.ts-wrapper.multi .ts-control {
   flex-wrap: wrap;
}

.ts-wrapper .ts-control,
.ts-dropdown,
.ts-dropdown .optgroup-header,
.ts-dropdown .option,
.ts-dropdown .create {
   border-radius: 0.5rem; /* rounded-xl */
}

.ts-wrapper .ts-control { 
   border: 1px solid rgb(209 213 219); /* gray-300 */
   padding: 0.5rem 0.75rem; /* px-3 py-2 */
   min-height: 42px;
   box-shadow: none;
   background-color: white;
}

.ts-wrapper.focus .ts-control { 
   border-color: transparent;
   outline: none;
   box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklch(0.585 0.233 277.117) 0px 0px 0px 2px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

.ts-wrapper .ts-control .item { 
   background: rgb(239 246 255); /* blue-50 */
   border: 1px solid rgb(191 219 254); /* blue-200 */
   color: rgb(37 99 235); /* blue-600 */
   border-radius: 9999px; /* pill */
   padding: 0.15rem 0.5rem;
   margin: 2px;
   font-size: 0.875rem; /* text-sm */
}

.ts-dropdown { 
   border: 1px solid rgb(209 213 219); /* gray-300 */
   box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-xl */
   background: white;
}

.ts-dropdown .active {
   background: rgb(243 244 246);
} /* gray-100 */

.ts-dropdown .option {
   padding: 0.5rem 0.75rem;
}

.ts-dropdown .no-results, .ts-dropdown .create {
   padding: 0.5rem 0.75rem;
   color: rgb(107 114 128);
} /* gray-500 */

.ts-wrapper.plugin-remove_button .item .remove {
   border-left: 0;
}

body .ts-dropdown,
body .ts-control,
body .ts-control input {
   font-size: inherit;
}

body .ts-wrapper.plugin-clear_button .ts-control  .clear-button {
   margin: 0;
   right: 5px;
}

body .ts-wrapper.multi .ts-control > div {
   background-color: #f3f4f7;
}

body .ts-dropdown .option {
   color: #1f2937;
}

body .ts-dropdown .option.active {
   background-color: #f3f4f7;
   color: #1f2937;
}

body .ts-dropdown [data-selectable].option{
   padding: 10px 15px;
}

body .ts-dropdown-content {
   max-height: 500px;
   padding: 8px 12px;
}

body .ts-dropdown {
   border: 1px solid #e0e0e0;
   border-radius: .5rem;
   margin: 0;
}