/*
 * Tom Select — Kommo Any Integrations graphite/orange theme.
 * Written from scratch; does not depend on tom-select.default.css.
 * Targets: .ts-wrapper, .ts-control, .ts-dropdown
 */

/* ── Wrapper ─────────────────────────────────────────────────────── */
.ts-wrapper {
  position: relative;
  width: 100%;
}

/* Hide the original <select> after Tom Select wraps it.
   Tom Select v2 inserts .ts-wrapper AFTER the select (not inside it)
   and adds class "tomselected" + "ts-hidden-accessible" to the original.
   We use the off-screen accessible pattern so:
     • the element stays in the DOM → form value still submitted
     • it's invisible and non-interactive
     • no JS fallback needed: class only exists after Tom Select runs */
.ts-hidden-accessible,
select.tomselected {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* ── Control (the visible input area) ───────────────────────────── */
.ts-control {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  width: 100%;
  min-height: 39px;
  padding: 9px 12px;
  line-height: 1.45;
  background: var(--kai-bg-elev, #1b1b1b);
  border: 1px solid var(--kai-border, #2c2c2c);
  border-radius: var(--kai-radius-sm, 6px);
  color: var(--kai-text, #e8e8e8);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.15s;
  position: relative;
}
.ts-wrapper.focus .ts-control {
  border-color: var(--kai-primary, #FF5500);
  outline: none;
}
.ts-wrapper.disabled .ts-control {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* Caret (single select arrow) */
.ts-wrapper.single .ts-control::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--kai-text-muted, #8a8a8a);
  pointer-events: none;
  transition: transform 0.15s;
}
.ts-wrapper.single.dropdown-active .ts-control::after {
  transform: translateY(-50%) rotate(180deg);
}

/* ── Selected item (single mode) ────────────────────────────────── */
.ts-control .item {
  color: var(--kai-text, #e8e8e8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 24px);
  line-height: 1.4;
}

/* ── Search input inside control ────────────────────────────────── */
.ts-control input {
  flex: 1 1 auto;
  min-width: 0;
  width: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--kai-text, #e8e8e8) !important;
  font-size: 13px !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  height: auto !important;
  /* override .kai-field input rules */
  width: auto !important;
  -webkit-text-security: none !important;
}
.ts-control input::placeholder {
  color: var(--kai-text-muted, #8a8a8a);
}

/* ── Dropdown ────────────────────────────────────────────────────── */
.ts-dropdown {
  position: absolute;
  z-index: 1000;
  left: 0;
  top: calc(100% + 3px);
  width: 100%;
  background: var(--kai-bg-elev, #1b1b1b);
  border: 1px solid var(--kai-border-strong, #3d3d3d);
  border-radius: var(--kai-radius-sm, 6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.ts-dropdown-content {
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--kai-border-strong, #3d3d3d) transparent;
}

/* ── Options ─────────────────────────────────────────────────────── */
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--kai-text, #e8e8e8);
  transition: background 0.1s;
}
/* Keyboard-focused / mouse-hovered option */
.ts-dropdown .option.active {
  background: var(--kai-bg-soft, #252525);
  color: var(--kai-text, #e8e8e8);
}
/* Currently selected value highlight — subtle, not aggressive */
.ts-dropdown .option.selected {
  color: var(--kai-primary, #FF5500);
  font-weight: 600;
}
.ts-dropdown .option.selected.active {
  background: var(--kai-bg-soft, #252525);
}
/* Disabled option */
.ts-dropdown .option[data-disabled] {
  opacity: 0.45;
  cursor: default;
}
/* Optgroup header */
.ts-dropdown .optgroup-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--kai-text-muted, #8a8a8a);
  padding-top: 10px;
  cursor: default;
}
/* No results */
.ts-dropdown .no-results {
  color: var(--kai-text-muted, #8a8a8a);
  cursor: default;
}

/* ── Light theme overrides ───────────────────────────────────────── */
body.theme-light .ts-control,
body.theme-light .ts-dropdown {
  background: #ffffff;
  border-color: #d1d5db;
  color: #111111;
}
body.theme-light .ts-dropdown .option {
  color: #111111;
}
body.theme-light .ts-dropdown .option.active {
  background: #f3f4f6;
}
body.theme-light .ts-control input {
  color: #111111 !important;
}

/* ── Mobile touch friendliness ───────────────────────────────────── */
@media (max-width: 640px) {
  .ts-dropdown-content { max-height: 180px; }
}