/* telegram-modern (tgm) — современный оверлей раздела «Digital / Telegram».
   Подтягивает экран Инвайтер/Модератор/Рассылка под единый язык раздела
   «Управление HR-ботом» (agent-console-redesign.css): те же токены, дисплейный шрифт
   Bricolage Grotesque в заголовках, синий акцент, ease-кривая, focus-ring, тактильный
   hover (lift + тень + акцентная рамка), пульс-точка статуса.

   АДДИТИВНО: не правит telegram-admin.css (его ведёт другой автор) — переопределяет за счёт
   более высокой специфичности (#screenRoot:has(.tg-card) …). Подключать ПОСЛЕ telegram-admin.css. */

/* ── токены (зеркало консоли HR-бота), только когда на экране telegram-карта ── */
#screenRoot:has(.tg-card){
  --c-canvas:#ffffff;
  --c-surface:#ffffff;
  --c-surface-2:#f6f9fe;
  --c-line:#e3ecf7;
  --c-line-soft:#eef3fa;
  --c-accent:#1f73e0;
  --c-accent-deep:#075ecb;
  --c-accent-soft:#eaf3ff;
  --c-accent-line:#cfe0f9;
  --c-ink:#0d1b3e;
  --c-ink-soft:#46587a;
  --c-ink-faint:#8595b5;
  --c-active:#16a34a;
  --c-ease:cubic-bezier(.2,.75,.2,1);
  --c-r-card:16px;
  --c-r-mid:12px;
  --c-shadow-sm:0 1px 2px rgba(20,50,100,.05),0 1px 1px rgba(20,50,100,.03);
  --c-shadow-md:0 10px 26px -14px rgba(20,50,100,.28),0 2px 6px -2px rgba(20,50,100,.08);
}

/* ── заголовки — дисплейный шрифт как в консоли ── */
#screenRoot:has(.tg-card) .tg-head h1,
#screenRoot:has(.tg-card) .tg-block h4,
#screenRoot:has(.tg-card) .tg-form h4,
#screenRoot:has(.tg-card) .tgs-head h4,
#screenRoot:has(.tg-card) .tgs-dh,
#screenRoot:has(.tg-card) .tg-metric__val,
#screenRoot:has(.tg-card) .tgs-n,
#screenRoot:has(.tg-card) .tgs-bn,
#screenRoot:has(.tg-card) .tgs-donut-c b{
  font-family:'Bricolage Grotesque',Manrope,sans-serif;
  letter-spacing:-.02em;
  color:var(--c-ink);
}
#screenRoot:has(.tg-card) .tg-block h5{
  color:var(--c-ink-faint);
}

/* ── карта-обёртка ── */
#screenRoot:has(.tg-card) .tg-card{
  border:1px solid var(--c-line);
  border-radius:var(--c-r-card);
  box-shadow:var(--c-shadow-sm);
}

/* ── вкладки ботов: подсветка при наведении как в консоли ── */
#screenRoot:has(.tg-card) #tgTabs .bot-tab{
  transition:color .16s var(--c-ease),background-color .16s var(--c-ease);
  border-radius:9px;
}
#screenRoot:has(.tg-card) #tgTabs .bot-tab:hover{
  color:var(--c-accent);
  background:var(--c-accent-soft);
}
#screenRoot:has(.tg-card) #tgTabs .bot-tab.active{
  color:var(--c-accent);
}

/* ── кнопки ── */
#screenRoot:has(.tg-card) .tg-btn{
  background:var(--c-accent);
  border-radius:var(--c-r-mid);
  box-shadow:0 1px 2px rgba(20,50,100,.10);
  transition:background-color .16s var(--c-ease),transform .16s var(--c-ease),box-shadow .16s var(--c-ease);
}
#screenRoot:has(.tg-card) .tg-btn:hover{
  background:var(--c-accent-deep);
  filter:none;
  transform:translateY(-1px);
  box-shadow:var(--c-shadow-md);
}
#screenRoot:has(.tg-card) .tg-btn:active{transform:translateY(0)}
#screenRoot:has(.tg-card) .tg-btn.ghost{
  background:var(--c-surface);
  color:var(--c-ink-soft);
  border:1px solid var(--c-line);
  box-shadow:var(--c-shadow-sm);
}
#screenRoot:has(.tg-card) .tg-btn.ghost:hover{
  background:var(--c-accent-soft);
  color:var(--c-accent);
  border-color:var(--c-accent-line);
}
#screenRoot:has(.tg-card) .tg-btn[disabled]{transform:none;box-shadow:none}

