/* =====================================================================
   FIDEX OS — экран интеграции amoCRM, этап 0 (макет), фаза 6.
   Только токены из styles.css (:root) плюс собственные, объявленные
   здесь же по тому же контракту (light/dark media/data-theme).
   Подключается после styles.css и feed.css в общей сборке
   (см. maket/tools/build.py). Общие классы .chip*, .hatch, .nodata,
   .btn*, .post переиспользуются как есть; свой вид — только в .amo-*.
   ===================================================================== */

:root{
  --amo-cover-2: #2451D6;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --amo-cover-2: #5B7CFA;
  }
}
:root[data-theme="dark"]{
  --amo-cover-2: #5B7CFA;
}

.amo-screen{
  /* Нижняя панель вкладок (FX.boot) — 56px + safe-area; запас, чтобы не
     перекрывала последнюю карточку. */
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

/* ---------------------------------------------------------------------
   Шапка — как страница компании: обложка + аватар + плашки
   --------------------------------------------------------------------- */

.amo-header{
  padding: 12px 0 4px;
}

.amo-back{
  padding-inline: 10px;
  margin-bottom: 8px;
}

.amo-cover-wrap{
  position: relative;
  margin: 4px 0 40px;
}

.amo-cover{
  height: 96px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--teal), var(--amo-cover-2));
}

.amo-avatar{
  position: absolute;
  left: 16px;
  bottom: -32px;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 3px solid var(--surface);
  background: var(--teal);
  color: var(--teal-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  text-transform: lowercase;
}

.amo-title{
  font-size: var(--fs-lg);
  margin-bottom: 10px;
}

/* ---------------------------------------------------------------------
   Ряд кнопок действий — как у страницы компании Facebook: асосий,
   иккинчи даражали, «⋯». Тач-цели ≥44px через .btn/.icon-btn (общие).
   --------------------------------------------------------------------- */

.amo-actions{
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.amo-action-btn{
  flex: 1 1 auto;
  white-space: nowrap;
}

.amo-action-more{
  flex: 0 0 auto;
  font-size: var(--fs-md);
  font-weight: 700;
}

.amo-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.amo-chip-btn{
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}

/* Обёртка даёт цель касания 44px без превращения самого чипа в «таблетку» */
.amo-chip-tap{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

/* свежесть данных — зелёная, если не устарели (--good), иначе chip-stale */
.amo-chip-fresh{
  background: color-mix(in srgb, var(--good) 18%, var(--surface));
  color: var(--good);
}

.amo-fresh-note{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--amber-soft);
  color: var(--amber);
  font-size: var(--fs-xs);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
}

/* ---------------------------------------------------------------------
   Вкладки — текстовые, подчёркивание активной, прокрутка в своей полосе
   --------------------------------------------------------------------- */

.amo-tabs-wrap{
  margin: 8px 0 4px;
  border-bottom: 1px solid var(--line);
}

.amo-tabs{
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.amo-tabs::-webkit-scrollbar{ display: none; }

.amo-tab{
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 2px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.amo-tab.is-active{
  color: var(--ink);
  border-bottom-color: var(--teal);
}

/* ---------------------------------------------------------------------
   Тело экрана — карточки как посты ленты: белый блок на всю ширину,
   разделены полосой фона (.post + .post из styles.css)
   --------------------------------------------------------------------- */

.amo-body{
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}

.amo-period-title{
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}

/* ---------------------------------------------------------------------
   «Qisqacha» (Intro) — короткие факты с иконками, без реакций
   --------------------------------------------------------------------- */

.amo-intro-row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-size: var(--fs-xs);
  color: var(--ink);
}

.amo-intro-icon{
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--muted);
}
.amo-intro-icon svg{ width: 100%; height: 100%; display: block; }

.amo-intro-text{ min-width: 0; padding-top: 1px; }

/* ---------------------------------------------------------------------
   Sheet-panel списки выбора («Vazifa yaratish», меню «⋯» страницы)
   --------------------------------------------------------------------- */

.amo-task-pick-list{
  display: flex;
  flex-direction: column;
}

.amo-task-pick-row{
  width: 100%;
  min-height: 44px;
  padding: 12px 4px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink);
  cursor: pointer;
}
.amo-task-pick-row:last-child{ border-bottom: none; }
.amo-task-pick-row:active{ opacity: .7; }

/* ---------------------------------------------------------------------
   «Ulanish holati» — лист
   --------------------------------------------------------------------- */

.amo-conn-row{
  font-size: var(--fs-xs);
  margin: 0 0 8px;
}

.amo-conn-warning{
  margin: 4px 0 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--amber-soft);
  color: var(--amber);
  font-size: var(--fs-xs);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
}

