/* Matrix tab — Weekly Hit Rate Matrix.
 *
 * v4 (2026-05-21) — единственный layout «Сегменты» (бывший Layout B).
 * Layout A (small multiples) и Layout C (master-detail) удалены по
 * research_v3_ux_audit.md — оставлен только B как «утренний скан».
 *
 * Палитра dark theme (раздел 5 research v2):
 *   bg #0B0C0F · surface #14161A · surface2 #1C1E23 · border #25272C
 *   text #ECEDEF · muted #9CA0A8
 * Heatmap WR (4 уровня, перекалибровано <5/<15/<30/>=30%): см. matrix.js WR_THRESHOLDS.
 * Spacing scale: 4 / 8 / 12 / 16 / 24
 * Card radius 10px · badge 6px · thumbnail 8px · border 1px · no shadows (Linear-style)
 */

/* ─── Локальные переменные палитры (dark) ──────────────────── */

#matrix-view {
  --mx-bg:        #0B0C0F;
  --mx-surface:   #14161A;
  --mx-surface2:  #1C1E23;
  --mx-border:    #25272C;
  --mx-text:      #ECEDEF;
  --mx-muted:     #9CA0A8;
  --mx-accent:    #4ADE80;
  --mx-warn:      #FACC15;
  --mx-danger:    #F87171;
  --mx-flat:      #6A6E76;

  padding: 16px;
  color: var(--mx-text);
  background: transparent;
  font-family: 'Inter', 'Onest', system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
}

html.theme-light #matrix-view {
  --mx-bg:        #FFFFFF;
  --mx-surface:   #FAFAFB;
  --mx-surface2:  #F2F3F5;
  --mx-border:    #E4E6EA;
  --mx-text:      #1A1C20;
  --mx-muted:     #6B6F78;
  --mx-accent:    #16A34A;
  --mx-warn:      #CA8A04;
  --mx-danger:    #DC2626;
  --mx-flat:      #9CA0A8;
}

/* ─── Шапка вкладки ───────────────────────────────────────── */

#matrix-view .matrix-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
  flex-wrap: wrap;
}

#matrix-view .matrix-title-block {
  flex: 1 1 auto;
  min-width: 200px;
}

#matrix-view .matrix-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--mx-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#matrix-view .matrix-subtitle {
  font-size: 12px;
  color: var(--mx-muted);
  margin-top: 4px;
}

/* Info icon рядом с заголовком — объяснение WR */
.mx-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mx-surface2);
  color: var(--mx-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: help;
  user-select: none;
  border: 1px solid var(--mx-border);
}

.mx-info-icon:hover,
.mx-info-icon:focus {
  color: var(--mx-text);
  border-color: var(--mx-accent);
  outline: none;
}

/* ─── Header controls (account switcher + sort + toggle) ───── */

#matrix-view .matrix-header-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─── Account switcher (TOF / MOF / Both) ─────────────────── */

.matrix-account-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: 10px;
}

.matrix-account-switcher button {
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--mx-muted);
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
  letter-spacing: 0.01em;
}

.matrix-account-switcher button:hover {
  color: var(--mx-text);
}

.matrix-account-switcher button.is-active {
  background: var(--mx-surface2);
  color: var(--mx-text);
}

/* ─── Sort dropdown ──────────────────────────────────────── */

.mx-sort-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px 0 10px;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: 10px;
  height: 34px;
  box-sizing: border-box;
}

.mx-sort-label .mx-sort-icon {
  color: var(--mx-muted);
  font-size: 12px;
}

.mx-sort-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: var(--mx-text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  padding: 4px 24px 4px 4px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--mx-muted) 50%),
                    linear-gradient(135deg, var(--mx-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 14px, calc(100% - 9px) 14px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.mx-sort-select:focus {
  outline: none;
}

.mx-sort-select option {
  background: var(--mx-surface);
  color: var(--mx-text);
}

/* ─── Toggle: «Показать неактивные» ───────────────────────── */

.mx-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: 10px;
  height: 34px;
  box-sizing: border-box;
  cursor: pointer;
  color: var(--mx-text);
  font-size: 12.5px;
  font-weight: 500;
  user-select: none;
}

.mx-toggle input[type="checkbox"] {
  accent-color: var(--mx-accent);
}

/* ─── Состояния (loading / empty / error) ─────────────────── */

#matrix-view .matrix-loading,
#matrix-view .matrix-empty,
#matrix-view .matrix-error {
  padding: 48px 24px;
  text-align: center;
  color: var(--mx-muted);
  font-size: 14px;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: 10px;
}

