/* Цвет со смыслом: тона иконок, статусы записи, направление денег. Цвет никогда не один — рядом иконка или слово. */

.tone-green { --tone: var(--tone-green); }
.tone-blue { --tone: var(--tone-blue); }
.tone-indigo { --tone: var(--tone-indigo); }
.tone-orange { --tone: var(--tone-orange); }
.tone-pink { --tone: var(--tone-pink); }
.tone-teal { --tone: var(--tone-teal); }
.tone-brown { --tone: var(--tone-brown); }
.tone-gray { --tone: var(--tone-gray); }
.tone-red { --tone: var(--tone-red); }
.tone-amber { --tone: var(--tone-amber); }

/* Квадрат как в Настройках iPhone: сплошной тон, белая иконка («Ещё») */
.tile-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--tone, var(--tone-gray));
  color: var(--accent-ink);
}

.tile-icon .icon {
  width: 21px;
  height: 21px;
  stroke-width: 2;
}

/* Мягкий кружок: подложка 14 % тона, иконка тоном (плитки «Сегодня», шапки карточек) */
.soft-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: color-mix(in srgb, var(--tone, var(--tone-gray)) 14%, white);
  color: var(--tone, var(--tone-gray));
}

.soft-icon .icon {
  width: 19px;
  height: 19px;
  stroke-width: 2;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.card-title h2 {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 17px;
}

a.card-title:hover h2 {
  color: var(--accent-text);
}

.card-title .title-arrow {
  width: 16px;
  height: 16px;
  color: var(--chevron);
}

/* ---------- Статусы записи ---------- */
.status-pill-booked { color: var(--info-ink); background: var(--info-soft); }
.status-pill-confirmed { color: var(--pos-ink); background: var(--pos-soft); }
.status-pill-done { color: var(--done-ink); background: var(--done-soft); }
.status-pill-cancelled { color: var(--neg-ink); background: var(--neg-soft); }
.status-pill-no_show { color: var(--warn-ink); background: var(--warn-soft); }
.pill.green,
.pill.pos { color: var(--pos-ink); background: var(--pos-soft); }
.pill.warning { color: var(--warn-ink); background: var(--warn-soft); }
.pill.online { color: var(--online-ink); background: var(--online-soft); }
.pill.neg { color: var(--neg-ink); background: var(--neg-soft); }
.pill.done { color: var(--done-ink); background: var(--done-soft); }

.upcoming-row .pill {
  font-size: 12px;
  padding: 3px 9px;
}

/* В «Ближайших записях» чип уходит под услугу: имя не сжимается в две строки */
.upcoming-row .row-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
  justify-items: start;
}

.upcoming-row .row-main .pill {
  margin-top: 4px;
}

.sheet-status .pill + .pill {
  margin-left: 6px;
}

/* ---------- Суммы: цвет по направлению для того, кто смотрит ---------- */
.amount {
  font-weight: 650;
  white-space: nowrap;
}

.amount.pos,
.ink-pos { color: var(--pos-ink); }
.amount.neg,
.ink-neg { color: var(--neg-ink); }
.amount.signed.pos::before { content: "+"; }

/* «Кто кому должен»: имя с точкой мастера, под ним направление, сумма справа */
.balance-row .row-main {
  display: grid;
  gap: 4px;
  justify-items: start;
}

.balance-row .row-main strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}

/* Сумма в строке — справа, столбцом (и в списке расходов) */
.balance-row > .amount {
  margin-left: auto;
}

.balance-sum {
  font-size: 16px;
}

/* ---------- Способы оплаты: иконка в чипе ---------- */
.payment-chip span {
  gap: 8px;
}

.payment-chip .icon {
  width: 18px;
  height: 18px;
}

.payment-chip input:checked + span {
  background: var(--pos-soft);
  color: var(--pos-ink);
}