/* ==========================================================
   ChartedNurse Tom Select
   Branded styling for Tom Select controls
   Mobile-first: designed for 390px and up
   Requires: base.css
   ========================================================== */


/* ==========================================================
   WRAPPER
   ========================================================== */

.ts-wrapper {
  width: 100%;
  min-width: 0;
}

.ts-wrapper.single,
.ts-wrapper.multi {
  width: 100%;
}


/* ==========================================================
   MAIN CONTROL
   ========================================================== */

.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 54px;
  gap: var(--cn-space-2);
  padding: 11px 46px 11px var(--cn-space-4);
  border: 1px solid var(--cn-border);
  border-radius: var(--cn-radius-md);
  color: var(--cn-text-primary);
  background: var(--cn-bg);
  box-shadow: none;
  font-family: var(--cn-font-body);
  font-size: 16px;
  line-height: 1.4;
  cursor: text;
  transition:
    border-color var(--cn-transition-fast),
    box-shadow var(--cn-transition-fast),
    background-color var(--cn-transition-fast);
}

.ts-wrapper.single .ts-control:hover,
.ts-wrapper.multi .ts-control:hover {
  border-color: rgba(28, 167, 163, 0.5);
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.input-active .ts-control {
  border-color: var(--cn-teal);
  background: var(--cn-bg);
  box-shadow: 0 0 0 3px rgba(28, 167, 163, 0.13);
}

.ts-wrapper.dropdown-active .ts-control {
  border-color: var(--cn-teal);
}


/* ==========================================================
   SEARCH INPUT
   16px prevents iPhone Safari auto-zoom
   ========================================================== */

.ts-control input {
  width: auto;
  min-width: 28px;
  max-width: 100%;
  margin: 0 0 0 var(--cn-space-2);
  padding: 4px 0 !important;
  border: 0;
  outline: 0;
  color: var(--cn-text-primary);
  background: transparent;
  box-shadow: none;
  font-family: var(--cn-font-body);
  font-size: 16px !important;
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
}

.ts-control input::placeholder {
  color: var(--cn-text-light);
  opacity: 1;
}


/* ==========================================================
   SELECTED VALUE
   ========================================================== */

.ts-control > .item {
  max-width: 100%;
  margin-right: var(--cn-space-1);
  overflow: hidden;
  color: var(--cn-text-primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ==========================================================
   MULTI-SELECT PILLS
   ========================================================== */

.ts-wrapper.multi .ts-control {
  flex-wrap: wrap;
  padding-right: var(--cn-space-4);
}

.ts-wrapper.multi .ts-control > .item {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  gap: var(--cn-space-1);
  margin: 2px 4px 2px 0;
  padding: 5px 10px;
  border: 1px solid rgba(28, 167, 163, 0.14);
  border-radius: var(--cn-radius-pill);
  color: var(--cn-navy);
  background: var(--cn-teal-soft);
  font-size: var(--cn-text-sm);
  font-weight: 800;
  line-height: 1.2;
}


/* ==========================================================
   MULTI-SELECT REMOVE BUTTON
   ========================================================== */

.ts-wrapper.multi .remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 3px;
  padding-left: 6px;
  border-left: 1px solid rgba(10, 45, 100, 0.12);
  color: var(--cn-teal-dark);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

.ts-wrapper.multi .remove:hover,
.ts-wrapper.multi .remove:focus {
  color: var(--cn-navy);
  background: transparent;
}


/* ==========================================================
   DROPDOWN ARROW
   ========================================================== */

.ts-wrapper.single .ts-control::after {
  right: 17px;
  margin-top: -2px;
  border-width: 5px 5px 0;
  border-color:
    var(--cn-teal)
    transparent
    transparent;
}

.ts-wrapper.single.dropdown-active .ts-control::after {
  margin-top: -3px;
  border-width: 0 5px 5px;
  border-color:
    transparent
    transparent
    var(--cn-teal);
}


/* ==========================================================
   DROPDOWN
   ========================================================== */

.ts-dropdown {
  z-index: 9999;
  width: 100%;
  margin-top: 6px;
  overflow: visible;
  border: 1px solid var(--cn-border-soft);
  border-radius: var(--cn-radius-md);
  color: var(--cn-text-primary);
  background: var(--cn-bg);
  box-shadow: var(--cn-shadow-lg);
  font-family: var(--cn-font-body);
  font-size: 16px;
}


/* ==========================================================
   DROPDOWN CONTENT
   ========================================================== */

.ts-dropdown-content {
  max-height: 48vh;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: var(--cn-radius-md);
  touch-action: pan-y;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(10, 45, 100, 0.28) transparent;
}

.ts-dropdown-content::-webkit-scrollbar {
  width: 7px;
}

.ts-dropdown-content::-webkit-scrollbar-track {
  background: transparent;
}

.ts-dropdown-content::-webkit-scrollbar-thumb {
  border-radius: var(--cn-radius-pill);
  background: rgba(10, 45, 100, 0.24);
}


/* ==========================================================
   OPTIONS
   ========================================================== */

.ts-dropdown .option {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 14px var(--cn-space-4);
  color: var(--cn-text-primary);
  background: var(--cn-bg);
  font-size: 16px;
  line-height: 1.35;
  cursor: pointer;
  transition:
    color var(--cn-transition-fast),
    background-color var(--cn-transition-fast);
}

.ts-dropdown .option:hover {
  color: var(--cn-navy);
  background: var(--cn-bg-soft);
}

.ts-dropdown .option.active {
  color: var(--cn-navy);
  background: var(--cn-teal-soft);
}

.ts-dropdown .option.selected {
  color: var(--cn-teal-dark);
  background: var(--cn-teal-soft);
  font-weight: 800;
}


/* ==========================================================
   OPTION GROUPS
   ========================================================== */

.ts-dropdown .optgroup-header {
  padding: 10px var(--cn-space-4) 6px;
  color: var(--cn-text-muted);
  background: var(--cn-bg);
  font-size: var(--cn-text-xs);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ts-dropdown .optgroup + .optgroup {
  border-top: 1px solid var(--cn-border-soft);
}


/* ==========================================================
   EMPTY / CREATE STATES
   ========================================================== */

.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 14px var(--cn-space-4);
  color: var(--cn-text-muted);
  background: var(--cn-bg);
  font-size: var(--cn-text-sm);
  line-height: 1.5;
}

.ts-dropdown .create:hover,
.ts-dropdown .create.active {
  color: var(--cn-navy);
  background: var(--cn-teal-soft);
}


/* ==========================================================
   DISABLED
   ========================================================== */

.ts-wrapper.disabled {
  opacity: 1;
}

.ts-wrapper.disabled .ts-control {
  border-color: var(--cn-border-soft);
  color: var(--cn-text-muted);
  background: var(--cn-bg-muted);
  cursor: not-allowed;
  opacity: 0.8;
}

.ts-wrapper.disabled .ts-control input {
  cursor: not-allowed;
}


/* ==========================================================
   READONLY
   ========================================================== */

.ts-wrapper.readonly .ts-control {
  background: var(--cn-bg-soft);
  cursor: default;
}


/* ==========================================================
   PLACEHOLDER / EMPTY VALUE
   ========================================================== */

.ts-wrapper.single .ts-control .item[data-value=""] {
  color: var(--cn-text-light);
  font-weight: 500;
}


/* ==========================================================
   INVALID / ERROR STATE
   Add .is-error to the wrapper or parent .cn-field
   ========================================================== */

.ts-wrapper.is-error .ts-control,
.cn-field.is-error .ts-wrapper .ts-control {
  border-color: var(--cn-danger);
}

.ts-wrapper.is-error.focus .ts-control,
.ts-wrapper.is-error.input-active .ts-control,
.cn-field.is-error .ts-wrapper.focus .ts-control,
.cn-field.is-error .ts-wrapper.input-active .ts-control {
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.11);
}


/* ==========================================================
   SUCCESS STATE
   ========================================================== */

.ts-wrapper.is-success .ts-control,
.cn-field.is-success .ts-wrapper .ts-control {
  border-color: var(--cn-success);
}


/* ==========================================================
   FORM SYSTEM INTEGRATION
   ========================================================== */

.cn-field .ts-wrapper {
  width: 100%;
}

.cn-field .ts-wrapper + .cn-field-help,
.cn-field .ts-wrapper + .cn-field-error,
.cn-field .ts-wrapper + .cn-field-success {
  margin-top: 0;
}


/* ==========================================================
   DESKTOP ENHANCEMENT
   ========================================================== */

@media (min-width: 768px) {
  .ts-wrapper.single .ts-control,
  .ts-wrapper.multi .ts-control {
    min-height: 52px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .ts-dropdown-content {
    max-height: min(320px, 52vh);
  }

  .ts-dropdown .option {
    min-height: 46px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .ts-wrapper .ts-control,
  .ts-dropdown .option {
    transition: none;
  }
}