#matrix-view .matrix-error {
  color: var(--mx-danger);
}

/* WR badge heatmap уровни (4) — для cat-card-b и mini-table */
.wr-low   { background: transparent;              color: var(--mx-muted) !important; }
.wr-mid   { background: rgba(250, 204, 21, 0.12); color: var(--mx-text); }
.wr-high  { background: rgba(74, 222, 128, 0.18); color: var(--mx-text); }
.wr-elite { background: rgba(74, 222, 128, 0.36); color: var(--mx-text); }

html.theme-light .wr-mid   { background: rgba(202, 138, 4, 0.12); }
html.theme-light .wr-high  { background: rgba(22, 163, 74, 0.16); }
html.theme-light .wr-elite { background: rgba(22, 163, 74, 0.30); color: #0b1d12; }

/* ════════════════════════════════════════════════════════════
 * MAIN — Card Grid (карточки категорий + mini-tables)
 * ════════════════════════════════════════════════════════════ */

.layout-b-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* grid-auto-flow: dense — чтобы развёрнутая карточка (col-span 2) занимала
   * место "в ряд" а не оставляла пустую дырку, а карточки за ней не
   * перекидывались на новый ряд. */
  grid-auto-flow: dense;
  gap: 12px;
  margin-bottom: 16px;
}

@media (max-width: 1199px) {
  .layout-b-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .layout-b-grid { grid-template-columns: 1fr; }
}

.cat-card-b {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  transition: border-color 0.12s ease, background-color 0.12s ease;
  cursor: pointer;  /* визуальный hint: вся карточка реагирует на клик */
}

/* Hover на карточку — видно что она кликабельна */
.cat-card-b:not(.is-expanded):hover {
  border-color: var(--mx-accent);
  background: rgba(74, 222, 128, 0.02);
}

/* Развёрнутая карточка — та же ширина, увеличивается только высота.
 * Без col-span чтобы соседние карточки не съезжали. */
.cat-card-b.is-expanded {
  border-color: var(--mx-accent);
}

/* Header — кнопка для разворота, на всю ширину */
.cat-card-b .cat-b-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-align: left;
}

.cat-card-b .cat-b-head:hover {
  color: var(--mx-accent);
}

.cat-card-b:hover {
  border-color: var(--mx-flat);
}

.cat-card-b.is-expanded:hover {
  border-color: var(--mx-accent);
}

.cat-card-b .cat-b-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--mx-text);
}

.cat-card-b .cat-b-head:hover .cat-b-title {
  color: var(--mx-accent);
}

.cat-card-b .cat-b-head-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cat-card-b .cat-b-wr {
  font-size: 16px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;          /* центр вместо baseline — обе строчки одной линии */
  gap: 6px;
  cursor: help;
  line-height: 1;
}

.cat-card-b .cat-b-wr-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  line-height: 1;
}

.cat-card-b .cat-b-wr-value {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.cat-card-b .cat-b-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--mx-surface2);
  color: var(--mx-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  line-height: 1;
}

.cat-card-b .cat-b-head:hover .cat-b-toggle {
  color: var(--mx-accent);
  background: rgba(74, 222, 128, 0.10);
}

.cat-card-b .cat-b-meta {
  font-size: 11.5px;
  color: var(--mx-muted);
  line-height: 1.4;
}

.cat-card-b .cat-b-meta strong {
  color: var(--mx-text);
  font-weight: 600;
}

.cat-card-b .cat-b-meta em {
  font-style: normal;
  color: var(--mx-accent);
  font-size: 10.5px;
}

.cat-mini-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums lining-nums;
}

.cat-mini-table thead th {
  padding: 4px 6px;
  text-align: right;
  font-size: 10px;
  font-weight: 500;
  color: var(--mx-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--mx-border);
}

.cat-mini-table thead th:first-child { text-align: left; }

.cat-mini-table tbody td {
  padding: 5px 6px;
  text-align: right;
  color: var(--mx-text);
}

.cat-mini-table tbody td:first-child {
  text-align: left;
  color: var(--mx-muted);
  font-size: 11px;
}

.cat-mini-table tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.02);
}

