/*!
 * smit-tags — группа меток. Пара с smit-tags.js.
 * Виды: flat (мягкая заливка), solid (плотная), outline (только рамка).
 */

.smit-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.smit-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 4px 3px 10px; border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: var(--sc-fz-xs, .78rem); font-weight: 600; line-height: 1.35;
  max-width: 100%;
}
.smit-tag:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 1px; }
.smit-tag-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smit-tag:not(:has(.smit-tag-x)) { padding-right: 10px; }

.smit-tag-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer; opacity: .6;
  font-size: .72em; flex: 0 0 auto;
}
.smit-tag-x:hover { opacity: 1; background: rgba(0, 0, 0, .1); }
.smit-tag-x:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; opacity: 1; }

/* добавление метки прямо в строке */
.smit-tag-add {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px dashed var(--border-subtle, #cbd5e1);
  background: transparent; color: var(--text-muted, #64748b);
  font-size: var(--sc-fz-xs, .78rem); font-family: inherit;
}
.smit-tag-add:hover { border-color: var(--brand-primary, #43b77a); color: var(--brand-primary, #43b77a); }
.smit-tag-add:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; }
.smit-tag-input input {
  width: 150px; padding: 3px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--brand-primary, #43b77a);
  background: var(--surface-card, #fff); color: var(--text-primary, #1f2937);
  font-size: var(--sc-fz-xs, .78rem); font-family: inherit;
}
.smit-tag-input input:focus { outline: none; box-shadow: var(--shadow-sm); }
.smit-tags-none { font-size: var(--sc-fz-xs, .78rem); color: var(--text-muted, #94a3b8); }

/* размеры */
.smit-tags.size-sm .smit-tag { padding: 1px 3px 1px 8px; font-size: var(--sc-fz-2xs, .72rem); }
.smit-tags.size-sm .smit-tag:not(:has(.smit-tag-x)) { padding-right: 8px; }

/* тона: мягкая заливка (flat) */
.smit-tags.look-flat .smit-tag.tone-gray { background: rgba(100, 116, 139, .14); color: #475569; }
.smit-tags.look-flat .smit-tag.tone-green { background: rgba(67, 183, 122, .16); color: #1f7a52; }
.smit-tags.look-flat .smit-tag.tone-teal { background: rgba(67, 183, 168, .16); color: #1c7a70; }
.smit-tags.look-flat .smit-tag.tone-orange { background: rgba(217, 130, 43, .16); color: #96591a; }
.smit-tags.look-flat .smit-tag.tone-red { background: rgba(198, 47, 54, .14); color: #a8272d; }
.smit-tags.look-flat .smit-tag.tone-violet { background: rgba(124, 92, 196, .16); color: #5b429b; }

/* плотная заливка (solid) */
.smit-tags.look-solid .smit-tag { color: #fff; }
.smit-tags.look-solid .smit-tag.tone-gray { background: #64748b; }
.smit-tags.look-solid .smit-tag.tone-green { background: #3f9d73; }
.smit-tags.look-solid .smit-tag.tone-teal { background: #2f8f86; }
.smit-tags.look-solid .smit-tag.tone-orange { background: #bd6f22; }
.smit-tags.look-solid .smit-tag.tone-red { background: #c62f36; }
.smit-tags.look-solid .smit-tag.tone-violet { background: #6d51ad; }
.smit-tags.look-solid .smit-tag-x:hover { background: rgba(255, 255, 255, .25); }

/* только рамка (outline) */
.smit-tags.look-outline .smit-tag { background: transparent; }
.smit-tags.look-outline .smit-tag.tone-gray { border-color: #94a3b8; color: #475569; }
.smit-tags.look-outline .smit-tag.tone-green { border-color: #43b77a; color: #1f7a52; }
.smit-tags.look-outline .smit-tag.tone-teal { border-color: #43b7a8; color: #1c7a70; }
.smit-tags.look-outline .smit-tag.tone-orange { border-color: #d9822b; color: #96591a; }
.smit-tags.look-outline .smit-tag.tone-red { border-color: #c62f36; color: #a8272d; }
.smit-tags.look-outline .smit-tag.tone-violet { border-color: #7c5cc4; color: #5b429b; }

/* ── тёмная тема ── */
[data-bs-theme="dark"] .smit-tags.look-flat .smit-tag.tone-gray, .dark-theme .smit-tags.look-flat .smit-tag.tone-gray { background: rgba(148, 163, 184, .2); color: #cbd5e1; }
[data-bs-theme="dark"] .smit-tags.look-flat .smit-tag.tone-green, .dark-theme .smit-tags.look-flat .smit-tag.tone-green { background: rgba(67, 183, 122, .22); color: #7fd6a8; }
[data-bs-theme="dark"] .smit-tags.look-flat .smit-tag.tone-teal, .dark-theme .smit-tags.look-flat .smit-tag.tone-teal { background: rgba(67, 183, 168, .22); color: #7fd2c8; }
[data-bs-theme="dark"] .smit-tags.look-flat .smit-tag.tone-orange, .dark-theme .smit-tags.look-flat .smit-tag.tone-orange { background: rgba(217, 130, 43, .22); color: #e5a763; }
[data-bs-theme="dark"] .smit-tags.look-flat .smit-tag.tone-red, .dark-theme .smit-tags.look-flat .smit-tag.tone-red { background: rgba(198, 47, 54, .24); color: #ef8a90; }
[data-bs-theme="dark"] .smit-tags.look-flat .smit-tag.tone-violet, .dark-theme .smit-tags.look-flat .smit-tag.tone-violet { background: rgba(124, 92, 196, .24); color: #b8a4e8; }
[data-bs-theme="dark"] .smit-tag-add, .dark-theme .smit-tag-add { border-color: var(--border-subtle); color: var(--text-muted); }
[data-bs-theme="dark"] .smit-tag-input input, .dark-theme .smit-tag-input input {
  background: var(--surface-card); color: var(--text-primary);
}
[data-bs-theme="dark"] .smit-tag-x:hover, .dark-theme .smit-tag-x:hover { background: rgba(255, 255, 255, .16); }

/* ── телефон: крестик крупнее, метки не режем ── */
@media (max-width: 575.98px) {
  .smit-tag { padding: 5px 5px 5px 12px; }
  .smit-tag-x { width: 22px; height: 22px; }
  .smit-tag-add { padding: 5px 12px; }
}