/* Пульс сбора в шапке CRM (Р-277, по образцу виджета «На счетах» ПланФакта;
 * shared/_collection_pulse, collection_pulses/show). Кнопка на тёмной шапке:
 * «Собрано · октябрь» и сумма, ниже полоса «оплачено из начисленного», справа
 * мини-график за 12 месяцев — идущий месяц акцентом. Панель — белая, под
 * кнопкой: сумма с определением, доля, помесячно, по объектам. Только на
 * десктопе (≥ 1180): в компактном режиме шапке хватает бургера, названия и
 * «кто я». Цвета, кегли и радиусы — токены tokens.css; без инлайн-стилей (CSP):
 * высоты мини-графика — атрибутами SVG. */

.app-pulse {
  display: none;
  position: relative;
  flex: none;
  margin-left: auto;
}

@media (min-width: 1180px) {
  .app-pulse {
    display: block;
  }

  .app-pulse + .app-user-menu {
    margin-left: var(--space-6);
  }
}

.app-pulse__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 44px;
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius);
  color: var(--chrome-text);
  list-style: none;
  cursor: pointer;
}

.app-pulse__trigger::-webkit-details-marker {
  display: none;
}

.app-pulse__trigger:hover,
.app-pulse[open] .app-pulse__trigger {
  background: var(--chrome-bg-active);
}

.app-pulse__trigger:focus-visible {
  outline: 2px solid var(--chrome-icon-active);
  outline-offset: -2px;
}

.app-pulse__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.app-pulse__line {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  white-space: nowrap;
}

.app-pulse__label {
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  color: var(--chrome-text-muted);
}

.app-pulse__trigger .app-pulse__value {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: 600;
  color: var(--chrome-text);
}

.app-pulse__chevron {
  flex: none;
  color: var(--chrome-text-muted);
  transition: transform .15s ease-out;
}

.app-pulse[open] .app-pulse__chevron {
  transform: rotate(180deg);
}

.app-pulse__line--sub {
  gap: var(--space-2);
}

/* Полоса «оплачено из начисленного»: заливка акцентом по тёмной дорожке */
.app-pulse__meter {
  flex: none;
  width: 72px;
  height: 4px;
  appearance: none;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--chrome-meter-track);
  overflow: hidden;
}

.app-pulse__meter::-webkit-progress-bar {
  background: var(--chrome-meter-track);
}

.app-pulse__meter::-webkit-progress-value {
  background: var(--chrome-icon-active);
  border-radius: var(--radius-pill);
}

.app-pulse__meter::-moz-progress-bar {
  background: var(--chrome-icon-active);
  border-radius: var(--radius-pill);
}

.app-pulse__rate {
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--chrome-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Мини-график: прошлые месяцы приглушённо, идущий — акцентом */
.app-pulse__spark {
  flex: none;
  display: block;
}

.app-pulse__bar {
  fill: var(--chrome-spark);
}

.app-pulse__bar--current {
  fill: var(--chrome-icon-active);
}

/* Месяц до начала учёта — данных нет, тусклый штрих по дну */
.app-pulse__bar--empty {
  fill: var(--chrome-meter-track);
}

/* ============================================================
 * Панель: белая, под кнопкой, правым краем к ней
 * ============================================================ */

.app-pulse__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: var(--pulse-panel-width);
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-panel);
  box-shadow: var(--ios-shadow-popover);
  color: var(--text);
}

.pulse-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pulse-panel__loading {
  margin: 0;
  padding: var(--space-6) 0;
  text-align: center;
  font-size: var(--font-size-secondary);
  color: var(--text-muted);
}

.pulse-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.pulse-panel__figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}

.pulse-panel .pulse-panel__sum {
  font-size: var(--font-size-pulse-sum);
  line-height: var(--line-height-pulse-sum);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}

.pulse-panel__meta {
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--text-muted);
}

/* Определение метрики под числом — из словаря (metric_note) */
.pulse-panel__note {
  margin: 0;
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--text-muted);
}

.pulse-panel__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pulse-panel__title {
  margin: 0;
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  font-weight: 600;
  color: var(--text);
}

/* По объектам: точка, название и просрочка красным словом, справа собрано */
.pulse-panel__rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pulse-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-2-5);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-soft);
}

.pulse-row:first-child {
  border-top: 0;
}

.pulse-row__dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: var(--radius-pill);
  background: var(--success-dot);
}

.pulse-row__dot--danger {
  background: var(--field-error-border);
}

.pulse-row__name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pulse-row__link {
  overflow: hidden;
  color: var(--text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pulse-row__link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.pulse-row__debt {
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--danger);
}

.pulse-row__sum {
  padding-top: 1px;
  white-space: nowrap;
}

.pulse-panel__empty {
  margin: 0;
  font-size: var(--font-size-secondary);
  color: var(--text-muted);
}

.pulse-panel__debtors {
  display: block;
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  text-decoration: none;
}

.pulse-panel__debtors:hover {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .app-pulse__chevron {
    transition: none;
  }
}