/* Classifier рекламы — стили (priority colors, badges, banner). */

/* Priority цвета — фон левой полосы и карточки */
.cls-item.pr-critical { border-left: 4px solid #e74c3c; }
.cls-item.pr-high     { border-left: 4px solid #f39c12; }
.cls-item.pr-medium   { border-left: 4px solid #f1c40f; }
.cls-item.pr-low      { border-left: 4px solid #27ae60; }
.cls-item.pr-unknown  { border-left: 4px solid #95a5a6; }

/* Priority бейджи в правом верхнем углу карточки */
.cls-badge-pr-critical { background: #fde2e1; color: #c0392b; }
.cls-badge-pr-high     { background: #fdebd0; color: #c0660b; }
.cls-badge-pr-medium   { background: #fef5cd; color: #927200; }
.cls-badge-pr-low      { background: #d4f5dd; color: #1e7e34; }
.cls-badge-pr-unknown  { background: #e9ecef; color: #495057; }

/* ── Header (детальный экран) ──────────────────────────────────────────── */
.cls-header { display: flex; align-items: flex-start; gap: 8px; }
.cls-back   { color: var(--tg-link); font-size: 15px; font-weight: 500; padding: 4px 6px; flex-shrink: 0; }
.cls-header-info { flex: 1; min-width: 0; }
.cls-header-title { font-size: 16px; font-weight: 600; line-height: 1.3; word-break: break-word; }
.cls-header-sub   { font-size: 11px; color: var(--tg-muted); margin-top: 2px; line-height: 1.3; }

/* ── Banner на экране Detail (state + management) ─────────────────────── */
/* Solid-color, читаемо в light/dark. Левая цветная полоса = приоритет. */
.cls-banner {
  background: var(--tg-secbg);
  position: relative;
  padding-left: 14px;
  border-left: 5px solid #95a5a6;
}
.cls-banner-pr-critical { border-left-color: #e74c3c; }
.cls-banner-pr-high     { border-left-color: #f39c12; }
.cls-banner-pr-medium   { border-left-color: #f1c40f; }
.cls-banner-pr-low      { border-left-color: #27ae60; }
.cls-banner-pr-unknown  { border-left-color: #95a5a6; }

.cls-banner-prio {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; opacity: 0.85; margin-bottom: 4px;
}
.cls-banner-state {
  font-size: 22px; font-weight: 700; line-height: 1.2; margin-bottom: 6px;
}
.cls-banner-interp {
  font-size: 13px; opacity: 0.85; margin-bottom: 10px; line-height: 1.4;
}
.cls-banner-action {
  font-size: 14px; font-weight: 600; line-height: 1.4;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.06);
}
.cls-banner-details { margin-top: 10px; font-size: 12px; opacity: 0.75; }
.cls-banner-details summary { cursor: pointer; }
.cls-banner-details-body { margin-top: 6px; line-height: 1.4; }

/* Inputs в форме плана — TG theme aware */
.cls-input {
  background: var(--tg-bg);
  color: var(--tg-fg);
  font-size: 16px;  /* iOS не зумит на focus при font-size >=16px */
  line-height: 1.4;
}
.cls-input:focus {
  outline: 2px solid var(--tg-button);
  outline-offset: -1px;
}

/* Dark theme: badges на тёмном фоне */
.dark .cls-badge-pr-critical  { background: rgba(231, 76, 60, 0.25); color: #fadbd8; }
.dark .cls-badge-pr-high      { background: rgba(243, 156, 18, 0.25); color: #fad7a0; }
.dark .cls-badge-pr-medium    { background: rgba(241, 196, 15, 0.25); color: #fcf3cf; }
.dark .cls-badge-pr-low       { background: rgba(39, 174, 96, 0.25); color: #abebc6; }
/* Banner action box — чуть ярче подложку на тёмной теме чтобы был контраст */
.dark .cls-banner-action { background: rgba(255, 255, 255, 0.06); }

/* Mini-app узкий, поэтому используем full-width для buttons */
@media (max-width: 480px) {
  .cls-item .badge { font-size: 10px; padding: 2px 6px; }
}

/* mode-classifier контейнер — без bottom-nav, минимум margin */
body.mode-classifier { padding-bottom: 16px; }
/* WR3-04: degradation chip — компактный индикатор типа деградации (Трафик/Конверсия/Смешанная/Канибализация) */
.cls-banner-deg {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; margin-bottom: 8px;
  background: rgba(0,0,0,0.08); letter-spacing: 0.2px;
}
.cls-banner-deg-traffic     { background: rgba(243, 156, 18, 0.18); color: #d35400; }
.cls-banner-deg-conversion  { background: rgba(155, 89, 182, 0.18); color: #8e44ad; }
.cls-banner-deg-mixed       { background: rgba(231, 76, 60, 0.18);  color: #c0392b; }
.cls-banner-deg-cannibal    { background: rgba(192, 57, 43, 0.22);  color: #922b21; }
.dark .cls-banner-deg-traffic    { background: rgba(243, 156, 18, 0.28); color: #f1a83a; }
.dark .cls-banner-deg-conversion { background: rgba(155, 89, 182, 0.28); color: #c290da; }
.dark .cls-banner-deg-mixed      { background: rgba(231, 76, 60, 0.28);  color: #f08379; }
.dark .cls-banner-deg-cannibal   { background: rgba(192, 57, 43, 0.32);  color: #ee948b; }