@charset "utf-8";
/*
 * Tom-select brand-token overrides.
 *
 * Scopes the Tom-select component to match the BPR design system:
 * - .acc-* surface (writer portal, public contact form, personal settings)
 * - .adm-* surface (admin shell country selects)
 *
 * Loaded by:
 *   content/base.html  (headStaticFiles block)
 *   work/_base.html    (headExtra block)
 *   manage/base.html   (headExtra block)
 */

/* ── Common wrapper ────────────────────────────────────────────── */
.ts-wrapper {
  font-family: var(--font-body);
  font-size: 1rem;
  width: 100%;
}

.ts-control {
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--brand-ink-900);
  min-height: 0;
  box-shadow: none;
  cursor: pointer;
  line-height: 1.4;
}

.ts-wrapper.focus .ts-control {
  border-color: var(--brand-green-500);
  box-shadow: 0 0 0 3px rgba(58, 170, 53, 0.18);
  outline: none;
}

/* Caret arrow */
.ts-wrapper:not(.multi).has-items .ts-control::after,
.ts-wrapper:not(.multi) .ts-control::after {
  content: '';
  display: block;
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23596573' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

/* ── Selected-item chips — brand-green family ──────────────────────
   Shared across every shell so the tag picker (admin blog Tags, writer
   specialisms + preferred services) renders identical pills. !important
   beats Tom Select's higher-specificity remove_button-plugin chip rule. */
.ts-control .item {
  background: rgba(58, 170, 53, 0.12) !important;
  border: 1px solid rgba(58, 170, 53, 0.25) !important;
  border-radius: var(--radius-pill, 999px) !important;
  color: var(--brand-green-700) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  padding: 0.1rem 0.5rem !important;
  margin: 0.1rem 0.2rem 0.1rem 0 !important;
}

/* Remove-button (×) on chips */
.ts-control .item .remove {
  color: var(--brand-green-700) !important;
  border-left: 1px solid rgba(58, 170, 53, 0.25) !important;
  padding-left: 4px !important;
  margin-left: 4px !important;
}
.ts-control .item .remove:hover {
  background: rgba(58, 170, 53, 0.2) !important;
  color: var(--brand-green-900, var(--brand-green-700)) !important;
}

/* ── Dropdown panel ────────────────────────────────────────────── */
.ts-dropdown {
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  margin-top: 2px;
  z-index: 9999;
}

.ts-dropdown .ts-dropdown-content {
  max-height: 280px;
  overflow-y: auto;
}

/* Search input inside dropdown */
.ts-dropdown input.ts-dropdown-content-search,
.ts-dropdown .ts-dropdown-header {
  border-bottom: 1px solid var(--brand-paper-200);
  padding: 0.5rem 0.75rem;
}

/* Individual option */
.ts-dropdown .option {
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  color: var(--brand-ink-900);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background: var(--brand-green-50, #EFF4F0);
  color: var(--brand-ink-900);
}

.ts-dropdown .option.selected,
.ts-dropdown .option.selected.active {
  background: var(--brand-green-100, #E4EDE7);
  color: var(--brand-ink-900);
  font-weight: 600;
}

/* No-results message */
.ts-dropdown .no-results {
  padding: 0.5rem 0.75rem;
  color: #888;
  font-size: 0.875rem;
}

/* ── Admin shell — tighter padding to match .adm-input geometry ── */
.adm-ts-country .ts-control {
  padding: 0.5rem 0.65rem;
  font-size: 0.9375rem;
}

/* TomSelect copies the source <select>'s classes onto .ts-wrapper. Both
   acc-field__input and adm-select have their own border/padding/background,
   which creates a double-box (and a caret colliding at the right edge) when the
   inner .ts-control draws its own box. Neutralise the wrapper-level chrome on
   BOTH surfaces so only .ts-control's box is visible — admin country selects and
   the broadcast "invite writers to claim" picker both carry .adm-select. */
.ts-wrapper.acc-field__input,
.ts-wrapper.adm-select {
  border: none;
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* ── token-select — createable picker with colour swatch + subtitle ─────
   The body-parented dropdown (portal fix) is tagged `.token-dropdown` so it
   inherits the base `.ts-dropdown` chrome; these rules add the swatch + the
   two-line option (name + description) that `data-color-source` fields draw.
   Reuses the curated `.stf-label--<key>` palette for the swatch fill. */
.token-dropdown .option { padding: 0; }  /* the inner .token-option owns padding */

.token-option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
}

.token-option__swatch {
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.15rem;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.token-option__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.token-option__name {
  font-weight: 600;
  color: var(--brand-ink-900);
  line-height: 1.3;
}

.token-option__desc {
  font-size: 0.8125rem;
  color: #6b7280;
  line-height: 1.3;
}

/* The "Add …" create row TomSelect injects (create:true) — keep it readable
   against the swatch rows. */
.token-dropdown .create {
  padding: 0.45rem 0.75rem;
  font-weight: 600;
  color: var(--brand-green-700);
}