/* Labels picker popover (B-028, components/label-picker.js). Pills reuse .field-label-pill colours.
   .is-tristate: the leads bulk bar's mode (UX-137 sprint P). */
.label-pop { width: 300px; }
.label-picker { display: flex; flex-direction: column; padding: var(--sp-4) 0; }

.label-search {
  display: flex; align-items: center; gap: var(--sp-3); height: var(--control-h); margin: 0 var(--sp-4) var(--sp-3);
  padding: 0 var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); cursor: text;
  transition: border-color var(--t-fast) var(--ease);
}
.label-search:focus-within { border-color: var(--border-focus); }
.label-search-ic { width: 16px; height: 16px; color: var(--text-2); flex: none; }
.label-search-ic svg { width: 16px; height: 16px; display: block; }
.label-search-input.input { flex: 1; min-width: 0; height: 30px; padding: 0; border: 0; background: none; }

.label-list { display: flex; flex-direction: column; gap: var(--sp-1); max-height: 264px; overflow-y: auto; padding: 0 var(--sp-4); }
.label-row {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 36px; padding: 0 var(--sp-3) 0 var(--sp-4);
  border-radius: var(--r-md); cursor: pointer; outline: none; transition: background var(--t-fast) var(--ease);
}
.label-row:hover { background: var(--bg-hover); }
/* Ticked rows are light blue with a blue check and dark text; only the keyboard-highlighted row is solid blue. */
.label-row.is-selected { background: var(--label-row-selected); color: var(--text); }
.label-row.is-selected:hover { background: var(--label-row-selected); box-shadow: inset 0 0 0 1px var(--border); }
.label-row.is-selected .label-row-check { color: var(--label-row-check); }
.label-row:focus-visible, .label-row.is-selected:focus-visible { background: var(--menu-hover-bg); color: var(--menu-hover-text); box-shadow: none; }
.label-row:focus-visible .label-row-check { color: var(--menu-hover-text); }
.label-row.is-flash { animation: label-row-flash 1s var(--ease); }
@keyframes label-row-flash { 0%, 40% { background: var(--bg-selected); box-shadow: inset 0 0 0 2px var(--label-row-check); } 100% { box-shadow: none; } }
.label-pill { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
.label-row-spacer { flex: 1; }
.label-row-edit {
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r-sm);
  background: none; color: inherit; cursor: pointer; visibility: hidden;
}
.label-row-edit .ic, .label-row-edit svg { width: 14px; height: 14px; display: block; }
.label-row:hover .label-row-edit, .label-row.is-selected .label-row-edit, .label-row-edit:focus-visible { visibility: visible; }
.label-row-edit:hover { background: rgba(0, 0, 0, 0.08); }
.label-row:focus-visible .label-row-edit:hover { background: rgba(255, 255, 255, 0.2); }
.label-row-check { width: 16px; height: 16px; flex: none; }
.label-row-check svg { width: 16px; height: 16px; display: block; }

/* Tri-state mode (UX-137 sprint P, leads bulk bar only): a 16px checkbox on the left, no row tint, no right check.
   A dash = only some selected leads have the label. */
.label-picker.is-tristate .label-row.is-selected,
.label-picker.is-tristate .label-row.is-selected:hover { background: none; box-shadow: none; }
.label-picker.is-tristate .label-row.is-selected:hover, .label-picker.is-tristate .label-row:hover { background: var(--bg-hover); }
.label-picker.is-tristate .label-row:focus-visible { background: var(--menu-hover-bg); color: var(--menu-hover-text); }
.label-row-box {
  display: grid; place-items: center; width: 16px; height: 16px; flex: none; border: 1px solid var(--border-strong);
  border-radius: 3px; background: var(--bg-surface); color: var(--text-inverse);
}
.label-row-box .ic, .label-row-box svg { width: 12px; height: 12px; display: block; }
.label-row.is-selected .label-row-box { border-color: var(--blue-bright); background: var(--blue-bright); }
.label-row.is-mixed .label-row-box { border-color: var(--blue-bright); color: var(--blue); }

.label-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-4); text-align: center; }
.label-empty-ic { width: 32px; height: 32px; color: var(--text-muted); }
.label-empty-ic svg { width: 32px; height: 32px; display: block; }
.label-empty-title { font-weight: var(--fw-semibold); }
.label-empty-text { font-size: var(--fs-sm); color: var(--text-2); }
.label-none { padding: var(--sp-4) var(--sp-4) var(--sp-2); color: var(--text-2); font-size: var(--fs-sm); }
.label-add-query {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 36px; padding: 0 var(--sp-4); border: 0;
  border-radius: var(--r-md); background: none; color: var(--link); font: inherit; text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.label-add-query .ic, .label-add-query svg { width: 14px; height: 14px; display: block; flex: none; }
.label-add-query:hover { background: var(--bg-hover); }
.label-add-query:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }

.label-add-row { padding: var(--sp-3) var(--sp-4) 0; border-top: 1px solid var(--border); margin-top: var(--sp-3); }
.label-add {
  display: inline-flex; align-items: center; gap: var(--sp-2); height: 32px; padding: 0 var(--sp-4); border: 0;
  border-radius: var(--r-md); background: none; color: var(--link); font: inherit; cursor: pointer;
}
.label-add .ic, .label-add svg { width: 14px; height: 14px; display: block; }
.label-add:hover { background: var(--bg-hover); }
.label-add:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.label-error { padding: var(--sp-2) var(--sp-4) 0; font-size: var(--fs-sm); color: var(--red); }
.label-error:empty { display: none; }
.label-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-4); padding: var(--sp-4) var(--sp-4) 0; }
.label-foot .btn.btn-sm { height: 32px; font-size: var(--fs-md); font-weight: var(--fw-semibold); }

.label-form { display: flex; flex-direction: column; gap: var(--sp-3); padding: 0 var(--sp-2); animation: label-form-in var(--t-med) var(--ease-enter); }
.label-form-title { padding: 0 var(--sp-4); font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.label-form-field { display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 var(--sp-4); }
.label-form-caption { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); }
.label-form .input.has-error { border-color: var(--red); }
.label-form .label-error { padding-top: 0; }
.label-colors { display: grid; grid-template-columns: repeat(5, 32px); gap: var(--sp-4); }
.label-dot {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  color: var(--text-inverse); cursor: pointer; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.label-dot .ic, .label-dot svg { width: 16px; height: 16px; display: block; }
.label-dot:hover { transform: scale(1.08); }
.label-dot:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--border-focus); }
.label-dot.is-selected { box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 3px var(--border-strong); }
.label-dot.label-blue { background: var(--label-blue); }
.label-dot.label-green { background: var(--label-green); color: var(--text); }
.label-dot.label-yellow { background: var(--label-yellow); color: var(--text); }
.label-dot.label-red { background: var(--label-red); }
.label-dot.label-purple { background: var(--label-purple); }
.label-dot.label-grey { background: var(--label-grey); color: var(--text); }
.label-dot.label-brown { background: var(--label-brown); }
.label-dot.label-orange { background: var(--label-orange); color: var(--text); }
.label-dot.label-darkgrey { background: var(--label-darkgrey); }
.label-dot.label-pink { background: var(--label-pink); color: var(--text); }
.label-delete { color: var(--red); }
.label-delete:hover { border-color: var(--red); }

@keyframes label-form-in { from { opacity: 0; transform: translateX(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .label-form { animation: none; } .label-dot { transition: none; } }