/* StatusChip — состояние заливкой, значком и подписью одновременно.
   Часть CRM аренды. ПОРЯДОК ПОДКЛЮЧЕНИЯ ВАЖЕН: правила ниже перекрывают правила выше.
   Заменяет .badge из 03-components-v1 / 10-components-v2 и группу .rent-* из 16-investors-rent.

   Решение владельца (XLS-1c, REQUIREMENTS.md п. 55): прежняя метка — маленький
   квадрат с заливкой, половиной, штриховкой и пунктиром — читалась как
   вертикальная черта и ничего человеку не говорила. Вместо неё понятный значок
   перед подписью, один и тот же во всей системе (карточки квартир, окно
   квартиры, таблицы, лист месяца):

     ✓  оплачено, заселена        — галочка
     !  просрочено                — восклицательный знак в кружке
     ○  ждём оплату, свободна     — пустой кружок
     ◐  оплачено частично         — кружок, залитый наполовину
     ●  платить сегодня           — залитый кружок
     ◌  данных нет                — кружок пунктиром

   Форма по-прежнему несёт смысл отдельно от цвета: значок различим и при
   дальтонизме, и на снимке экрана в оттенках серого. Подпись текстом есть
   всегда — цвет и значок только дублируют её.

   Значки — инлайн-SVG в data:, рисуются маской по currentColor: разметку
   чипов собирает десяток модулей, и добавить в каждый по <svg> значило бы
   забыть в одном. Внешних файлов и запросов при этом нет. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--raised);
  color: var(--soft);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.25;
  /* Подпись состояния не переносится: «Оплачено частично» в две строки
     превращало плашку в абзац и ломало высоту строки листа. */
  white-space: nowrap;
  max-width: 100%;
  vertical-align: middle;
}

/* Исключение — телефон. Карточка квартиры там 165 px, и «Оплачено частично»
   в одну строку из неё вылезает. Лист месяца на такой ширине не показывается
   вовсе, поэтому требование «в одну строку» ему ничем не обязано: здесь
   подпись переносится ПО СЛОВУ, а не по букве. */
@media (max-width: 780px) {
  /* `[class]` поднимает вес правила над `.sc-window-chip {white-space: nowrap}`
     из 11-showcase.css: тот файл подключается позже и при равном весе
     побеждает, а править его в этой задаче нельзя. */
  .chip[class] {
    white-space: normal;
  }
}

/* Значок появляется только у состояний. Нейтральная плашка («Активен»,
   «13 записей») остаётся подписью без значка.

   Класс написан дважды не для красоты: 11-showcase.css подключается позже и
   держит от прежнего квадратика правило `.sc-window-chip:before {width:9px}`.
   Тот файл сейчас в работе у другой задачи, поэтому размер значка отвоёван
   специфичностью здесь, а не правкой там. */
.chip.chip--paid:before,
.chip.chip--partial:before,
.chip.chip--pending:before,
.chip.chip--due_today:before,
.chip.chip--overdue:before,
.chip.chip--not_configured:before,
.chip.chip--no_tenant:before,
.chip.chip--occupied:before,
.chip.chip--expected:before,
.chip.chip--vacant:before {
  content: '';
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
}

/* --- Оплачено и заселена: галочка --- */
.chip--paid,
.chip--occupied {
  color: var(--leaf);
  background: var(--leaf-tint);
  border-color: var(--leaf-edge);
}

.chip--paid:before,
.chip--occupied:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.4 7.3 5.7 10.6 11.6 3.8' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.4 7.3 5.7 10.6 11.6 3.8' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- Оплачено частично и скоро освободится: половина кружка --- */
.chip--partial,
.chip--expected {
  color: var(--window);
  background: var(--window-tint);
  border-color: var(--window-edge);
}

.chip--partial:before,
.chip--expected:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.1' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M7 2.8a4.2 4.2 0 0 0 0 8.4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.1' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M7 2.8a4.2 4.2 0 0 0 0 8.4z'/%3E%3C/svg%3E");
}

/* --- Платить сегодня: залитый кружок, срок настал --- */
.chip--due_today {
  color: var(--window);
  background: var(--window-tint);
  border-color: var(--window-edge);
}

.chip--due_today:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.1'/%3E%3C/svg%3E");
}