html.theme-light .cat-mini-table tbody tr:hover td {
  background-color: rgba(0, 0, 0, 0.025);
}

/* survived=0 при launched>0 — критичный сигнал «запускали, всё умерло».
 * НЕ путать с launched=0 (не запускали) — тот случай — тусклая точка.
 * См. matrix.js → formatSurvived(). */
.cat-mini-table .mx-survived-zero {
  color: var(--mx-danger);
  font-weight: 700;
}

/* Колонка «Лидер недели» в expanded — left-aligned ссылка */
.cat-mini-table tbody td:last-child:not(:first-child) {
  text-align: left;
}

.cat-mini-table .td-best-empty {
  color: var(--mx-muted);
  opacity: 0.5;
}

/* Heatmap-bar внутри строки mini-table */
.heatmap-bar {
  position: relative;
  height: 14px;
  width: 60px;
  background: var(--mx-surface2);
  border-radius: 3px;
  overflow: hidden;
  margin-left: auto;
  display: inline-block;
  vertical-align: middle;
}

.heatmap-bar .heatmap-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 3px;
}

.heatmap-bar .heatmap-bar-fill.wr-low   { background: rgba(106, 110, 118, 0.45); }
.heatmap-bar .heatmap-bar-fill.wr-mid   { background: rgba(250, 204, 21, 0.55); }
.heatmap-bar .heatmap-bar-fill.wr-high  { background: rgba(74, 222, 128, 0.60); }
.heatmap-bar .heatmap-bar-fill.wr-elite { background: rgba(74, 222, 128, 0.85); }

.heatmap-bar .heatmap-bar-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--mx-text);
  letter-spacing: 0.02em;
}

/* ─── Footer карточки: thumbnail слева + текст справа ─────── */

.cat-card-b .cat-b-footer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--mx-border);
}

.cat-card-b .cat-b-top-ad {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--mx-muted);
  line-height: 1.4;
  text-decoration: none;
}

.cat-card-b .cat-b-top-thumb {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 6px;
  background: var(--mx-surface2);
  object-fit: cover;
}

.cat-card-b .cat-b-top-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
}

.cat-card-b .cat-b-top-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--mx-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1px;
}

.cat-card-b .cat-b-top-when {
  color: var(--mx-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.cat-card-b .cat-b-top-info strong {
  color: var(--mx-text);
  font-weight: 600;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-card-b .cat-b-top-meta {
  color: var(--mx-muted);
}

.cat-card-b .cat-b-top-ad:hover strong {
  color: var(--mx-accent);
}

.cat-card-b .cat-b-top-empty {
  font-size: 11.5px;
  color: var(--mx-muted);
  font-style: italic;
}

/* ─── Топ-креатив свежей недели (под grid'ом) ─────────────── */

.matrix-top-ad {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: 10px;
}

.matrix-top-ad .top-ad-thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: var(--mx-surface2);
  object-fit: cover;
  flex: 0 0 64px;
}

.matrix-top-ad .top-ad-info {
  flex: 1 1 auto;
  min-width: 0;
}

.matrix-top-ad .top-ad-label {
  font-size: 11px;
  color: var(--mx-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.matrix-top-ad .top-ad-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--mx-text);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matrix-top-ad .top-ad-meta {
  font-size: 12px;
  color: var(--mx-muted);
}

.matrix-top-ad .top-ad-cpa {
  color: var(--mx-text);
  font-weight: 600;
}

.matrix-top-ad .top-ad-criterion {
  font-size: 11px;
  color: var(--mx-muted);
  margin-top: 6px;
  font-style: italic;
  line-height: 1.4;
}

.matrix-top-ad-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.matrix-top-ad-link:hover .matrix-top-ad {
  border-color: var(--mx-accent);
}

.matrix-top-ad-empty {
  padding: 16px;
  background: var(--mx-surface);
  border: 1px dashed var(--mx-border);
  border-radius: 10px;
  text-align: center;
  color: var(--mx-muted);
  font-size: 12.5px;
}

/* ─── Утилиты ─────────────────────────────────────────────── */

.matrix-best-link {
  color: var(--mx-text);
  text-decoration: none;
  border-bottom: 1px dotted var(--mx-muted);
}

.matrix-best-link:hover {
  color: var(--mx-accent);
  border-bottom-color: var(--mx-accent);
}