/* app/assets/stylesheets/app.css */

/* ==========================================================================
   DESIGN TOKENS - CSS Custom Properties Reference
   ==========================================================================

   These CSS variables provide consistent theming across the application.
   They automatically adapt to light/dark mode via Tailwind's theme system.

   TEXT COLORS
   -----------
   --text-primary      Main content text (headings, body)
   --text-secondary    Subdued text (labels, hints, descriptions)
   --text-tertiary     Placeholders, disabled text, icons
   --text-inverse      Text on dark/brand backgrounds

   BACKGROUNDS
   -----------
   --bg-default        Page background
   --bg-raised         Cards, modals, elevated surfaces

   SURFACES
   --------
   --surface-subtle       Slight elevation (table headers, section backgrounds)
   --surface-interactive  Hover states, clickable areas

   BRAND
   -----
   --brand-strong     Primary action color (buttons, links)
   --brand-emphasis   Hover state on primary actions

   BORDERS
   -------
   --border           Standard border color
   --ring             Focus ring color for accessibility

   USAGE IN TAILWIND
   -----------------
   Use the [color:var(--name)] syntax in Tailwind classes:

     text-[color:var(--text-primary)]
     bg-[color:var(--bg-raised)]
     border-[color:var(--border)]
     hover:bg-[color:var(--surface-interactive)]

   See ButtonHelper for standardized button class patterns.
   ========================================================================== */

/* Skeleton Loading Animation */
@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.skeleton {
  animation: skeleton-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  background-color: var(--surface-interactive, #e5e7eb);
  border-radius: 0.25rem;
}

.skeleton-text {
  height: 1rem;
  border-radius: 0.25rem;
}

.skeleton-text-sm {
  height: 0.75rem;
  border-radius: 0.25rem;
}

.skeleton-text-lg {
  height: 1.5rem;
  border-radius: 0.25rem;
}

.skeleton-circle {
  border-radius: 9999px;
}

/* Turbo Progress Bar */
.turbo-progress-bar {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.8), #ffffff);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  z-index: 2147483647;
  transition: width 300ms ease-out, opacity 150ms 150ms ease-in;
  transform: translate3d(0, 0, 0);
}

.json-block,
.mono-block {
  background: #f7f7f7;
  border-radius: 6px;
  padding: .75rem .9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12.5px;
  line-height: 1.45;

  /* the magic: wrap long tokens and allow scroll instead of page blowout */
  white-space: pre-wrap;          /* wrap lines */
  word-break: break-word;         /* break very long tokens if needed */
  overflow-wrap: anywhere;        /* modern fallback for very long tokens */
  max-width: 100%;
  max-height: 48vh;               /* keep panel reasonable */
  overflow: auto;                 /* scroll when too tall or too wide */
}

/* Nice two-column layout for the page view; collapses on small screens */
.page-view {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1rem;
}
@media (max-width: 900px) {
  .page-view {
    grid-template-columns: 1fr;
  }
}

.section-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: .9rem;
}

.section-card h3 {
  margin: 0 0 .5rem;
  font-size: 14px;
}

.section-card details summary {
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  margin-bottom: .5rem;
}

/* Agent Activity Stream Animations */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

@keyframes fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.animate-fade-out {
  animation: fade-out 0.3s ease-out forwards;
}