/* --- Ждём оплату и свободна: спокойная поверхность, пустой кружок.
       Тревоги здесь нет — срок ещё не настал (REQUIREMENTS.md п. 44). --- */
.chip--pending,
.chip--vacant {
  color: var(--soft);
  background: var(--raised);
  border-color: var(--border-field);
}

.chip--pending:before,
.chip--vacant:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.1' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.1' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
}

/* --- Просрочено: восклицательный знак в кружке --- */
.chip--overdue {
  color: var(--ember);
  background: var(--ember-tint);
  border-color: var(--ember-edge);
}

.chip--overdue:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.7' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M7 3.9v3.5' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='10.1' r='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.7' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M7 3.9v3.5' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='10.1' r='1'/%3E%3C/svg%3E");
}

/* --- Данных нет: кружок пунктиром. Пустое — это «неизвестно», а не ноль --- */
.chip--not_configured,
.chip--no_tenant {
  color: var(--soft);
  background: var(--raised);
  border-style: dashed;
  border-color: var(--border-field);
}

.chip--not_configured:before,
.chip--no_tenant:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.1' fill='none' stroke='%23000' stroke-width='1.8' stroke-dasharray='2.3 2.1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.1' fill='none' stroke='%23000' stroke-width='1.8' stroke-dasharray='2.3 2.1'/%3E%3C/svg%3E");
}

/* Контраст подписи на заливке измерен по WCAG 2.x для всех трёх поверхностей,
   на которых чип встречается (--surface, --sunken, --raised):
     оплачено   --leaf   на --leaf-tint    7.61 / 8.12 / 6.34
     просрочено --ember  на --ember-tint   5.74 / 6.11 / 4.81
     сегодня и частично --window на --window-tint  8.11 / 8.66 / 6.77
     ждём оплату и свободна --soft на --raised     7.64
     данных нет --soft на --raised                 7.64
   Минимум 4.81 — выше порога 4.5:1 (CONVENTIONS §8). */

/* Прежний ореол вокруг метки (`box-shadow` у `.sc-window-chips .chip--paid`)
   теперь обрезается маской значка и смысла не имеет: значок сам несёт форму.
   Гасим, чтобы он не оставлял прямоугольного отсвета под галочкой. */
.chip.chip--paid:before,
.chip.chip--occupied:before,
.chip.chip--partial:before,
.chip.chip--expected:before,
.chip.chip--due_today:before {
  box-shadow: none;
}

/* --- Предупреждение о выезде: карточка квартиры (CARD-3, REQUIREMENTS.md
   п. 85) — тлеющий, тот же цвет, что у просрочки: оба факта требуют
   одинакового внимания управляющего (решение владельца). Не входит в
   таблицу шести состояний вверху файла — значка у него нет, факт называет
   дата словами, а не форма; общий `.chip.chip--compact` (ниже) сам снимает
   рамку и заливку, здесь остаётся только цвет текста. */
.chip--leaving {
  color: var(--ember);
}

/* --- Компактный вариант: карточки квартир на экране дома (CARD-2/CARD-3,
   REQUIREMENTS.md п. 77 и п. 85) --- */

/* Без рамки и заливки — на карточке 100 px чип стоит прямо на её цвете
   состояния, вторая подложка только отняла бы место. Значок и цвет подписи
   остаются от state-класса (`.chip--paid` и т. п.), здесь меняется только
   короб. Два класса в селекторе — специфичность выше одиночного
   `.chip--paid`/`.chip--vacant`, поэтому побеждает независимо от порядка
   объявлений выше. */
.chip.chip--compact {
  min-height: 0;
  padding: 0;
  gap: 3px;
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.1px;
}

.chip.chip--compact:before {
  width: 11px;
  height: 11px;
  -webkit-mask-size: 11px 11px;
  mask-size: 11px 11px;
}

/* Значок без подписи (счётчики): сама кнопка карточки уже называет его
   полным словом в title/aria-label (23-house.js, houseCardLabel()) — второй
   подписи рядом со значком на карточке не помещалось ни разу из измеренных
   сочетаний. Значку тогда нужен свой размер поля, раз в нём нет текста. */
.chip.chip--compact:empty {
  width: 11px;
  height: 11px;
}