@import "tailwindcss";
@import "tom-select/dist/css/tom-select.default.css";
@import 'tippy.js/dist/tippy.css';
@import "trix/dist/trix.css";

/* ── Pagination ──────────────────────────────────────────────────────── */

.pagination a,
.pagination span,
.pagination .current {
  @apply px-3 py-1.5 rounded-md bg-gray-200 transition font-medium dark:bg-gray-700 dark:text-gray-300 text-sm min-w-[2rem] text-center;
}

.pagination a:hover {
  @apply bg-gray-300 dark:bg-gray-600;
}

.pagination .current {
  @apply bg-gradient-to-r from-blue-500 to-blue-800 text-white font-bold shadow-md not-italic;
}

.pagination .gap {
  @apply text-gray-400 dark:text-gray-500 px-1 py-1.5 bg-transparent;
}

/* ── TomSelect — aligned with app input style ────────────────────────── */

/* Wrapper: full width, no extra margin */
.ts-wrapper {
  @apply w-full;
}

/* Control: the visible chip + input box */
.ts-wrapper .ts-control {
  @apply w-full rounded-md border border-gray-300 bg-white text-gray-900 text-sm px-3 py-2 shadow-none cursor-text;
  min-height: 42px;
}

.dark .ts-wrapper .ts-control {
  @apply border-gray-700 bg-gray-800 text-white;
}

/* Focus ring */
.ts-wrapper.focus .ts-control {
  @apply border-indigo-500 ring-2 ring-indigo-500/30 outline-none;
}

/* Search input inside the control */
.ts-wrapper .ts-control input {
  @apply text-gray-900 text-sm bg-transparent outline-none;
}

.dark .ts-wrapper .ts-control input {
  @apply text-white;
}

/* Selected chips */
.ts-wrapper .ts-control .item {
  @apply bg-indigo-600 text-white text-xs font-medium rounded px-2 py-0.5 mr-1 flex items-center gap-1;
}

/* Remove button on chips */
.ts-wrapper .ts-control .item .remove {
  @apply text-white/70 hover:text-white no-underline font-bold ml-0.5;
}

/* Dropdown container */
.ts-wrapper .ts-dropdown {
  @apply bg-white border border-gray-300 rounded-md shadow-lg text-sm mt-1;
}

.dark .ts-wrapper .ts-dropdown {
  @apply bg-gray-800 border-gray-700;
}

/* Each option in the dropdown */
.ts-wrapper .ts-dropdown .option {
  @apply text-gray-900 px-3 py-2 cursor-pointer;
}

.dark .ts-wrapper .ts-dropdown .option {
  @apply text-white;
}

/* Hovered / keyboard-focused option */
.ts-wrapper .ts-dropdown .option.active {
  @apply bg-indigo-50 text-indigo-700;
}

.dark .ts-wrapper .ts-dropdown .option.active {
  @apply bg-indigo-600 text-white;
}

/* ── Scrollbar utilities ─────────────────────────────────────────────── */

.scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* ── Misc ────────────────────────────────────────────────────────────── */

button {
  @apply hover:cursor-pointer;
}

/* ── Trix rich text editor ───────────────────────────────────────────── */

trix-toolbar {
  @apply rounded-t-md border border-b-0 border-gray-300 bg-gray-50 px-2 py-1;
}

.dark trix-toolbar {
  @apply border-gray-700 bg-gray-700;
}

trix-toolbar .trix-button-row {
  @apply flex flex-wrap gap-0.5;
}

trix-toolbar .trix-button {
  @apply rounded px-1.5 py-1 text-gray-600 hover:bg-gray-200 hover:text-gray-900 border-none bg-transparent;
}

.dark trix-toolbar .trix-button {
  @apply text-gray-300 hover:bg-gray-600 hover:text-white;
}

trix-toolbar .trix-button.trix-active {
  @apply bg-indigo-100 text-indigo-700;
}

.dark trix-toolbar .trix-button.trix-active {
  @apply bg-indigo-600 text-white;
}

trix-toolbar .trix-button-group {
  @apply border border-gray-300 rounded;
}

.dark trix-toolbar .trix-button-group {
  @apply border-gray-600;
}

trix-toolbar .trix-button-group--file-tools {
  @apply hidden;
}

trix-editor {
  @apply block w-full rounded-b-md border border-gray-300 bg-white px-3 py-2 text-base text-gray-900 min-h-36 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6;
}

.dark trix-editor {
  @apply border-gray-700 bg-gray-800 text-white;
}

trix-editor.trix-content a {
  @apply text-indigo-400 underline;
}

trix-editor.trix-content ul {
  @apply list-disc pl-5;
}

trix-editor.trix-content ol {
  @apply list-decimal pl-5;
}

trix-editor.trix-content blockquote {
  @apply border-l-4 border-gray-400 pl-4 italic text-gray-500;
}

.dark trix-editor.trix-content blockquote {
  @apply border-gray-500 text-gray-400;
}

trix-editor.trix-content pre {
  @apply rounded bg-gray-100 px-3 py-2 font-mono text-sm;
}

.dark trix-editor.trix-content pre {
  @apply bg-gray-900 text-gray-300;
}

/* Mirror trix-content styles for the show page */
.rich-text-content a {
  @apply text-indigo-400 underline;
}

.rich-text-content ul {
  @apply list-disc pl-5 space-y-1;
}

.rich-text-content ol {
  @apply list-decimal pl-5 space-y-1;
}

.rich-text-content blockquote {
  @apply border-l-4 border-gray-500 pl-4 italic text-gray-400;
}

.rich-text-content pre {
  @apply rounded bg-gray-900 px-3 py-2 font-mono text-sm text-gray-300;
}

.rich-text-content h1 {
  @apply text-xl font-bold;
}

.rich-text-content strong {
  @apply font-semibold;
}