/* ── метрики/стат-карточки: единый радиус, тень и тактильный hover-lift ── */
#screenRoot:has(.tg-card) .tg-metric,
#screenRoot:has(.tg-card) .tgs-card,
#screenRoot:has(.tg-card) .tgs-vcard,
#screenRoot:has(.tg-card) .tgs-bcard,
#screenRoot:has(.tg-card) .tgs-donutcard,
#screenRoot:has(.tg-card) .tg-acc>div{
  border:1px solid var(--c-line);
  border-radius:var(--c-r-card);
  background:var(--c-surface);
  box-shadow:var(--c-shadow-sm);
  transition:transform .18s var(--c-ease),box-shadow .18s var(--c-ease),border-color .18s var(--c-ease);
}
#screenRoot:has(.tg-card) .tg-metric:hover,
#screenRoot:has(.tg-card) .tgs-card:hover,
#screenRoot:has(.tg-card) .tgs-bcard:hover,
#screenRoot:has(.tg-card) .tg-acc>div:hover{
  transform:translateY(-2px);
  box-shadow:var(--c-shadow-md);
  border-color:var(--c-accent-line);
}
#screenRoot:has(.tg-card) .tg-metric__lbl,
#screenRoot:has(.tg-card) .tgs-l{color:var(--c-ink-soft)}

/* ── пульсирующая точка статуса «онлайн» — beat из консоли ── */
#screenRoot:has(.tg-card) .tg-dot.green{
  background:var(--c-active);
  box-shadow:0 0 0 0 rgba(22,163,74,.5);
  animation:tgm-beat 2.4s infinite;
}
@keyframes tgm-beat{
  0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}
  70%{box-shadow:0 0 0 6px rgba(22,163,74,0)}
  100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}
}

/* ── строки-списки (группы, заблокированные): мягкая подсветка при наведении ── */
#screenRoot:has(.tg-card) .tg-grp,
#screenRoot:has(.tg-card) .tg-blocked-row{
  padding:8px 10px;
  border-radius:10px;
  transition:background-color .14s var(--c-ease);
}
#screenRoot:has(.tg-card) .tg-grp:hover,
#screenRoot:has(.tg-card) .tg-blocked-row:hover{background:var(--c-surface-2)}
#screenRoot:has(.tg-card) .tg-grp input,
#screenRoot:has(.tg-card) .tg-grp-add input{accent-color:var(--c-accent)}

/* ── поля ввода: единый focus-ring ── */
#screenRoot:has(.tg-card) .tg-form input,
#screenRoot:has(.tg-card) .tg-form select,
#screenRoot:has(.tg-card) .tg-grp-add input{
  border:1px solid var(--c-line);
  border-radius:var(--c-r-mid);
  background:var(--c-surface-2);
  color:var(--c-ink);
  transition:border-color .15s var(--c-ease),box-shadow .15s var(--c-ease),background-color .15s var(--c-ease);
}
#screenRoot:has(.tg-card) .tg-form input:focus,
#screenRoot:has(.tg-card) .tg-form select:focus,
#screenRoot:has(.tg-card) .tg-grp-add input:focus{
  outline:none;
  background:var(--c-surface);
  border-color:var(--c-accent-line);
  box-shadow:0 0 0 3px var(--c-accent-soft);
}

/* ── разделители блоков, подписи, состояния ── */
#screenRoot:has(.tg-card) .tg-block,
#screenRoot:has(.tg-card) .tg-form{border-top-color:var(--c-line)}
#screenRoot:has(.tg-card) .tg-form__note{color:var(--c-active)}
#screenRoot:has(.tg-card) .tg-empty{
  background:var(--c-surface-2);
  border:1px dashed var(--c-accent-line);
  border-radius:var(--c-r-mid);
  color:var(--c-ink-soft);
}
#screenRoot:has(.tg-card) .tg-empty code,
#screenRoot:has(.tg-card) .tg-acc span{color:var(--c-ink-faint)}
#screenRoot:has(.tg-card) .tg-status__right small,
#screenRoot:has(.tg-card) .tgs-l,
#screenRoot:has(.tg-card) .tgs-donut-c small{color:var(--c-ink-faint)}

/* ── чип-источник у заголовка вкладки (моно как .ag-src) ── */
#screenRoot:has(.tg-card) .tg-status__right b{color:var(--c-ink)}

/* ═══════════════════════════════════════════════════════════════════════════
   Референс-полировка «Digital / Telegram» (2026-08-08)
   Аддитивно поверх telegram-admin.css/.js. Подгоняет визуал под фото-референс:
   мягкие белые карточки, крупные числа, пастельные иконки, панели групп.
   Заливку под спарклайнами и сетку графика дорисовывает telegram-modern.js.
   Разметку и данные не меняем; всё под #screenRoot:has(.tg-card) — не течёт на
   другие экраны.
   ═══════════════════════════════════════════════════════════════════════════ */

#screenRoot:has(.tg-card){
  --tgm-bd:#eaeff6;
  --tgm-sh:0 1px 2px rgba(20,50,100,.04),0 6px 20px -12px rgba(20,50,100,.14);
  --tgm-sh-h:0 2px 4px rgba(20,50,100,.06),0 16px 32px -16px rgba(20,50,100,.22);
}

/* — карта-обёртка вкладки: больше воздуха — */
#screenRoot:has(.tg-card) .tg-card{border-color:var(--tgm-bd);box-shadow:var(--tgm-sh)}
#screenRoot:has(.tg-card) .bot-tab-content{padding:22px 22px 26px}
#screenRoot:has(.tg-card) .tgs-plate .tgs-head h4{font-size:17px;margin-bottom:16px;color:var(--c-ink)}

