/* ============================================================================
   live-restyle.css — обновлённый вид грида live.aspx (перенос с тест-стенда live1).
   Состав: live1.css (заходы 1-2 редизайна) + live1-skin-a.css (скин A «Compact Sport»),
   выбран владельцем 2026-08-07. Подключается ПОСЛЕ live.css в live.aspx.
   Правки вида вносить сюда (или в live1.* на стенде и переносить этим же файлом).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600;700&display=swap');

/* ============================================================================
   live1.css — ОБНОВЛЕНИЕ вида грида для тестовой страницы /live1.aspx.
   Подключается ПОСЛЕ live.css и только на live1.aspx. Прод (live.aspx) не трогает.

   Задача: убрать «эксель-2003» и уместить длинные названия команд,
   НЕ меняя фирменные цвета (#1565C0 синий, #2e7d32 зелёный, #c62828 красный,
   #ffc107 янтарь) — на них завязана узнаваемость во внешних ссылках.

   Что меняется:
     1. Команды в две строки (как в мобильной версии) — счёт справа, столбиком.
     2. Границы: убран внешний бордер и жирная линия шапки, строки — волосяные.
     3. Шапка: светлая, вместо #f0f0f0 + 2px #bbb. Sticky остаётся (уже был).
     4. Табличные цифры, hover строки, тренды с 8px до 9.5px.
   Ничего не удалено и не скрыто — только внешний вид.
   ========================================================================== */

