/*
 * §ROP Mini App — тема LOGICA (референс-бриф владельца 2026-07-09,
 * макет-эталон утверждён).
 *
 * Токены в этом :root-блоке — ЕДИНСТВЕННОЕ место с конкретными цветами.
 * Дальнейший рестайл = правка значений здесь, разметка/классы ниже не
 * меняются (тот же принцип, что этап 2 - каркас/тема разделены).
 *
 * Фиксированная брендовая тёмная палитра (НЕ производная от Telegram
 * themeParams, в отличие от этапа-2 черновика) — владелец задал
 * definitive-дизайн, app.js больше не переопределяет эти переменные из
 * themeParams (см. app.js::applyTheme).
 */

:root {
  /* --- Базовые поверхности --- */
  --bg: #0a0a0b;
  --card: #1c1c1e;
  --card-2: #2c2c2e; /* графит — вторичные кнопки/аватары */
  --divider: rgba(255, 255, 255, 0.08);

  /* --- Акценты (СТРОГО ограниченное применение, см. компоненты ниже) --- */
  --accent: #e8744b; /* ТОЛЬКО счётчики молчащих/бейджи "N-й день"/"+N новых"/прогресс-бар */
  --success: #34c759; /* ТОЛЬКО "контакт подтверждён" */
  /* Красного нет нигде — намеренно отсутствует переменная --danger. */

  /* --- CTA (светлая пилюля, инверсия) --- */
  --cta-bg: #f5f5f7;
  --cta-text: #0a0a0b;

  /* --- Текст --- */
  --text-primary: #ffffff;
  --text-secondary: #8e8e93;

  /* --- Типографика --- */
  --font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-lg: 17px;
  --font-size-summary: 44px;
  --line-height-base: 1.4;

  /* --- Spacing scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* --- Радиусы --- */
  --radius-card: 18px;
  --radius-pill: 999px;

  /* --- Тап-таргеты (§7.5 ТЗ — мобильный основной канал) --- */
  --tap-target-min: 44px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  /* "допустим едва заметный тёмный градиент" — очень лёгкий radial-overlay */
  background:
    radial-gradient(120% 60% at 50% -10%, #141416 0%, transparent 60%),
    var(--bg);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* --- Шапка --- */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  gap: var(--space-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.brand__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--card-2);
  color: var(--text-primary);
  font-weight: 700;
  font-size: var(--font-size-base);
}

.brand__name {
  font-weight: 600;
  font-size: var(--font-size-lg);
}

.freshness {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.freshness__refresh {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: var(--space-1);
  min-width: var(--tap-target-min);
  min-height: var(--tap-target-min);
}

#footer-freshness {
  justify-content: center;
  padding: 0 var(--space-4) var(--space-4);
}

/* Роль смотрящего — подпись под брендом, только на root (§ макет — минимализм). */
.app-header__viewer {
  margin: 0;
  padding: 0 var(--space-4) var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* --- Баннер деградации (CC-MA-4) — нейтральный, БЕЗ accent/красного
   (accent зарезервирован строго под счётчики, красного нет нигде). --- */

.banner {
  margin: 0 var(--space-4) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--card);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.app-main {
  flex: 1;
  padding: 0 var(--space-4) var(--space-4);
  overflow-y: auto;
}

.state {
  padding: var(--space-6) var(--space-3);
  text-align: center;
  color: var(--text-secondary);
}

.state--error {
  color: var(--text-secondary); /* намеренно НЕ красный */
}

/* --- Сводка root-экрана --- */

.summary {
  padding: var(--space-4) 0 var(--space-5);
}

.summary__label {
  margin: 0 0 var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

.summary__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.summary__value {
  font-size: var(--font-size-summary);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.summary__delta {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--accent);
}

.progress {
  margin-top: var(--space-4);
}

.progress__track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--card-2);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.progress__caption {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* --- Grouped list (iOS-style) — направления/РГ/брокеры. --- */

.grouped-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  background: var(--card);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.list-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target-min);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--divider);
  cursor: pointer;
}

.list-row:last-child {
  border-bottom: none;
}

.list-row:active {
  background: rgba(255, 255, 255, 0.04);
}

.avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--card-2);
  color: var(--text-primary);
  font-weight: 700;
  font-size: var(--font-size-sm);
}

.list-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.list-row__title {
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-row__subtitle {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.chevron {
  flex: none;
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
}

/* --- Бейдж-пилюля --- */

.badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.badge--accent {
  background: var(--accent);
  color: #ffffff;
}

/* --- Кнопки --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-target-min);
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.btn--cta {
  width: 100%;
  background: var(--cta-bg);
  color: var(--cta-text);
  font-size: var(--font-size-base);
}

.btn--secondary {
  background: var(--card-2);
  color: var(--text-primary);
}

.btn--ready-disabled {
  background: var(--card-2);
  color: var(--text-secondary);
  cursor: default;
}

/* Флеш-состояние кнопки «Сменить стадию» ПОСЛЕ реального успеха Bitrix
   (status==="success", app.js::renderStageChangerSection) — ~5 секунд,
   читается как подтверждение успеха, не тревога. Единственное новое
   применение --accent этой правкой (владелец 2026-07-10). */
.btn--stage-success {
  background: var(--accent);
  color: var(--text-primary);
  cursor: default;
}

/* --- Уровень entities --- */

.level-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-4);
}