/* — верхние карточки-метрики — */
#screenRoot:has(.tg-card) .tgs-cards{gap:16px;margin-bottom:16px}
#screenRoot:has(.tg-card) .tgs-card{
  border-color:var(--tgm-bd);border-radius:18px;background:var(--c-surface);box-shadow:var(--tgm-sh);
}
#screenRoot:has(.tg-card) .tgs-card:hover{box-shadow:var(--tgm-sh-h)}
#screenRoot:has(.tg-card) .tgs-card.big{padding:18px 20px;gap:14px}
#screenRoot:has(.tg-card) .tgs-ctop{gap:14px;align-items:center}
#screenRoot:has(.tg-card) .tgs-ic{width:46px;height:46px;border-radius:14px}
#screenRoot:has(.tg-card) .tgs-ic svg{width:22px;height:22px}
#screenRoot:has(.tg-card) .tgs-l{font-size:13px;color:var(--c-ink-soft);font-weight:600;line-height:1.3}
#screenRoot:has(.tg-card) .tgs-n{font-size:30px;line-height:1.05;margin-top:3px}
#screenRoot:has(.tg-card) .tgs-d{margin-top:4px;font-size:12.5px}

/* пастельные тона иконок под референс */
#screenRoot:has(.tg-card) .tgs-ic.tone-blue{background:#eaf2ff;color:#3b82f6}
#screenRoot:has(.tg-card) .tgs-ic.tone-green{background:#e8f7ef;color:#1eb268}
#screenRoot:has(.tg-card) .tgs-ic.tone-red{background:#fdeceb;color:#ef5350}
#screenRoot:has(.tg-card) .tgs-ic.tone-purple{background:#efeafe;color:#7c5cdb}
#screenRoot:has(.tg-card) .tgs-ic.tone-amber{background:#fdf0da;color:#f0a01c}
#screenRoot:has(.tg-card) .tgs-ic.tone-indigo{background:#eaecfd;color:#5b6ee0}
#screenRoot:has(.tg-card) .tgs-ic.tone-teal{background:#e2f4ef;color:#13a085}

/* спарклайн: скруглённые стыки; заливку дорисует telegram-modern.js */
#screenRoot:has(.tg-card) .tgs-spark{height:46px;overflow:visible}
#screenRoot:has(.tg-card) .tgs-spark polyline{stroke-linecap:round;stroke-linejoin:round}

/* — второй ряд мелких карточек — */
#screenRoot:has(.tg-card) .tgs-cards--sm{gap:16px}
#screenRoot:has(.tg-card) .tgs-cards--sm .tgs-card{padding:16px 18px;gap:14px}
#screenRoot:has(.tg-card) .tgs-cards--sm .tgs-n{font-size:26px}

/* — визуализация: график + бублик — */
#screenRoot:has(.tg-card) .tgs-viz{gap:16px;margin-bottom:16px}
#screenRoot:has(.tg-card) .tgs-vcard{
  border-color:var(--tgm-bd);border-radius:18px;padding:20px 22px;box-shadow:var(--tgm-sh);
}
#screenRoot:has(.tg-card) .tgs-dh{font-size:16px;margin-bottom:16px;color:var(--c-ink)}
#screenRoot:has(.tg-card) .tgs-chartwrap{position:relative}

/* бублик + легенда */
#screenRoot:has(.tg-card) .tgs-donut-c b{font-size:26px}
#screenRoot:has(.tg-card) .tgs-legend{gap:12px}
#screenRoot:has(.tg-card) .tgs-leg{font-size:13.5px}

/* — нижние карточки — */
#screenRoot:has(.tg-card) .tgs-bottom{gap:16px}
#screenRoot:has(.tg-card) .tgs-bcard{
  border-color:var(--tgm-bd);border-radius:18px;padding:18px 20px;box-shadow:var(--tgm-sh);
}
#screenRoot:has(.tg-card) .tgs-bcard:hover{box-shadow:var(--tgm-sh-h)}
#screenRoot:has(.tg-card) .tgs-bn{font-size:26px}

/* — панели групп: каждая колонка = карточка (как в референсе) — */
#screenRoot:has(.tg-card) .tg-groups{gap:16px}
#screenRoot:has(.tg-card) .tg-groups>div{
  background:var(--c-surface);border:1px solid var(--tgm-bd);border-radius:16px;
  padding:16px 16px 14px;box-shadow:var(--tgm-sh);
}
#screenRoot:has(.tg-card) .tg-groups h5{
  color:var(--c-ink);font-size:13.5px;font-weight:700;
  text-transform:none;letter-spacing:-.01em;margin-bottom:10px;
}
#screenRoot:has(.tg-card) .tg-grp{padding:9px 10px;border-radius:10px;font-size:13.5px}

/* — адаптив: сохраняем плотность на узких брейкпоинтах — */
@media(max-width:1180px){
  #screenRoot:has(.tg-card) .tgs-cards,
  #screenRoot:has(.tg-card) .tgs-cards--sm{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  #screenRoot:has(.tg-card) .tgs-viz{grid-template-columns:1fr}
  #screenRoot:has(.tg-card) .bot-tab-content{padding:16px 14px 20px}
}