@keyframes pulse-subtle {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.animate-pulse-subtle {
  animation: pulse-subtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Forms */
label,
.label {
  font-size: 0.875rem;
  line-height: 1.5rem;
  font-weight: 500;
  color: #404040;
}

.dark label,
.dark .label {
  color: #f5f5f5;
}

.form-input[disabled] {
  cursor: not-allowed;
  background-color: #e5e5e5;
}

/* non-input elements (like the Stripe card form) can be styled to look like an input */
div.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid #d4d4d4;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  border-radius: 0.5rem;
}

.form-control {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  background-color: #ffffff;
  border: 0;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #171717;
  box-shadow: inset 0 0 0 1px #d4d4d4, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  outline: none;
  transition: box-shadow 150ms ease, background-color 150ms ease, color 150ms ease;
}

.form-control::placeholder {
  color: #737373;
}

.form-control:focus,
.form-control:focus-visible {
  box-shadow: inset 0 0 0 2px #525252, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dark .form-control {
  background-color: #404040;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px #525252, 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}

.dark .form-control::placeholder {
  color: #d4d4d4;
}

.dark .form-control:focus,
.dark .form-control:focus-visible {
  box-shadow: inset 0 0 0 2px #737373, 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}

@media (min-width: 640px) {
  .form-control {
    font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
  }
}

.form-control[disabled] {
  cursor: not-allowed;
  background-color: #f5f5f5;
  color: #a3a3a3;
}

.dark .form-control[disabled] {
  background-color: #525252;
  color: #a3a3a3;
}

.form-control.error {
  box-shadow: inset 0 0 0 1px #f87171, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.form-control.error:focus,
.form-control.error:focus-visible {
  box-shadow: inset 0 0 0 2px #f87171, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Hidden scrollbar utility - hides scrollbar but keeps scrolling */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Opera */
}

/* Small scrollbar utility */
.small-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #d4d4d4 transparent;
}

.small-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

.small-scrollbar::-webkit-scrollbar-thumb {
  background-color: #d4d4d4;
  border-radius: 4px;
}

.small-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #a3a3a3;
}

.dark .small-scrollbar {
  scrollbar-color: #525252 transparent;
}

.dark .small-scrollbar::-webkit-scrollbar-thumb {
  background-color: #525252;
}

.dark .small-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #737373;
}

select:not([multiple]) {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  border: 0;
  background-color: #ffffff;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #171717;
  box-shadow: inset 0 0 0 1px #d4d4d4, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  padding-right: 2.5rem;
  transition: box-shadow 150ms ease;
}

select:not([multiple]):focus,
select:not([multiple]):focus-visible {
  box-shadow: inset 0 0 0 2px #525252, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

@media (min-width: 640px) {
  select:not([multiple]) {
    font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
  }
}

.dark select:not([multiple]) {
  background-color: #404040;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px #525252, 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23A1A1AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

.dark select:not([multiple]):focus,
.dark select:not([multiple]):focus-visible {
  box-shadow: inset 0 0 0 2px #737373, 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}

select:not([multiple])[disabled] {
  cursor: not-allowed;
  background-color: #f5f5f5;
  color: #a3a3a3;
  box-shadow: inset 0 0 0 1px #e5e5e5;
  opacity: 0.75;
}

.dark select:not([multiple])[disabled] {
  background-color: #525252;
  color: #cfcfcf;
  box-shadow: inset 0 0 0 1px #737373;
}

select[multiple] {
  width: 100%;
  border-radius: 0.5rem;
  border: 0;
  background-color: #ffffff;
  padding: 0.625rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #171717;
  box-shadow: inset 0 0 0 1px #d4d4d4;
  outline: 1px solid #d4d4d4;
  outline-offset: -1px;
  min-height: 120px;
  transition: outline 150ms ease;
}

select[multiple]:focus-visible {
  outline: 2px solid #525252;
  outline-offset: -2px;
}

@media (min-width: 640px) {
  select[multiple] {
    font-size: 0.875rem;
  }
}

.dark select[multiple] {
  background-color: #404040;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px #525252;
  outline-color: #525252;
}

.dark select[multiple]:focus-visible {
  outline: 2px solid #737373;
}

select[multiple][disabled] {
  cursor: not-allowed;
  background-color: #f5f5f5;
  color: #a3a3a3;
  opacity: 0.75;
}

.dark select[multiple][disabled] {
  background-color: #525252;
  color: #cfcfcf;
}

select[multiple] option {
  border-radius: 0.375rem;
}

option {
  background-color: #ffffff;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #171717;
}

.dark option {
  background-color: #404040;
  color: #f5f5f5;
}

option:checked {
  background-color: #f5f5f5;
}

.dark option:checked {
  background-color: #525252;
}

option:hover {
  background-color: #fafafa;
}

.dark option:hover {
  background-color: #525252;
}

.caret {
  pointer-events: none;
  position: absolute;
  inset: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.5rem;
  color: #262626;
}

[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  appearance: none;
  border-radius: 0.25rem;
  border: 1px solid #d4d4d4;
  background-color: #ffffff;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
  position: relative;
}

[type="checkbox"]:focus-visible {
  outline: 2px solid #525252;
  outline-offset: 2px;
}

[type="checkbox"]:checked {
  border-color: #404040;
  background-color: #262626;
  color: #ffffff;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type="checkbox"]:indeterminate {
  border-color: #d4d4d4;
  background-color: #262626;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' %3e%3cline x1='10.75' y1='6' x2='1.25' y2='6'%3e%3c/line%3e%3c/g%3e%3c/svg%3e");
  background-size: 75% 75%;
  background-position: center;
  background-repeat: no-repeat;
}

[type="checkbox"]:disabled {
  cursor: not-allowed;
  border-color: #d4d4d4;
  background-color: #e5e5e5;
  color: #a3a3a3;
  opacity: 0.75;
}

[type="checkbox"]:disabled:checked {
  border-color: #d4d4d4;
  background-color: #e5e5e5;
}

.dark [type="checkbox"] {
  border-color: rgba(255, 255, 255, 0.2);
  background-color: #262626;
}

.dark [type="checkbox"]:checked {
  border-color: rgba(255, 255, 255, 0.2);
  background-color: #171717;
  color: #262626;
}

.dark [type="checkbox"]:indeterminate {
  border-color: #737373;
  background-color: #404040;
}

.dark [type="checkbox"]:focus-visible {
  outline-color: #e5e5e5;
}

.dark [type="checkbox"]:disabled {
  border-color: #737373;
  background-color: #525252;
  color: #a3a3a3;
}

[type="radio"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  appearance: none;
  border-radius: 9999px;
  border: 1px solid #d4d4d4;
  background-color: #ffffff;
  transition: border-color 150ms ease, background-color 150ms ease;
}

[type="radio"]:focus-visible {
  outline: 2px solid #525252;
  outline-offset: 2px;
}

[type="radio"]:checked {
  border-color: #404040;
  background-color: #262626;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type="radio"]:disabled {
  cursor: not-allowed;
  border-color: #d4d4d4;
  background-color: #e5e5e5;
  color: #a3a3a3;
  opacity: 0.75;
}

[type="radio"]:disabled:checked {
  border-color: #d4d4d4;
  background-color: #e5e5e5;
}

.dark [type="radio"] {
  border-color: rgba(255, 255, 255, 0.2);
  background-color: #262626;
}

.dark [type="radio"]:checked {
  border-color: rgba(255, 255, 255, 0.2);
  background-color: #171717;
  color: #262626;
}

.dark [type="radio"]:focus-visible {
  outline-color: #e5e5e5;
}

.dark [type="radio"]:disabled {
  border-color: #737373;
  background-color: #525252;
  color: #a3a3a3;
}

/* Datalist styling */
input[list] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Replace default datalist arrow in WebKit browsers */
input[list].replace-default-datalist-arrow::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none !important;
}

input[list].replace-default-datalist-arrow {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
}

.dark input[list].replace-default-datalist-arrow {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23A1A1AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* Dialog */

/* Hide dialogs by default to prevent flash of open state */
dialog:not([open]) {
  display: none !important;
}

/* Firefox has a bug with backdrop, so we can use a box-shadow instead */
dialog.modal {
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
}

dialog.slideover {
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
}

dialog.max-w-full {
  box-shadow: none;
}

dialog::backdrop {
  background: none;
}

/* Modal animations */
dialog.modal:not(.max-w-full)[open] {
  animation: fadeIn 200ms forwards, scaleIn 200ms forwards;
}

dialog.modal:not(.max-w-full)[closing] {
  animation: fadeOut 200ms forwards, scaleOut 200ms forwards;
}

/* Fullscreen modal animations - fade only */
dialog.modal.max-w-full[open] {
  animation: fadeIn 200ms forwards;
}

dialog.modal.max-w-full[closing] {
  animation: fadeOut 200ms forwards;
}

/* Center modals */
dialog.modal {
  margin: auto;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
}

/* Slideover animations */
dialog.slideover[open] {
  animation: fadeIn 200ms forwards ease-in-out, slide-in-from-right 200ms forwards ease-in-out;
}

dialog.slideover[closing] {
  pointer-events: none;
  animation: fadeOut 200ms forwards ease-in-out, slide-out-to-right 200ms forwards ease-in-out;
}

/* Slideover animations for top */
dialog.slideover-top[open] {
  animation: fadeIn 200ms forwards ease-in-out, slide-in-from-top 200ms forwards ease-in-out;
}

dialog.slideover-top[closing] {
  animation: fadeOut 200ms forwards ease-in-out, slide-out-to-top 200ms forwards ease-in-out;
}

/* Slideover animations for bottom */
dialog.slideover-bottom[open] {
  animation: fadeIn 200ms forwards ease-in-out, slide-in-from-bottom 200ms forwards ease-in-out;
}

dialog.slideover-bottom[closing] {
  animation: fadeOut 200ms forwards ease-in-out, slide-out-to-bottom 200ms forwards ease-in-out;
}

/* Slideover animations for left */
dialog.slideover-left[open] {
  animation: fadeIn 200ms forwards ease-in-out, slide-in-from-left 200ms forwards ease-in-out;
}

dialog.slideover-left[closing] {
  animation: fadeOut 200ms forwards ease-in-out, slide-out-to-left 200ms forwards ease-in-out;
}

/* Slideover animations for right */
dialog.slideover-right[open] {
  animation: fadeIn 200ms forwards ease-in-out, slide-in-from-right 200ms forwards ease-in-out;
}

dialog.slideover-right[closing] {
  animation: fadeOut 200ms forwards ease-in-out, slide-out-to-right 200ms forwards ease-in-out;
}

body {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

/* Prevent scrolling while dialog is open */
body:has(dialog.modal[open]) {
  overflow: hidden;
}

body:has(dialog.slideover[open]) {
  overflow: hidden;
}

/* Scrollbar compensation for fixed elements */
:root {
  --scrollbar-compensation: 0px;
}

/* Apply compensation to body when modal/slideover/drawer is open */
body.modal-open,
body.slideover-open,
body.drawer-open {
  padding-right: var(--scrollbar-compensation);
}

/* Apply compensation to fixed elements */
body.modal-open .fixed,
body.slideover-open .fixed,
body.drawer-open .fixed {
  padding-right: var(--scrollbar-compensation);
}

/* Exclude slideover/drawer dialogs from scrollbar compensation */
body.slideover-open [data-slideover-target="dialog"],
body.drawer-open [data-drawer-target="dialog"] {
  padding-right: 0 !important;
}

dialog.modal {
  cursor: auto;
}

/* Keyframes for fade animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Keyframes for slide animations */
@keyframes slide-in-from-top {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slide-out-to-top {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

@keyframes slide-in-from-bottom {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slide-out-to-bottom {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

@keyframes slide-in-from-left {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-out-to-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide-in-from-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-out-to-right {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

/* Add new keyframes for scale animations */
@keyframes scaleIn {
  from {
    transform: scale(0.95);
  }
  to {
    transform: scale(1);
  }
}

@keyframes scaleOut {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.95);
  }
}

/* Tom Select */

select[multiple][data-controller="select"] {
  @apply invisible;
}

.dropdown-input {
  @apply !border-neutral-300 !bg-white !px-3 !py-2.5 text-sm placeholder:!text-neutral-500 dark:!border-neutral-600 dark:!bg-neutral-700 dark:!placeholder-neutral-300;
}

.plugin-dropdown_input.focus.dropdown-active .ts-control {
  @apply !border-none;
}

.ts-dropdown-content {
  @apply py-1.5;
  max-height: 240px;
  scroll-behavior: auto;
}

.ts-dropdown-content {
  scrollbar-width: thin;
  scrollbar-color: #a2a2a270 #7878780b;
}

.ts-dropdown-content::-webkit-scrollbar {
  width: 6px;
}

.ts-dropdown-content::-webkit-scrollbar-track {
  background: #78787879;
}

.ts-dropdown-content::-webkit-scrollbar-thumb {
  background-color: #a2a2a270;
  border-radius: 3px;
}

.ts-control {
  @apply flex min-h-[40px] w-full px-3 py-2 cursor-default rounded-lg border-0 text-base leading-6 text-neutral-900 shadow-sm ring-1 placeholder:text-neutral-500 ring-neutral-300 outline-hidden ring-inset focus:ring-neutral-600 dark:bg-neutral-700 dark:text-white dark:placeholder-neutral-300 dark:ring-neutral-600 dark:focus:ring-neutral-500;

  &[disabled] {
    @apply cursor-not-allowed bg-neutral-100 dark:bg-neutral-600;
  }

  &.error {
    @apply border-red-400 outline-red-300 focus:outline-red-500 dark:border-red-600 dark:outline-red-500;
  }
}

.plugin-dropdown_input .dropdown-input {
  @apply outline-hidden;
}

/* Ensure items-placeholder is visible when no items are selected */
.plugin-dropdown_input .items-placeholder {
  display: block !important;
}

/* Only hide items-placeholder when items are actually selected */
.plugin-dropdown_input.has-items .items-placeholder {
  display: none !important;
}

/* Override the dropdown-active rule to keep placeholder visible when no items selected */
.plugin-dropdown_input.dropdown-active:not(.has-items) .items-placeholder {
  display: block !important;
}

.ts-dropdown .active.create {
  @apply cursor-pointer bg-neutral-100 text-neutral-900 dark:bg-neutral-600 dark:text-white;
}

.loading-more-results {
  @apply !cursor-default;
}

.disabled .ts-control {
  cursor: not-allowed !important;
}

@media (min-width: 640px) {
  .ts-control {
    font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
  }
}

.full .ts-control {
  @apply dark:bg-neutral-700;
}

.ts-wrapper.single .ts-control,
.ts-wrapper.single .ts-control input,
.ts-control,
.ts-wrapper.single.input-active .ts-control {
  @apply cursor-text;
}

.ts-dropdown [data-selectable] .highlight {
  @apply bg-orange-500/20 dark:bg-yellow-500/20;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
  @apply bg-white dark:bg-neutral-700;
}

.input-active {
  @apply shadow rounded-lg ring-2 ring-inset ring-neutral-600 dark:ring-neutral-500;
}

.ts-wrapper {
  @apply bg-white dark:bg-neutral-700 rounded-lg;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
  @apply bg-transparent dark:bg-transparent;
}

.ts-control input {
  @apply !m-0 bg-white text-base placeholder:text-neutral-500 read-only:!cursor-pointer dark:bg-neutral-800 dark:text-white dark:placeholder-neutral-300;
}

@media (min-width: 640px) {
  .ts-control input {
    font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
  }
}

.ts-wrapper:not(trix-toolbar .trix-input--dialog):not(.form-select).single .ts-control {
  @apply !pr-8;
}

.ts-wrapper.plugin-remove_button .item {
  @apply rounded-md;
}

.ts-wrapper.plugin-remove_button .item .remove {
  @apply rounded-r-lg border-none py-1 text-lg leading-none;
}

.ts-wrapper.plugin-remove_button .item .remove::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill='%23737373'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  @apply block size-4 bg-center bg-no-repeat;
}

/* Red remove button for flagged items */
.ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill='%23991B1B'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

.dark .ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill='%23FCA5A5'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

/* Add separate dark mode version */
.dark {
  .ts-wrapper.plugin-remove_button .item .remove::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ctitle%3Exmark%3C/title%3E%3Cg fill='%23A1A1A1'%3E%3Cpath d='m2.25,10.5c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L9.22,1.72c.293-.293.768-.293,1.061,0s.293.768,0,1.061l-7.5,7.5c-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3Cpath d='m9.75,10.5c-.192,0-.384-.073-.53-.22L1.72,2.78c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l7.5,7.5c.293.293.293.768,0,1.061-.146.146-.338.22-.53.22Z' stroke-width='0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  }
}

.ts-wrapper.plugin-remove_button .item .remove {
  font-size: 0 !important;
  @apply my-0.5 mr-1 !ml-0.5 flex size-[18px] items-center justify-center rounded !border-0 !p-1 !leading-none text-neutral-500 dark:text-neutral-400 dark:hover:bg-neutral-700;
}

/* Red remove button styling for flagged items inside input */
.ts-wrapper.plugin-remove_button .item[data-flag="true"] .remove {
  @apply text-red-700 hover:bg-red-200 hover:text-red-900 dark:text-[#FCA5A5] dark:hover:bg-red-100/10 dark:hover:text-red-200;
}

/* Flag toggle button styling */
.ts-wrapper.plugin-remove_button .item .flag-toggle {
  @apply text-neutral-400 dark:text-neutral-400;
}

.ts-wrapper.plugin-remove_button .item[data-flag="true"] .flag-toggle {
  @apply flex size-[18px] items-center justify-center rounded hover:bg-red-200 dark:hover:bg-red-100/10 text-red-800 dark:text-[#FCA5A5];
}

.ts-dropdown {
  @apply z-40 m-0 overflow-hidden rounded-lg border border-t border-solid border-neutral-300 shadow-sm dark:border-neutral-600 dark:bg-neutral-800 dark:text-white;
}

.ts-dropdown .create {
  @apply mx-1.5 cursor-default rounded-md px-2.5 py-2 text-sm dark:text-neutral-400;
}

.ts-dropdown [data-selectable].option,
.ts-dropdown .no-results {
  @apply mx-1.5 cursor-default rounded-md px-2.5 py-2 text-sm;
}

.ts-dropdown .option,
.ts-dropdown [data-disabled],
.ts-dropdown [data-disabled] [data-selectable].option {
  @apply mx-1.5 cursor-not-allowed rounded-md px-2.5 py-2 text-sm;
}

.ts-dropdown [data-selectable].option,
.ts-dropdown .ts-dropdown .create {
  @apply cursor-pointer;
}

.ts-dropdown .active {
  @apply bg-neutral-100 text-neutral-900 dark:bg-neutral-600 dark:text-white;
}

.ts-dropdown .spinner {
  @apply h-auto w-auto;
}

.ts-dropdown .spinner:after {
  @apply mt-1 mb-0 inline-block size-4 border-2 p-0;
}

.ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  print-color-adjust: exact;
}

/* Dark mode arrow for single select */
.dark {
  .ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23A1A1AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  }
}

/* Add dropdown arrow to multiselect elements */
.ts-wrapper:not(.form-control):not(.form-select).multi .ts-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 6l4-4 4 4M6 14l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.6rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  print-color-adjust: exact;
  padding-right: 2rem !important;
}

/* Dark mode arrow for multiselect */
.dark {
  .ts-wrapper:not(.form-control):not(.form-select).multi .ts-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23A1A1AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 6l4-4 4 4M6 14l4 4 4-4'/%3e%3c/svg%3e");
  }
}
.ts-wrapper.multi .ts-control > div {
  @apply mr-1 inline-flex items-center justify-center rounded-md bg-neutral-100 px-2 text-xs leading-none font-medium text-neutral-900 dark:bg-neutral-900 dark:text-neutral-100;
}

/* Ensure items don't overlap with the dropdown arrow */
.ts-wrapper.multi.has-items .ts-control {
  @apply !pt-[7px] !pr-8 !pb-[4px];
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item {
  @apply cursor-grab;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  @apply !-ml-0.5 cursor-pointer border-none;
}

.ts-wrapper.plugin-remove_button .item .remove {
  @apply my-0.5 mr-1 !ml-0.5 flex size-[18px] items-center justify-center rounded border-0 text-lg leading-none text-neutral-900/60 hover:text-neutral-900 dark:text-neutral-100/60 dark:hover:bg-neutral-700 dark:hover:text-neutral-100;
}

.ts-dropdown .optgroup-header {
  @apply border-t border-neutral-300 bg-white font-semibold text-neutral-900 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-100;
}

.ts-dropdown.plugin-optgroup_columns .optgroup {
  height: fit-content;
  @apply !mt-0;
}

.optgroup {
  @apply mt-1.5 first:mt-0;
}

.dark .ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #525252;
}

.ts-wrapper.multi.has-items .ts-control > input {
  @apply !mb-[3px];
}

.tomselect-checkbox {
  @apply !mr-0;
}

.input-hidden.focus {
  @apply !rounded-lg border  border-neutral-300 dark:border-neutral-600;
}

/* Replace the previous attempt with this updated selector */
select[data-select-disable-typing-value="true"] + .ts-wrapper .ts-control,
select[data-select-disable-typing-value="true"] + .ts-wrapper.single .ts-control,
select[data-select-disable-typing-value="true"] + .ts-wrapper.single .ts-control input,
select[data-select-disable-typing-value="true"] + .ts-wrapper.single.input-active .ts-control {
  @apply cursor-default;
}

.ts-dropdown-content.is-loading-more .option {
  pointer-events: none !important;
}

/* Count display for multi-select */
.ts-count-display {
  @apply mr-auto !my-0.5 !bg-transparent !px-0 !text-sm !font-normal pointer-events-none;
  display: none;
}

/* Hide count display when not active (explicit rule) */
.ts-control:not(.count-active) .ts-count-display {
  display: none !important;
}

/* Hide items and input when count is active */
.ts-control.count-active .item {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep input technically visible for keyboard navigation but make it invisible */
.ts-control.count-active input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure proper spacing when count is displayed */
.ts-wrapper.multi.has-items .ts-control:has(.ts-count-display) {
  @apply !py-[5px];
}

/* External tags styles - hide tags inside control */
.ts-control.external-tags-active .item {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Reset padding when external tags are active */
.ts-wrapper.multi.has-items .ts-control.external-tags-active {
  @apply !py-2;
}

/* Keep placeholder visible when external tags are active */
.plugin-dropdown_input.has-items .ts-control.external-tags-active .items-placeholder {
  display: block !important;
}

/* Reset input margins when external tags are active */
.ts-wrapper.multi.has-items .ts-control.external-tags-active > input {
  margin: 0 !important;
}