.level-header__back {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  padding: 0;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-lg);
  font-weight: 600;
  cursor: pointer;
  min-height: var(--tap-target-min);
}

.level-header__arrow {
  color: var(--text-secondary);
}

.entity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.entity-card {
  padding: var(--space-4);
  background: var(--card);
  border-radius: var(--radius-card);
}

.entity-card__row1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.entity-card__title {
  color: var(--text-primary);
  font-weight: 700;
  font-size: var(--font-size-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-card__days {
  flex: none;
  color: var(--accent);
  font-weight: 700;
  font-size: var(--font-size-base);
}

.entity-card__row2 {
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.entity-card__meta {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-card__meta--confirmed {
  color: var(--success);
}

.entity-card__repeat-badge {
  flex: none;
  color: var(--accent);
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
}

.entity-card__actions {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* --- Карточка сделки/лида (renderCard) — этап A «дизайн-полиш» (docs/
   architecture-rop-tgcrm-card-polish.md §9). Токены — ТОЛЬКО var(--...),
   0 новых hex-литералов, 0 новых токенов в :root. --- */

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

.entity-detail__hero {
  padding: var(--space-4);
  background: var(--card);
  border-radius: var(--radius-card);
}

.entity-detail__hero-row1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.entity-detail__hero-title {
  color: var(--text-primary);
  font-weight: 700;
  font-size: var(--font-size-lg);
}

.entity-detail__hero-days {
  flex: none;
  color: var(--accent);
  font-weight: 700;
  font-size: var(--font-size-lg);
}

.entity-detail__hero-identity {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.entity-detail__facts {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.entity-detail__fact {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}

.entity-detail__fact-label {
  color: var(--text-secondary);
}

.entity-detail__fact-value {
  color: var(--text-primary);
  text-align: right;
}

/* --- Стадия-факт (card-v2.1, приёмка владельца 2026-07-10) — выделена ярче
   прочих фактов (жирнее + чуть крупнее), НО БЕЗ --accent (accent строго
   зарезервирован под "N дн без контакта"/счётчики, CC-RCP-6/CC-RCP2-8) —
   не конкурирует с оранжевым предупреждением. --- */

.entity-detail__fact-value--stage {
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--font-size-base);
}

/* --- Секц-блок (Комментарии/Звонки/Активность/write-секции), §6 архдока —
   ЕДИНСТВЕННОЕ место разметки заголовка секции (h3 + опц. бейдж). --- */

.section-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.section-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.section-block__title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: 600;
}

.section-block__content {
  padding: var(--space-3) var(--space-4);
  background: var(--card);
  border-radius: var(--radius-card);
}

.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.activity-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--divider);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-item__row1 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.activity-item__kind {
  font-weight: 600;
  color: var(--text-primary);
}

.activity-item__time {
  color: var(--text-secondary);
}

.activity-item__text {
  margin: var(--space-1) 0 0;
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

/* --- Свёртка ленты (docs/architecture-rop-tgcrm-card-polish-v2.md §3.2,
   CC-RCP2-5/CC-RCP2-7/CC-RCP2-8) — тап-таргет ≥44px, БЕЗ --accent (toggle —
   вторичное действие, не счётчик). --- */

.activity-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.activity-group__toggle {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--font-size-sm);
  padding: var(--space-2) 0;
  min-height: var(--tap-target-min);
}

/* --- Телефон-подпись над списком звонков (docs/architecture-rop-tgcrm-
   card-polish-v2.md §3.1/CC-RCP2-1) — факт, НЕ счётчик, БЕЗ --accent. --- */

.section-block__phone {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

/* --- Write-секции (комментарий/смена стадии) — фон/радиус теперь даёт
   .section-block__content (избегаем «карточка внутри карточки»), здесь
   только внутренняя типографика полей (§8 архдока). --- */

.comment-composer,
.stage-changer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.comment-composer__input {
  background: var(--card-2);
  color: var(--text-primary);
  border: none;
  border-radius: 12px;
  padding: var(--space-3);
  font: inherit;
  font-size: var(--font-size-base);
  resize: vertical;
  min-height: var(--tap-target-min);
}

.comment-composer__input::placeholder {
  color: var(--text-secondary);
}

.stage-changer__select {
  background: var(--card-2);
  color: var(--text-primary);
  border: none;
  border-radius: 12px;
  padding: 0 var(--space-3);
  min-height: var(--tap-target-min);
  font: inherit;
  font-size: var(--font-size-base);
}

/* Неуспех POST /stage (status !== "success" или сетевая ошибка) — стадия
   НЕ меняется, инлайн-текст под селектором (§Красного нет нигде — обычный
   text-secondary, БЕЗ --danger токена, его в палитре и так нет). */
.stage-changer__error {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

/* --- Fallback-навигация вне Telegram --- */

.fallback-nav {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--divider);
}

/* --- DEMO-режим (demo.html — скрин-рендеры для владельца, НЕ боевая
   страница) — явная плашка, чтобы никто не спутал мок-числа с реальными. --- */

.demo-flag {
  /* Намеренно НЕ --accent (зарезервирован строго под счётчики/бейджи, см.
     :root) — это dev-only маркер, не часть продуктового UI. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--card-2);
  color: var(--text-primary);
  text-align: center;
  font-size: 12px;
  padding: var(--space-1);
}

.app--demo {
  margin-top: 22px;
}