@tailwind base;
@tailwind components;
@tailwind utilities;

/* =========================================
   1. Custom Scrollbar
   ========================================= */
.custom-scrollbar {
  scrollbar-gutter: stable;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  
  overflow-y: auto;
}

/* Webkit (Chrome, Edge, Safari) */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #cbd5e1; /* gray-300 */
  border-radius: 20px;
  border: 1px solid transparent; /* float-type */
  background-clip: content-box;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8; /* gray-400 */
}

/* =========================================
   2. State Overrides
   !important overwrite Tailwind's Utility Class
   ========================================= */
.slot-filled {
  border-color: #3b82f6 !important;     /* blue-500 */
  background-color: #eff6ff !important; /* blue-50 */
}

.slot-filled span {
  color: #1d4ed8 !important;            /* blue-700 */
}

.slot-filled .indicator {
  background-color: #3b82f6 !important; /* blue-500 */
}

/* =========================================
   3. SortableJS
   ========================================= */
.sortable-ghost {
  opacity: 0.4;
  background-color: #e5e7eb; /* gray-200 */
}

.sortable-chosen {
  background-color: #eff6ff; /* blue-50 */
}

/* drag&drop */
#result-body tr {
  cursor: grab;
  touch-action: manipulation; /* for touch-screen */
}

#result-body tr:active {
  cursor: grabbing;
}

/* =========================================
   4. Global
   ========================================= */

/* banning for text-selected */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* seachbar-text */
input, textarea {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}