@media (min-width: 769px) {

/* ---------------------------------------------------------------- 1. КОМАНДЫ
   Тот же приём, что в мобильной вёрстке: teams-row-v2 → grid 2×2.
   Колонка 1 — имена одно под другим, колонка 2 — счёт столбиком, на обе строки.
   Каждое имя получает всю ширину ячейки (~275px) вместо ~150px в одну строку. */

table.live-table td.teams-block { padding: 2px 8px; }

.teams-block .teams-row-v2 {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 6px;
    row-gap: 0;
    align-items: center;
    justify-content: initial;
    white-space: nowrap;
}

.teams-block .team-name-h { grid-column: 1; grid-row: 1; }
.teams-block .team-name-a { grid-column: 1; grid-row: 2; }

.teams-block .team-name-h,
.teams-block .team-name-a {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
    min-width: 0;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.15;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Победитель/ведущий — жирным (класс t-win из BuildRow); при ничьей никто */
.teams-block .team-name-h.t-win,
.teams-block .team-name-a.t-win { font-weight: 700; }

/* Заглушка под логотип: у кого логотипа нет — имя всё равно на одной вертикали */
.teams-block .team-name-h::before,
.teams-block .team-name-a::before {
    content: '';
    display: block;
    flex: 0 0 17px;
    width: 17px;
    height: 14px;
}
.teams-block .team-name-h:has(.team-logo-mini)::before,
.teams-block .team-name-a:has(.team-logo-mini)::before { display: none; }

.teams-block .team-logo-mini {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 0;
}

/* Счёт — справа, столбиком, на обе строки имён */
.teams-block .score-center-v2 {
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 0 2px 0 8px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
    color: #1565C0;
    font-variant-numeric: tabular-nums;
}
.teams-block .score-center-v2 .sc-sep { display: none; }
.teams-block .score-center-v2 .sc-h,
.teams-block .score-center-v2 .sc-a { display: block; }
.teams-block .score-center-v2 .sc-lead { color: #0d47a1; font-weight: 800; }
/* Побочные бейджи под счётом — мелко, чтобы не растягивали строку */
.teams-block .score-center-v2 .alert-score-inline {
    font-size: 9px; font-weight: 600; color: #8a94a3; line-height: 1.2;
}
.teams-block .score-center-v2 .pen-badge { font-size: 9px; line-height: 1.2; }
/* Название лиги + значок трансляции — одна центрируемая группа: иконка всегда вплотную
   к тексту лиги и не уезжает в колонку счёта (внутрь <a> её положить нельзя — там свой <a>). */
.teams-block .league-row-v2 .lg-mid {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.teams-block .league-row-v2 .lg-mid .stream-icon { flex: 0 0 auto; line-height: 1; display: flex; align-items: center; }

/* Лига — тоже по левому краю, раз имена ушли влево */
.teams-block .league-row-v2 {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0;
    margin-bottom: 0;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.15;
    color: #8a94a3;
    text-align: left;
}
.teams-block .league-row-v2 { gap: 4px; }
/* Название лиги — к центру: не сливается с именами команд (те прижаты влево),
   а значки превью/трансляции слева получают воздух и читаются отдельно. */
.teams-block .league-row-v2 .league-link-v2 {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 10px;
    color: #8a94a3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    padding: 0 6px;
}

/* Тренды: были 8px — нечитаемо. 9.5px и по левому краю под именами. */
.teams-block .bottom-row-v2 {
    text-align: left;
    font-size: 9px;
    line-height: 1.2;
    margin-top: 0;
}

/* --------------------------------------------------------- 2. СЕТКА ТАБЛИЦЫ
   Внешний бордер и серые линии #e0e0e0 — главный источник «старого» вида.
   Палитра не меняется: только тон разделителей и подложек. */

table.live-table {
    border: 0;
    background: #fff;
}
table.live-table td {
    border-bottom: 1px solid #eef1f6;
    padding: 4px 6px;
}
table.live-table tbody tr:last-child td { border-bottom: 0; }

/* hover был #e8eaed (серый) — делаем синеватый, из фирменного семейства */
table.live-table tr:hover { background: #f2f7fe !important; }

/* ------------------------------------------------------------------ 3. ШАПКА
   Была: #f0f0f0 + border-bottom 2px #bbb + hover #ddd.
   Sticky уже есть в live.css — фон обязан остаться непрозрачным. */

table.live-table th {
    background: #fafbfd;
    color: #5b6675;
    padding: 7px 5px;
    border-bottom: 1px solid #e6eaf0;
    font-weight: 600;
}
table.live-table thead th {
    box-shadow: inset 0 -1px 0 #e6eaf0, 0 2px 6px rgba(16, 24, 40, .05);
}
table.live-table th.sort-hdr:hover { background: #eef4fc !important; }
table.live-table th i.ph,
table.live-table th i.ti,
table.live-table th i.bi { color: #6b7686; font-size: 17px; }
table.live-table th.sort-hdr:hover i { color: #1565C0; }

/* ------------------------------------------------------------- 4. ТИПОГРАФИКА
   Табличные цифры: 1.82 и 2.01 занимают одинаковую ширину, колонка
   коэффициентов выравнивается по разрядам без костылей. */

table.live-table td,
table.live-table .odds-line,
table.live-table .score-center-v2 {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ------------------------------------------------- 5. КОЛОНКА «ТРЕНДЫ» (заход 2)
   Тренды вынесены из ячейки команд в свой <td class='trend-cell'>: до 4 чипов + «+N».
   Ширину колонка забирает у ячейки команд (350→280) и у удалённой «Трв» (40px). */

table.live-table td.teams-block { width: 280px; max-width: 290px; }

td.trend-cell { padding: 3px 4px; }
td.trend-cell .hdk-hover {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
    max-height: 36px;      /* две линии чипов; высота строки не скачет */
    overflow: hidden;
}
.trend-chip {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 8px;
    background: rgba(21, 101, 192, .08);
    color: #1565C0;        /* фирменный синий не меняем */
    font-size: 9px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.trend-chip.trend-more { background: rgba(21, 101, 192, .16); }

/* «-N» травм/дисквалов — переехал из удалённой «Трв» в низ ячейки «Сост» */
.sq-cell .sq-miss { font-size: 9px; font-weight: 700; color: var(--red-p2, #c62828); }

/* «Линия»: в live.css ширина 215px под старую разметку — контент ~130px,
   остальное висело пустотой перед лигой. Ужимаем. */
table.live-table td.odds-line { width: 150px; }

} /* /min-width:769px */

/* --------------------------------------- ТУЛТИП ТРЕНДОВ: полоски + % + n/N
   Строки сортируются по % (desc) в live1.aspx.cs; здесь только вид строки:
   имя | полоска-индикатор | % | счётчик n/N (счётчики даёт live_GetTodayMatches1;
   на пути поиска live_GetPastMatches их нет — колонка просто пустая). */
.trend-tip { min-width: 320px; }
/* Жёсткая сетка вместо flex: колонки полоска/%/n-N всегда на одной вертикали,
   длинное имя ужимается в своей колонке (ellipsis), а не толкает соседей. */
.trend-tip .tt-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px 38px 62px;
    gap: 6px;
    align-items: center;
    padding: 2px 0;
    color: inherit;
    text-decoration: none;
}
.trend-tip .tt-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    border-bottom: 1px dotted #90caf9;
}
.trend-tip .tt-bar {
    height: 7px;
    border-radius: 4px;
    background: rgba(144, 202, 249, .18);
    overflow: hidden;
}
.trend-tip .tt-bar > span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: #64b5f6;
}
.trend-tip .tt-pct {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.trend-tip .tt-cnt {
    text-align: right;
    font-size: 9.5px;
    color: #b0bec5;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- ТЁМНАЯ ТЕМА
   Зеркалим только то, что тронули выше, чтобы не разъехалось. */

@media (min-width: 769px) {
body.dark-theme table.live-table { background: #121212; }
body.dark-theme table.live-table td { border-bottom: 1px solid #262626; }
body.dark-theme table.live-table tr:hover { background: #1e2733 !important; }
body.dark-theme table.live-table th {
    background: #1b1b1b;
    color: #9aa4b2;
    border-bottom: 1px solid #2a2a2a;
}
body.dark-theme table.live-table thead th {
    box-shadow: inset 0 -1px 0 #2a2a2a, 0 2px 6px rgba(0, 0, 0, .35);
}
body.dark-theme table.live-table th.sort-hdr:hover { background: #232a34 !important; }
body.dark-theme .teams-block .team-name-h,
body.dark-theme .teams-block .team-name-a { color: #e0e0e0 !important; }
body.dark-theme .teams-block .league-row-v2,
body.dark-theme .teams-block .league-row-v2 .league-link-v2 { color: #8a94a3; }
body.dark-theme .teams-block .score-center-v2 { color: #90caf9; }
body.dark-theme .trend-chip { color: #64b5f6; background: rgba(100, 181, 246, .12); }
body.dark-theme .trend-chip.trend-more { background: rgba(100, 181, 246, .22); }
body.dark-theme .sq-cell .sq-miss { color: #ef9a9a; }
}

/* ------------------------------------------------------- ТРЕНДЫ: КОНТРАСТ
   Заход 2: тренды ушли из bottom-row-v2 (инлайновый #1565C0 больше не рендерится)
   в чипы .trend-chip — их тёмная тема задана выше рядом с остальным зеркалом.
   Здесь остался только тултип: на тёмном фоне подсветить ссылки. */
body.dark-theme .trend-tip a { color: #90caf9 !important; }

/* ============================================================================
   live1-skin-a.css — СКИН A «Compact Sport» для тест-стенда /live1.aspx?skin=a
   Подключается ПОСЛЕ live.css и live1.css. Прод не трогает.

   Идея: плотный «спортивно-бродкастный» вид (уровень современного Sofascore):
   condensed-гротеск для имён/шапки, ряды плотнее, плоские чипы, данные — сами
   себе интерфейс, хром таблицы минимальный. Фирменные цвета НЕ меняются:
   #1565C0 / #2e7d32 / #c62828 / #ffc107 — на них узнаваемость внешних ссылок.

   Организация — токены: палитра в переменных на :root, тёмная тема лишь
   переопределяет переменные (без зеркалирования каждого правила).
   ========================================================================== */


:root {
    --skA-ground:   #ffffff;   /* фон таблицы */
    --skA-head:     #f3f5f9;   /* фон шапки */
    --skA-line:     #e7ebf1;   /* волосяные разделители */
    --skA-text:     #17202b;   /* основной текст (синеватый near-black) */
    --skA-muted:    #78828f;   /* вторичный текст */
    --skA-blue:     #1565C0;   /* фирменный синий как есть */
    --skA-blue-soft:rgba(21, 101, 192, .08);
    --skA-hover:    #eef4fc;
    --skA-live:     #c62828;   /* фирменный красный: статус LIVE */
}
body.dark-theme {
    --skA-ground:   #0e1116;   /* near-black со сдвигом в синий */
    --skA-head:     #12161d;
    --skA-line:     #1e242e;
    --skA-text:     #e8edf4;
    --skA-muted:    #8b96a5;
    --skA-blue:     #64b5f6;   /* светлый тон того же синего — контраст на тёмном */
    --skA-blue-soft:rgba(100, 181, 246, .10);
    --skA-hover:    #171e28;
    --skA-live:     #ef9a9a;
}

@media (min-width: 769px) {

/* ------------------------------------------------------------ каркас таблицы */
table.live-table,
body.dark-theme table.live-table { background: var(--skA-ground); }

table.live-table td,
body.dark-theme table.live-table td {
    border-bottom: 1px solid var(--skA-line);
    padding: 3px 6px;               /* плотнее, чем в live1 (4px) */
}
table.live-table tr:hover,
body.dark-theme table.live-table tr:hover { background: var(--skA-hover) !important; }

/* Шапка: тихая, ВЕРХНИМ регистром с разрядкой — единственный «голос» хрома */
table.live-table th,
body.dark-theme table.live-table th {
    background: var(--skA-head);
    color: var(--skA-muted);
    border-bottom: 1px solid var(--skA-line);
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 6px 5px;
}
table.live-table thead th,
body.dark-theme table.live-table thead th {
    box-shadow: inset 0 -1px 0 var(--skA-line);
}
table.live-table th.sort-hdr:hover,
body.dark-theme table.live-table th.sort-hdr:hover { background: var(--skA-hover) !important; }
table.live-table th i.ph,
table.live-table th i.ti,
table.live-table th i.bi { color: var(--skA-muted); font-size: 15px; }
table.live-table th.sort-hdr:hover i { color: var(--skA-blue); }

/* -------------------------------------------------------------- блок команд */
.teams-block .team-name-h,
.teams-block .team-name-a,
body.dark-theme .teams-block .team-name-h,
body.dark-theme .teams-block .team-name-a {
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--skA-text) !important;
}
/* Жирным — только победитель/ведущий (t-win из BuildRow), как у Flashscore/Sofascore */
.teams-block .team-name-h.t-win,
.teams-block .team-name-a.t-win,
body.dark-theme .teams-block .team-name-h.t-win,
body.dark-theme .teams-block .team-name-a.t-win { font-weight: 700; }

.teams-block .score-center-v2,
body.dark-theme .teams-block .score-center-v2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--skA-blue);
}
.teams-block .score-center-v2 .sc-lead { font-weight: 800; }

/* Лига: 9.5px, капслук с разрядкой — служебная строка, не спорит с именами */
.teams-block .league-row-v2 .league-link-v2,
body.dark-theme .teams-block .league-row-v2 .league-link-v2 {
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--skA-muted);
}

/* --------------------------------------------------------------- минута/LIVE
   Минутный бейдж — главный носитель состояния строки: живой матч = красный чип. */
td.min-td .minute-badge,
body.dark-theme td.min-td .minute-badge {
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-weight: 700;
}
td.min-td .minute-badge.min-1h,
td.min-td .minute-badge.min-2h,
body.dark-theme td.min-td .minute-badge.min-1h,
body.dark-theme td.min-td .minute-badge.min-2h {
    color: #fff;
    background: var(--skA-live);
    border-radius: 3px;
    padding: 1px 5px;
}
body.dark-theme td.min-td .minute-badge.min-1h,
body.dark-theme td.min-td .minute-badge.min-2h { color: #16090b; }

/* ----------------------------------------------------------------- чипы/теги
   Всё плоское, радиус 3px, без пилюль — спортивная жёсткость. */
.trend-chip, body.dark-theme .trend-chip {
    border-radius: 3px;
    background: var(--skA-blue-soft);
    color: var(--skA-blue);
    font-family: 'Barlow Semi Condensed', Arial, sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .03em;
}
.trend-chip.trend-more, body.dark-theme .trend-chip.trend-more {
    background: var(--skA-blue-soft);
    box-shadow: inset 0 0 0 1px var(--skA-blue);
}

/* ------------------------------------------------------------- прочий текст */
td.odds-line, body.dark-theme td.odds-line { color: var(--skA-text); }
.odds-pre, body.dark-theme .odds-pre { color: var(--skA-muted); }

/* Форма W/D/L: чуть жёстче углы под общий тон */
.fm-W, .fm-D, .fm-L { border-radius: 2px !important; }

} /* /min-width:769px */