/*
 * G-Live Overlay — кастомизация поверх оригинального Wiclax G-Live.
 * Подгружается прокси-инжектом в каждую HTML-страницу G-Live
 * перед закрывающим </head>.
 *
 * Меняем ТОЛЬКО внешний вид, не трогаем функционал.
 *
 * Каждый блок промаркирован — раскомментируй то, что нужно.
 * ----------------------------------------------------------------- */

/* === 1. Палитра «графит + янтарь» ====================================== */
/* Бренд Timelink: графит #1f2937 (структура) + янтарь #f59e0b (акцент).
   Wiclax определяет все цвета через CSS-переменные на :root.            */

:root {
  /* фон акцентных блоков: вкладка LIVE, кнопки фильтров, шапка Live-экрана */
  --secondary-bg: #e5e7eb !important;    /* нейтральный светло-серый */
  --secondary-fg: #1f2937 !important;    /* графит — текст на нём */

  /* цифры времени и отставания (был ярко-розовый #f50666) */
  --time-col: #f59e0b !important;        /* янтарь — главный акцент */

  /* ссылки */
  --links: #1f2937 !important;

  /* акцент в счётчике/телефоне в карточках */
  --bold-phone: #1f2937 !important;

  /* лёгкая подсветка чётных строк таблицы */
  --even-row: rgba(31, 41, 55, .045) !important;
}

/* Плоский фон Live-экрана — без градиента, чтобы карточки не сливались */
#ecrLive {
  background: #e5e7eb !important;
}

/* Карточки результатов — белая подложка с лёгкой тенью */
#divGr .vg {
  background: #ffffff !important;
  border-radius: 4px !important;
  margin: 4px 0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
#divGr .vg + .vg {
  border-top: 0 !important;
}

/* Группа результатов (заголовок категории) */
div.gp,
#tabres tr.gp td {
  background: #1f2937 !important;        /* графит вместо чёрного */
  color: #fff !important;
}

/* Активная вкладка в шапке — тонкое янтарное подчёркивание */
.mn.mnon {
  border-bottom: 3px solid #f59e0b !important;
}

/* === 2. Шапка ========================================================== */
/* Подменяем фон навигации под бренд (если хочется отойти от серого) */

/*
#mnu {
  background: linear-gradient(90deg, #1a1a1a 0%, #2a2a2a 100%) !important;
  border-bottom-color: #444 !important;
}
.mn { color: #fff !important; }
.mn.mnon { background: var(--secondary-bg) !important; color: #fff !important; }
*/


/* === 3. Скрыть выбор языка (если он не нужен) ========================== */

/*
#LG { display: none !important; }
*/

#LG {
  visibility: hidden;
}

#LG.tl-archive-ready {
  visibility: visible;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 190px;
  height: 40px;
  padding: 0 16px !important;
  border: 1px solid #253044 !important;
  border-radius: 6px !important;
  background: #1f2937 !important;
  color: #ffffff !important;
  font: 600 15px/38px Arial, Helvetica, sans-serif !important;
  text-shadow: none !important;
  white-space: nowrap;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .22);
}

#LG.tl-archive-ready:hover {
  background: #111827 !important;
  color: #ffffff !important;
}

#LG.tl-archive-ready #mnulg,
#LG.tl-archive-ready b {
  display: none !important;
}


/* === 4. Скрыть футер «Powered by Wiclax» =============================== */
/* На публичном сайте будет свой брендинг */

/*
#pd { display: none !important; }
*/


/* === 5. Логотип Timelink в шапке ======================================= */
/* Слева в навигации — финальный SVG-логотип бренда.                       */

#mnu {
  position: relative;
  padding-left: 180px !important;
}
#mnu::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 156px;
  height: 40px;
  background: url('/timelink-logo.svg') no-repeat left center / contain;
}

@media (max-width: 600px), (max-device-width: 600px) {
  #mnu { padding-left: 56px !important; }
  #mnu::before {
    left: 8px;
    width: 40px;            /* на мобиле — только иконка */
    background: url('/timelink-icon.svg') no-repeat left center / contain;
  }

  #LG.tl-archive-ready {
    position: fixed !important;
    left: auto !important;
    right: 8px !important;
    top: 7px !important;
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 5px !important;
    font: 600 14px/32px Arial, Helvetica, sans-serif !important;
    overflow: hidden !important;
    z-index: 120 !important;
  }
}


/* === 6. Рамка/отступы для встраивания в iframe ========================= */
/* Когда G-Live внутри iframe, иногда нужен запас по ширине               */

