/*
 * The search picker (templates/admin/fragments/search-select.html): a form
 * control that lists matches under it, and the card of the one picked.
 */
.ss { position: relative; }
.ss-control { position: relative; }
.ss-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #8a929b; pointer-events: none; z-index: 1; }
.ss .ss-input { min-height: 44px; padding-left: 36px; padding-right: 36px; border-radius: 10px; }
.ss .ss-input:focus { border-color: var(--primary-color, #199675); box-shadow: 0 0 0 3px rgba(25, 150, 117, .12); }
.ss.is-open .ss-input { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.ss-spinner { position: absolute; right: 13px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border: 2px solid #d6dbe1; border-top-color: var(--primary-color, #199675); animation: ss-spin .7s linear infinite; }
@keyframes ss-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ss-spinner { animation-duration: 2s; } }

.ss-menu { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; max-height: 300px; overflow-y: auto; background: #fff; border: 1px solid #e3e7eb; border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .12); }
.ss-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.ss-option.is-active { background: #e8f4f1; }
.ss-note { padding: 10px 12px; color: #7c8590; font-size: 13px; }

.ss-avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-color, #199675); color: #fff; font-weight: 700; font-size: 14px; }
.ss-who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.ss-who strong { font-size: 14px; font-weight: 600; color: #1f2328; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-who small { font-size: 12px; color: #7c8590; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-badge { flex: 0 0 auto; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; background: #e5e7eb; color: #374151; }
.ss-badge.is-on { background: #c9f0d5; color: #14532d; }
.ss-badge.is-off { background: #e5e7eb; color: #374151; }
.ss-aside { flex: 0 0 auto; min-width: 56px; text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: #1f2328; }

.ss-chosen { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 10px; background: #e8f4f1; border: 1px solid rgba(25, 150, 117, .25); }
.ss-change { flex: 0 0 auto; border: 0; background: none; padding: 0; color: var(--primary-color, #199675); font-weight: 600; font-size: 12px; cursor: pointer; }
.ss-change:hover { text-decoration: underline; }

body.dark .ss-menu { background: #1b1e22; border-color: #30353b; }
body.dark .ss-option.is-active, body.dark .ss-chosen { background: rgba(25, 150, 117, .18); }
body.dark .ss-who strong, body.dark .ss-aside { color: #e6e8ea; }
.ss.is-open { z-index: 40; }