/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Notification Progress Bar Animation */
@keyframes progress-shrink {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

/* ============================================
   ADMIN JSON BLOCKS
   ============================================ */

.admin-json {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem;
  line-height: 1.6;
}

.admin-json code,
.admin-json span {
  color: inherit !important;
}

.dark .admin-json {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: #1f2937 !important;
}

/* ============================================
   TOM SELECT CUSTOM OVERRIDES
   ============================================ */

/* 
 * These styles override the default Tom Select styles
 * to match our admin panel design system.
 * Tom Select base CSS is loaded from CDN for functionality.
 */

/* CRITICAL: Hide the original select when Tom Select initializes */
select.tomselected,
select.ts-hidden-accessible {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Control styling - match our form-select */
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  min-height: 42px;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  background-color: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Focus state */
.ts-wrapper.focus .ts-control,
.ts-wrapper.single.focus .ts-control,
.ts-wrapper.multi.focus .ts-control {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  outline: none;
}

/* Dropdown styling */
.ts-wrapper .ts-dropdown {
  margin-top: 4px;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
  z-index: 1000;
}

.ts-wrapper .ts-dropdown .ts-dropdown-content {
  background-color: #ffffff;
}

/* Options */
.ts-wrapper .ts-dropdown .option {
  padding: 0.625rem 0.75rem;
  background-color: #ffffff;
  color: #111827;
}

.ts-wrapper .ts-dropdown .option.active {
  background-color: #eff6ff;
  color: #1e40af;
}

.ts-wrapper .ts-dropdown .option:hover {
  background-color: #f3f4f6;
}

/* Multi-select items */
.ts-wrapper.multi .ts-control > .item {
  background-color: #dbeafe;
  color: #1e40af;
  border-radius: 0.375rem;
  padding: 0.125rem 0.5rem;
  margin: 2px;
  font-size: 0.75rem;
  border: none;
}

/* Create option styling */
.ts-wrapper .ts-dropdown .create {
  padding: 0.625rem 0.75rem;
  color: #2563eb;
}

/* No results */
.ts-wrapper .ts-dropdown .no-results {
  padding: 0.625rem 0.75rem;
  color: #6b7280;
}

/* ============================================
   TOM SELECT DARK MODE
   ============================================ */

.dark .ts-wrapper.single .ts-control,
.dark .ts-wrapper.multi .ts-control {
  background-color: #111827;
  border-color: #374151;
  color: #f9fafb;
}

/* Ensure all text in the control is visible */
.dark .ts-wrapper .ts-control,
.dark .ts-wrapper .ts-control * {
  color: #f9fafb;
}

.dark .ts-wrapper .ts-control > input,
.dark .ts-wrapper .ts-control > input:focus {
  color: #f9fafb !important;
  background-color: transparent !important;
  caret-color: #f9fafb;
}

.dark .ts-wrapper .ts-control > input::placeholder {
  color: #6b7280;
}

/* Search/filter input inside control - critical for dark mode visibility */
.dark .ts-wrapper input,
.dark .ts-wrapper .ts-control input,
.dark .ts-wrapper .ts-control input[type="text"],
.dark .ts-wrapper .ts-control input[type="search"],
.dark .ts-wrapper.single .ts-control input,
.dark .ts-wrapper.multi .ts-control input,
.dark .ts-wrapper.dropdown-active .ts-control input,
.dark .ts-control input,
.dark .ts-input input,
.dark input.ts-input {
  color: #f9fafb !important;
  background: transparent !important;
  background-color: transparent !important;
  caret-color: #f9fafb !important;
  -webkit-text-fill-color: #f9fafb !important;
  opacity: 1 !important;
}

/* Override any autofill/autocomplete styling */
.dark .ts-wrapper input:-webkit-autofill,
.dark .ts-wrapper input:-webkit-autofill:hover,
.dark .ts-wrapper input:-webkit-autofill:focus,
.dark .ts-control input:-webkit-autofill {
  -webkit-text-fill-color: #f9fafb !important;
  -webkit-box-shadow: 0 0 0px 1000px #111827 inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Target the specific input inside ts-control more aggressively */
.dark .ts-control > input,
.dark .ts-control > input[autocomplete],
.dark .ts-control > input.input-hidden,
.dark .ts-wrapper .ts-control > input,
.dark .ts-wrapper.single .ts-control > input,
.dark .ts-wrapper.multi .ts-control > input {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  background: none !important;
}

/* Ensure text is visible even when input has focus */
.dark .ts-wrapper.focus .ts-control > input,
.dark .ts-wrapper.input-active .ts-control > input {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* CRITICAL: Fix for input visibility in dark mode */
/* The input inside ts-control inherits bg-white from form-control utility - must override */
.dark .ts-wrapper .ts-control input,
.dark .ts-wrapper .ts-control > input,
.dark .ts-wrapper.form-control .ts-control input,
.dark .ts-wrapper.single .ts-control input,
.dark .form-group .ts-wrapper .ts-control input,
.dark select + .ts-wrapper .ts-control input,
.dark .ts-control input[autocomplete] {
  background: none !important;
  background-color: transparent !important;
  color: #f9fafb !important;
  -webkit-text-fill-color: #f9fafb !important;
  border: none !important;
  box-shadow: none !important;
}

/* Remove any selection background that might hide text */
.dark .ts-wrapper .ts-control input::selection {
  background-color: #3b82f6;
  color: #ffffff;
}

/* Ensure the ts-control itself has proper dark mode background */
.dark .ts-wrapper .ts-control {
  background-color: #111827 !important;
}

/* Nuclear option: force all inputs in ts-wrapper to have transparent bg and white text */
.dark .ts-wrapper input[type="text"],
.dark .ts-wrapper input:not([type]),
.dark .ts-wrapper .ts-control input[type="text"],
.dark .ts-wrapper .ts-control input:not([type]),
.dark[class*=" "] .ts-wrapper input,
.dark .ts-wrapper[class] .ts-control input {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
}

/* Target by data attribute for highest specificity */
.dark [data-controller="enhanced-select"] + .ts-wrapper input,
.dark [data-controller="enhanced-select"] + .ts-wrapper .ts-control input {
  background: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.dark .ts-wrapper.focus .ts-control,
.dark .ts-wrapper.single.focus .ts-control,
.dark .ts-wrapper.multi.focus .ts-control {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.dark .ts-wrapper .ts-dropdown {
  background-color: #111827;
  border-color: #374151;
}

.dark .ts-wrapper .ts-dropdown .ts-dropdown-content {
  background-color: #111827;
}

.dark .ts-wrapper .ts-dropdown .option {
  color: #e5e7eb;
  background-color: #111827;
}

.dark .ts-wrapper .ts-dropdown .option.active,
.dark .ts-wrapper .ts-dropdown .option:hover {
  background-color: #1e3a8a;
  color: #ffffff;
}

.dark .ts-wrapper .ts-dropdown .option.selected {
  background-color: #1e40af;
  color: #ffffff;
}

.dark .ts-wrapper.multi .ts-control > .item {
  background-color: #1e3a8a;
  color: #dbeafe;
}

.dark .ts-wrapper .ts-dropdown .create {
  color: #60a5fa;
  background-color: #111827;
}

.dark .ts-wrapper .ts-dropdown .create:hover {
  background-color: #1f2937;
}

.dark .ts-wrapper .ts-dropdown .no-results {
  color: #9ca3af;
  background-color: #111827;
}

/* Ensure dropdown has proper stacking */
.dark .ts-wrapper .ts-dropdown {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* Remove button for multi-select items */
.ts-wrapper.multi .ts-control > .item .remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.25rem;
  padding: 0;
  width: 1rem;
  height: 1rem;
  border: none;
  background: none;
  color: #1e40af;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.ts-wrapper.multi .ts-control > .item .remove:hover {
  opacity: 1;
}

.dark .ts-wrapper.multi .ts-control > .item .remove {
  color: #93c5fd;
}

/* Clear button */
.ts-wrapper .clear-button {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.25rem;
  color: #9ca3af;
  cursor: pointer;
}

.ts-wrapper .clear-button:hover {
  color: #4b5563;
}

.dark .ts-wrapper .clear-button:hover {
  color: #d1d5db;
}