/* /assets/css/selectize-tailwind.css  — load AFTER selectize.default.min.css */

/* ---- Brand tokens ---- */
:root {
  --tw-bg: #ffffff;
  --tw-fg: #111827;
  --tw-muted: #6b7280;
  --tw-border: #e5e7eb; /* gray-200 */
  --tw-border-focus: #00986b; /* Approach Auto green */
  --tw-ring: rgba(0, 152, 107, 0.35); /* green focus glow */
  --tw-hover: #f3f4f6; /* gray-100 */
  --tw-radius: 0.375rem; /* rounded-md */
  --tw-text-sm: 0.875rem; /* text-sm */
  --tw-leading: 1.25rem; /* leading-5 */

  --tw-active-bg: #00986b; /* dropdown active bg */
  --tw-active-fg: #ffffff;
  --tw-pill-bg: #e7f7f2; /* soft green for pills */
  --tw-pill-fg: #066b52; /* darker green text */
  --tw-pill-remove: #00986b;
}

.dark {
  --tw-bg: #111827;
  --tw-fg: #f9fafb;
  --tw-muted: #9ca3af;
  --tw-border: #374151;
  --tw-border-focus: #22c55e;
  --tw-ring: rgba(34, 197, 94, 0.35);
  --tw-hover: #1f2937;
  --tw-active-bg: #16a34a;
  --tw-active-fg: #ffffff;
  --tw-pill-bg: #052e26;
  --tw-pill-fg: #86efac;
  --tw-pill-remove: #22c55e;
}

/* ---- Flattened control: single outline on wrapper ---- */
.selectize-control {
  position: relative; /* so dropdown can anchor to it */
  display: block;
  width: 100%;
  background: var(--tw-bg);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius);
  box-sizing: border-box;
}

/* IMPORTANT: beat Selectize's inline width */
.selectize-control .selectize-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: -1px;
  right: -1px;
  width: auto !important; /* override inline width */
  min-width: 0; /* just in case */
}

.selectize-control:focus-within {
  border-color: var(--tw-border-focus) !important;
  box-shadow: 0 0 0 2px var(--tw-ring);
  outline: 0;
}

.selectize-control .selectize-input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0.5rem 0.75rem; /* py-2 px-3 */
  min-height: calc(var(--tw-leading) + 0.75rem);
  font-size: var(--tw-text-sm);
  line-height: var(--tw-leading);
  color: var(--tw-fg);
}

/* caret */
.selectize-control.single .selectize-input:after {
  border-width: 6px 6px 0 6px;
  border-color: #9ca3af transparent transparent transparent;
  right: 0.625rem;
}
.selectize-control.single .selectize-input.dropdown-active:after {
  border-color: var(--tw-border-focus) transparent transparent transparent;
}

/* typing field */
.selectize-input > input {
  font-size: var(--tw-text-sm);
  line-height: var(--tw-leading);
  color: var(--tw-fg);
  caret-color: var(--tw-border-focus);
  margin: 0;
}

/* disabled */
.selectize-control .selectize-input.disabled,
.selectize-control.disabled .selectize-input {
  background: transparent !important;
  color: #9ca3af !important;
  cursor: not-allowed;
  opacity: 0.9;
}

/* ---- Dropdown (full width of wrapper incl. borders) ---- */
.selectize-control .selectize-dropdown {
  position: absolute;
  left: -1px;
  right: -1px; /* span wrapper + its 1px borders */
  width: auto; /* fill via left/right */
  top: calc(100% + 0.25rem); /* mt-1 */
  background: var(--tw-bg);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  z-index: 50;
}

.selectize-dropdown .option,
.selectize-dropdown [data-selectable] {
  padding: 0.5rem 0.75rem; /* py-2 px-3 */
  font-size: var(--tw-text-sm);
  line-height: var(--tw-leading);
  color: var(--tw-fg);
  cursor: pointer;
}
.selectize-dropdown .option:hover,
.selectize-dropdown [data-selectable]:hover {
  background: var(--tw-hover);
}
.selectize-dropdown .active {
  background: var(--tw-active-bg) !important;
  color: var(--tw-active-fg) !important;
}

/* ---- Multi pills ---- */
.selectize-control.multi .selectize-input {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.selectize-control.multi .selectize-input > div {
  display: inline-flex;
  align-items: center;
  margin: 0 0.25rem 0.25rem 0;
  padding: 0.125rem 0.5rem;
  font-size: var(--tw-text-sm);
  line-height: 1.125rem;
  background: var(--tw-pill-bg);
  color: var(--tw-pill-fg);
  border-radius: 9999px;
  border: 1px solid transparent;
}
.selectize-control.multi .selectize-input > div:hover {
  border-color: var(--tw-border-focus);
}
.selectize-control.multi .selectize-input > div .remove {
  margin-left: 0.375rem;
  color: var(--tw-pill-remove);
  text-decoration: none;
}
.selectize-control.multi .selectize-input > div .remove:hover {
  color: var(--tw-active-bg);
}

/* ---- Optional compact density ---- */
.selectize-control.dense .selectize-input {
  padding: 0.375rem 0.5rem;
}
.selectize-control.dense .selectize-dropdown .option {
  padding: 0.375rem 0.5rem;
}