@import url("https://cdn.jsdelivr.net/npm/simple-notify@1.0.5/dist/simple-notify.min.css");
@import url("https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.default.min.css");

.status-tag {

  &[data-status="warn"],
  &[data-status="warning"],
  &[data-status="orange"] { background: #e29b20; color: #fff; }
  
  &[data-status="error"],
  &[data-status="errored"],
  &[data-status="red"] { background: #d45f53; }

  &[data-status="yes"] { background: #6090DB; }
  &[data-status="no"] { background: grey; }
  &[data-status="ok"] { background: #1ac76b; color: #fff; }
}

/* FullCalendar v6+ includes CSS within JS bundles - no separate CSS needed */

/* Dark mode overrides for Tom Select (loaded after default CSS above).
   Default Tom Select CSS uses simple class selectors, so these overrides use
   the html.dark prefix plus wrapper classes to guarantee higher specificity. */
html.dark .ts-wrapper .ts-control,
html.dark .ts-wrapper.single .ts-control,
html.dark .ts-wrapper.multi .ts-control,
html.dark .full .ts-control,
html.dark .ts-control {
  background-color: #1f2937 !important;
  background-image: none !important;
  border-color: #4b5563 !important;
  color: #f3f4f6 !important;
  box-shadow: none !important;
}

html.dark .ts-control input,
html.dark .ts-control input:focus {
  color: #f3f4f6 !important;
  background: transparent !important;
}

html.dark .ts-control input::placeholder,
html.dark .ts-control input::-webkit-input-placeholder,
html.dark .ts-control input::-moz-placeholder,
html.dark .ts-control input:-ms-input-placeholder {
  color: #9ca3af !important;
}

html.dark .focus .ts-control,
html.dark .ts-wrapper.focus .ts-control,
html.dark .ts-control.focus {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
  border-color: #3b82f6 !important;
}

html.dark .disabled .ts-control,
html.dark .ts-wrapper.disabled .ts-control {
  background-color: #374151 !important;
  opacity: 0.5;
}

html.dark .ts-wrapper.multi .ts-control > div,
html.dark .ts-wrapper.multi .ts-control > .item {
  background: #374151 !important;
  border-color: #4b5563 !important;
  color: #f3f4f6 !important;
}

html.dark .ts-wrapper.multi .ts-control > div.active,
html.dark .ts-wrapper.multi .ts-control > .item.active {
  background: #3b82f6 !important;
  color: white !important;
}

html.dark .ts-dropdown,
html.dark .ts-dropdown .ts-dropdown-content {
  background: #1f2937 !important;
  border-color: #4b5563 !important;
  color: #f3f4f6 !important;
}

html.dark .ts-dropdown .option,
html.dark .ts-dropdown .create,
html.dark .ts-dropdown .no-results,
html.dark .ts-dropdown .loading {
  color: #f3f4f6 !important;
}

html.dark .ts-dropdown .option:hover,
html.dark .ts-dropdown .option.active,
html.dark .ts-dropdown .active {
  background-color: #374151 !important;
  color: #f9fafb !important;
}

html.dark .ts-dropdown .option.selected,
html.dark .ts-dropdown .selected {
  background-color: #4b5563 !important;
  color: #f3f4f6 !important;
}

html.dark .ts-dropdown .option.selected.active,
html.dark .ts-dropdown .selected.active {
  background-color: #3b82f6 !important;
  color: white !important;
}

html.dark .ts-dropdown .no-results,
html.dark .ts-dropdown .create,
html.dark .ts-dropdown .optgroup-header {
  color: #9ca3af !important;
}

html.dark .ts-dropdown .optgroup-header {
  background: #374151 !important;
  color: #d1d5db !important;
}

html.dark .ts-dropdown input,
html.dark .ts-dropdown input:focus {
  background: #111827 !important;
  border-color: #4b5563 !important;
  color: #f3f4f6 !important;
}

html.dark .ts-control.single .ts-control::after,
html.dark .ts-wrapper.single .ts-control::after {
  border-top-color: #d1d5db !important;
}

html.dark .ts-control.single.dropdown-active .ts-control::after,
html.dark .ts-wrapper.single.dropdown-active .ts-control::after {
  border-bottom-color: #d1d5db !important;
}

html.dark .ts-control.loading::before,
html.dark .ts-wrapper.loading .ts-control::before {
  border-color: #4b5563;
  border-top-color: #60a5fa;
}
