@import "toastify-js/src/toastify.css";
@plugin "flowbite/plugin";
@source "flowbite";
@import "tom-select/dist/css/tom-select.css";
@import 'tailwindcss';
@tailwind base;
@tailwind components;
@tailwind utilities;

.bg-alice {
  background-color: #f0f8ff !important;
}

.active-link {
  @apply border-b-2;
  border-bottom-color: #008ACE;
  color: #008ACE;
  background-color: transparent;
}

.active-link:hover {
  border-bottom-color: #006699;
  color: #006699;
}

.pagy.nav {
  @apply inline-flex -space-x-px text-sm;
}

.pagy.nav a {
  @apply px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700;
}

.pagy.nav a.current {
  @apply z-10 px-3 py-2 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700;
}

.pagy.nav a[aria-label*="prev"] {
  @apply px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-md hover:bg-gray-100 hover:text-gray-700;
}

.pagy.nav a[aria-label*="next"] {
  @apply px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 rounded-r-md hover:text-gray-700;
}

.ts-dropdown {
  @apply bg-white border border-gray-300 rounded-lg shadow-lg mt-1 z-50;
}

.ts-dropdown .ts-option {
  @apply px-3 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-800 cursor-pointer;
}

.ts-item {
  @apply bg-blue-100 text-blue-800 px-2 py-1 rounded-full mr-1 mb-1 inline-block;
}

.ts-placeholder {
  @apply text-gray-400;
}

.bg-group1{
  background-color: #E4BCD4 !important;
}

.bg-group2  {
  background-color: #C6E1F1 !important;
}

.bg-group3  {
  background-color: #EDC68F !important;
}

.bg-group4  {
  background-color: #F0C4B9 !important;
}

.bg-group5  {
  background-color: #C8A2D9 !important;
}

.bg-group6  {
  background-color: #DEC8DD !important;
}

.bg-group7  {
  background-color: #EBCAD5 !important;
}

.bg-group8  {
  background-color: #E9E0E4 !important;
}

.bg-group9  {
  background-color: #C9E3FE !important;
}

.bg-group10 {
  background-color: #E5BCD5 !important;
}

.bg-group11 {
  background-color: #F6DEA4 !important;
}

.break-anywhere { word-break: break-word; overflow-wrap: anywhere; }

/* Drag & Drop styles for planning exercises */
.sortable-row {
  @apply transition-all duration-150;
}

.sortable-row.sortable-ghost {
  @apply bg-blue-50 opacity-50;
}

.sortable-row.sortable-drag {
  @apply bg-blue-100 shadow-lg;
}

.planning-row-handle {
  @apply cursor-move;
}

.planning-row-handle:hover i {
  @apply text-gray-700;
}

/* Drag handle icon styles */
.planning-row-handle i {
  @apply text-gray-400 transition-colors duration-200;
}