.amo-archive-title{
  margin: 16px 0 8px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
}

/* Вывод одним предложением — заголовок каждой карточки */
.amo-fact{
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--ink);
  margin-bottom: 10px;
}

/* ---------------------------------------------------------------------
   Строки «подпись слева | число справа», тонкие разделители
   --------------------------------------------------------------------- */

.amo-row-list{
  display: flex;
  flex-direction: column;
}

.amo-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--ink);
  text-align: left;
}
.amo-row:last-child{ border-bottom: none; }

.amo-row-clickable{ cursor: pointer; }
.amo-row-clickable:active{ opacity: .7; }

.amo-row-label{ color: var(--muted); }

.amo-row-right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.amo-row-value{
  font-weight: 700;
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.amo-row-compare{
  font-size: var(--fs-2xs);
}

/* ---------------------------------------------------------------------
   Лента событий (Umumiy) — как активность Facebook: аватар-инициал,
   текст, время мелко; первые 5, «Yana koʻrsatish» открывает остальные.
   --------------------------------------------------------------------- */

.amo-events-head-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.amo-event-list{
  display: flex;
  flex-direction: column;
}

.amo-event{
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.amo-event:last-child{ border-bottom: none; }

.amo-event-avatar{
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
}

.amo-event-time{
  font-size: var(--fs-2xs);
  padding-top: 2px;
}

.amo-event-body{ min-width: 0; flex: 1; }

.amo-event-kind{
  font-size: var(--fs-2xs);
  color: var(--teal);
  font-weight: 700;
}

.amo-event-text{
  font-size: var(--fs-xs);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.amo-event-pipeline{
  font-size: var(--fs-2xs);
  margin-top: 2px;
}

.amo-event-more{
  margin-top: 10px;
  width: 100%;
}

/* Вывод-шаг карточки (пункт 6 fb-patterns: «Qadam: …») */
.amo-step{
  font-size: var(--fs-xs);
  margin-top: 8px;
}

/* ---------------------------------------------------------------------
   Воронка / звонки — строки «название | толстая полоса | число»
   --------------------------------------------------------------------- */

.amo-pipeline{
  display: block;
}
.amo-pipeline[open] > .amo-pipeline-head::after{ content: '\2212'; }

.amo-pipeline-head{
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--ink);
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
summary.amo-pipeline-head::-webkit-details-marker{ display: none; }
summary.amo-pipeline-head::after{
  content: '+';
  margin-left: auto;
  color: var(--muted);
  font-family: var(--font-body);
}

.amo-pipeline-body{
  margin-top: 4px;
}

.amo-funnel{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.amo-funnel-row{
  display: grid;
  grid-template-columns: minmax(96px, 42%) 1fr auto;
  align-items: center;
  gap: 8px;
}

.amo-funnel-name{
  font-size: var(--fs-2xs);
  color: var(--muted);
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.25;
}

.amo-funnel-bar{
  height: 10px;
  border-radius: 6px;
  background-color: var(--surface-2);
  overflow: hidden;
}

.amo-funnel-fill{
  height: 100%;
  background: var(--teal);
  border-radius: 6px;
  min-width: 6px;
}

.amo-funnel-count{
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}

/* недостающий этап — штриховка янтарно-бежевая по всей полосе + «yoʻq» */
.amo-funnel-row-missing .amo-funnel-bar{
  background-image: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--amber) 30%, transparent),
    color-mix(in srgb, var(--amber) 30%, transparent) 6px,
    transparent 6px,
    transparent 14px
  );
  background-color: var(--amber-soft);
}

.amo-funnel-count-missing{ color: var(--amber); }

.amo-pipeline-explain{
  font-size: var(--fs-xs);
  margin-bottom: 10px;
}

.amo-pipeline-task-btn{
  margin-bottom: 10px;
}

.amo-pipeline-meta{
  font-size: var(--fs-xs);
}

.amo-pipeline-def{
  margin-top: 4px;
}

/* ---------------------------------------------------------------------
   Задача «создать босqич»
   --------------------------------------------------------------------- */

.amo-task-steps{
  padding-left: 20px;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.amo-task-result{
  font-size: var(--fs-xs);
}

/* ---------------------------------------------------------------------
   Звонки — деталь-карточка (длительность/результат/примечание)
   --------------------------------------------------------------------- */

.amo-calls-summary{
  font-size: var(--fs-xs);
}

.amo-calls-detail > .source-caption{
  display: block;
  margin-bottom: 10px;
}

.amo-nodata-row{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.amo-note{
  font-size: var(--fs-xs);
  color: var(--ink);
  margin-top: 10px;
}

/* ---------------------------------------------------------------------
   Менеджеры — профиль-карточки: аватар-инициал, имя, 3 числа в ряд.
   Без рейтингов и оценок.
   --------------------------------------------------------------------- */

.amo-manager-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.amo-manager-avatar{
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--teal);
  color: var(--teal-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.amo-manager-name{
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--ink);
}

.amo-manager-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
}

.amo-manager-stat{
  padding: 10px 4px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.amo-manager-stat-value{
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
}

.amo-manager-stat-label{
  font-size: var(--fs-2xs);
  margin-top: 2px;
}

/* ---------------------------------------------------------------------
   Nima yetishmaydi
   --------------------------------------------------------------------- */

.amo-missing-head-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.amo-missing-head-title{
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--ink);
}

.amo-missing-head-count{
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--teal);
  white-space: nowrap;
}

.amo-missing-list{
  display: flex;
  flex-direction: column;
}

.amo-missing-row{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 12px 0;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
}
.amo-missing-row:last-child{ border-bottom: none; }
.amo-missing-row:active{ opacity: .7; }

.amo-missing-icon{
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--muted);
}
.amo-missing-icon svg{ width: 100%; height: 100%; display: block; }

