/*
 * 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.
 */

/* Turbo Frame Loading States */
/* Show skeleton when turbo frame is loading */
turbo-frame[aria-busy="true"] .turbo-frame-loading {
  display: block !important;
}

turbo-frame[aria-busy="true"] .turbo-frame-content {
  display: none !important;
}

/* Hide skeleton when not loading */
turbo-frame:not([aria-busy="true"]) .turbo-frame-loading {
  display: none !important;
}

turbo-frame:not([aria-busy="true"]) .turbo-frame-content {
  display: block !important;
}

/* Cursor pointer for all interactive form elements */
select,
input[type="radio"],
input[type="checkbox"],
button:not([disabled]),
label:has(> input[type="radio"]),
label:has(> input[type="checkbox"]) {
  cursor: pointer;
}

/* Dark mode support for native date/datetime inputs */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  color-scheme: light;
}

.dark input[type="date"],
.dark input[type="datetime-local"],
.dark input[type="time"] {
  color-scheme: dark;
}

/* Tom Select dark-mode overrides — the upstream "default" theme is light-only */
.dark .ts-wrapper.single .ts-control,
.dark .ts-wrapper.multi .ts-control,
.dark .ts-control {
  background: #1f2937;            /* dark-800 */
  border-color: #4b5563;          /* dark-600 */
  color: #f3f4f6;                 /* dark-100 */
  box-shadow: none;
}
.dark .ts-control input,
.dark .ts-control input::placeholder {
  color: #9ca3af;                 /* dark-400 */
}
.dark .ts-wrapper.focus .ts-control {
  border-color: #3b82f6;          /* primary-500 */
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
}
.dark .ts-dropdown {
  background: #1f2937;            /* dark-800 */
  border-color: #4b5563;          /* dark-600 */
  color: #f3f4f6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.dark .ts-dropdown .option,
.dark .ts-dropdown .create {
  color: #f3f4f6;
}
.dark .ts-dropdown .option:hover,
.dark .ts-dropdown .active {
  background: #374151;            /* dark-700 */
  color: #ffffff;
}
.dark .ts-dropdown .option.selected {
  background: #1e3a8a;            /* primary-900-ish */
  color: #ffffff;
}
.dark .ts-wrapper.multi .ts-control > div {
  background: #2563eb;            /* primary-600 */
  color: #ffffff;
  border: none;
}
.dark .ts-wrapper.multi .ts-control > div.active {
  background: #1d4ed8;            /* primary-700 */
}
.dark .ts-wrapper .ts-control .item .remove {
  color: #ffffff;
  border-left-color: rgba(255, 255, 255, 0.3);
}
.dark .ts-dropdown .optgroup-header {
  background: #111827;            /* dark-900 */
  color: #9ca3af;
}