body { padding-bottom: 40px; }


/* === 6b. Попап результатов — фикс слипания имени и времени =============
 * В оригинале .vg .tp абсолютно позиционирован справа, но в узком попапе
 * (#ctpop) media-query сбрасывает position:unset → время липнет к имени:
 *   "ДАНИЛКИН ДАНИИЛ27:02.8".
 * Делаем .vg в попапе flex-row с пробелом между именем и временем.
 * --------------------------------------------------------------------- */

#ctpop .vg {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  column-gap: 12px !important;
  row-gap: 2px !important;
  padding: 8px 10px !important;
}
#ctpop .vg .pl,
#ctpop .vg .do {
  float: none !important;
  flex: 0 0 auto !important;
  font: 18px/22px BN !important;        /* поменьше, чтобы не давило ряд */
  min-width: 22px !important;
  margin-inline-end: 4px !important;
}
#ctpop .vg .nm {
  flex: 1 1 auto !important;
  padding-inline-end: 8px !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#ctpop .vg .tp {
  position: static !important;
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 0 !important;
  margin-inline-start: auto !important;  /* прижать вправо */
  color: var(--time-col) !important;
  font: bold 17px Noodle, monospace !important;
}
#ctpop .vg .clb {
  flex: 1 0 100% !important;             /* клуб — на новую строку */
  padding: 0 0 0 26px !important;        /* выравнивание под именем */
  font: 11pt BN !important;
  opacity: .7;
}


/* === 7. Подкрутка плотности таблицы Live-таблиц ======================== */

/*
#tabres td { padding: 4px 6px !important; font-size: 12px !important; }
#tabres th { font-size: 70% !important; }
*/


/* === 8. Скрыть кнопки PDF / прессы (если не используете) =============== */

/*
#mnuPdf, #mnuPresse { display: none !important; }
*/


/* === 9. Адаптация под мобильник ========================================
 * G-Live и так адаптивен, но при встраивании в iframe бывают мелочи.
 * ---------------------------------------------------------------------- */

@media (max-width: 600px), (max-device-width: 600px) {
  #mnu { font-size: 0; }
  .mn { padding: 0 12px !important; font-size: 22px !important; }
  /* плотнее списки */
  #divGr .vg { padding: 4px !important; }
}


/* === 10. Подпись Powered by Timelink ===================================
 * Сама замена текста делается в glive-overlay.js (через MutationObserver),
 * здесь только аккуратное оформление #pd.
 * ---------------------------------------------------------------------- */

#pd {
  color: #1f2937 !important;
  font: 11px Arial !important;
  text-decoration: none !important;
  opacity: .85;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}
#pd:hover { opacity: 1; }
#pd::before {
  content: "";
  width: 14px;
  height: 14px;
  background: url('/timelink-icon.svg') no-repeat center / contain;
  display: inline-block;
}

#fbR {
  display: none !important;
}


/* === 11. Toast-уведомления об отсечках ====================================
 * Появляются при каждом R-кадре (новый финиш/отсечка).
 * Показываются поверх любой вкладки — зритель не пропустит результат.
 * ------------------------------------------------------------------ */

#tl-toasts {
  position: fixed;
  bottom: 52px;                /* выше нижней панели G-Live */
  right: 12px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  pointer-events: none;
  max-width: min(340px, 90vw);
}

.tl-toast {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: #1f2937;
  color: #fff;
  border-left: 4px solid #f59e0b;
  border-radius: 6px;
  padding: 8px 12px;
  font: 14px/1.35 Arial, Helvetica, sans-serif;
  box-shadow: 0 3px 12px rgba(0,0,0,.35);
  opacity: 1;
  transition: opacity 2s ease;
  white-space: nowrap;
  overflow: hidden;
}

.tl-toast.tl-toast-out {
  opacity: 0;
}

.tl-toast-rank {
  flex: 0 0 auto;
  min-width: 28px;
  font-size: 18px;
  font-weight: bold;
  color: #f59e0b;
}

.tl-toast-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tl-toast-time {
  flex: 0 0 auto;
  font-family: Noodle, monospace;
  font-weight: bold;
  color: #f59e0b;
  font-size: 15px;
}

.tl-toast-course {
  flex: 0 0 auto;
  font-size: 11px;
  opacity: .7;
}

@media (max-width: 600px) {
  #tl-toasts { right: 6px; bottom: 48px; max-width: calc(100vw - 12px); }
  .tl-toast   { padding: 6px 10px; font-size: 13px; }
}