.amo-missing-body{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.amo-missing-row-text{
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

.amo-missing-unlocks{
  font-size: var(--fs-2xs);
}

.amo-missing-all{
  margin-top: 10px;
}

.amo-missing-sheet-why{
  font-size: var(--fs-sm);
  margin: 0 0 8px;
}

.amo-missing-sheet-unlocks{
  font-size: var(--fs-xs);
  margin: 0 0 14px;
}

/* ---------------------------------------------------------------------
   Лист «типы данных»
   --------------------------------------------------------------------- */

.amo-type-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.amo-type-row{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  min-height: 32px;
}

.amo-type-mark{
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xs);
  font-weight: 700;
}

.amo-type-ok .amo-type-mark{
  background: color-mix(in srgb, var(--good) 20%, var(--surface));
  color: var(--good);
}

.amo-type-missing .amo-type-mark{
  background: color-mix(in srgb, var(--nodata) 20%, var(--surface));
  color: var(--nodata);
}

.amo-type-missing{ color: var(--muted); }

/* ---------------------------------------------------------------------
   Разное: заголовки no-data блоков внутри звонков
   --------------------------------------------------------------------- */

.amo-stat-title{
  font-size: var(--fs-2xs);
  color: var(--muted);
}

/* Цели касания не меньше 44px (ТЗ §5, фаза 4). amo-chip-btn — через
   .amo-chip-tap выше, чтобы сам чип не растягивался в «таблетку»;
   .amo-pipeline-task-btn/.amo-missing-all уже ≥44px через общий .btn. */
.amo-pipeline-task-btn, .amo-missing-all { min-height: 44px; display: inline-flex; align-items: center; }