/* Octa.GitJet — фирменный слой поверх встроенных стилей Gitea.
 *
 * ПРИНЦИП: не переверстываем, а перекрашиваем. Gitea рисует всё через
 * CSS-переменные (--color-primary и родня), поэтому здесь мы меняем
 * ЗНАЧЕНИЯ переменных, а не правила компонентов. Такой слой переживает
 * обновление апстрима: разметка и классы могут меняться, имена
 * переменных — почти никогда.
 *
 * Файл живёт в custom/public/assets/css/ и подключается из
 * custom/templates/custom/header.tmpl. Пересборка образа не нужна:
 * assetfs кладёт custom/public слоем ПОВЕРХ встроенных ассетов.
 */

/* ── палитра ───────────────────────────────────────────────────────── */
:root {
  --color-primary: #1f7a4d;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #1c7047;
  --color-primary-dark-2: #186640;
  --color-primary-dark-3: #155b39;
  --color-primary-dark-4: #125032;
  --color-primary-dark-5: #0e3f28;
  --color-primary-dark-6: #0a2e1d;
  --color-primary-dark-7: #061c12;
  --color-primary-light-1: #2a8d5c;
  --color-primary-light-2: #37a06c;
  --color-primary-light-3: #4bb37e;
  --color-primary-light-4: #6cc397;
  --color-primary-light-5: #9ad8b8;
  --color-primary-light-6: #c6ead8;
  --color-primary-light-7: #e5f3eb;
  --color-primary-alpha-10: #1f7a4d1a;
  --color-primary-alpha-20: #1f7a4d33;
  --color-primary-alpha-30: #1f7a4d4d;
  --color-primary-alpha-40: #1f7a4d66;
  --color-primary-alpha-50: #1f7a4d80;
  --color-primary-alpha-60: #1f7a4d99;
  --color-primary-alpha-70: #1f7a4db3;
  --color-primary-alpha-80: #1f7a4dcc;
  --color-primary-alpha-90: #1f7a4de6;
  --color-primary-hover: #186640;
  --color-primary-active: #155b39;

  /* Ссылки и акценты подтягиваются за основным цветом. */
  --color-secondary: #d5ddd7;
  --color-secondary-dark-1: #c7d1c9;
  --color-secondary-dark-2: #b9c5bc;

  /* Кнопка-«успех» в Gitea зелёная по смыслу — уводим её в бирюзу,
     иначе она сливается с фирменной кнопкой действия. */
  --color-green: #0f766e;
  --color-green-light: #14867d;
  --color-green-dark-1: #0d6b63;

  --color-body: #f4f6f4;
  --color-box-body: #ffffff;
  --color-box-header: #eef2ef;
  --color-text: #1a211c;
  --color-text-light: #3c4a42;
  --color-text-light-2: #5c6b62;
  --color-nav-bg: #12291d;
  --color-nav-hover-bg: #1c3d2c;
  --color-nav-text: #e8f0ea;
  --color-active: #e5f3eb;
  --color-hover: #eef2ef;
  --color-menu: #ffffff;
  --color-card: #ffffff;
  --color-light-border: #d5ddd7;
  --color-shadow: rgb(26 33 28 / 12%);
}

/* Тёмная тема: тот же зелёный, но светлее — на тёмном фоне тёмно-зелёный
   не читается. Переменные фона Gitea не трогаем: тема остаётся своей. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="gitea-auto"] {
    --color-primary: #35a06c;
    --color-primary-dark-1: #3dab76;
    --color-primary-dark-2: #48b681;
    --color-primary-light-1: #2c8f5f;
    --color-primary-hover: #3dab76;
    --color-nav-bg: #0c1d14;
  }
}
:root[data-theme="gitea-dark"] {
  --color-primary: #35a06c;
  --color-primary-dark-1: #3dab76;
  --color-primary-dark-2: #48b681;
  --color-primary-light-1: #2c8f5f;
  --color-primary-hover: #3dab76;
  --color-nav-bg: #0c1d14;
}

/* ── шрифт ─────────────────────────────────────────────────────────── */
:root {
  --fonts-proportional: "DM Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --fonts-monospace: "JetBrains Mono", ui-monospace, "Menlo", monospace;
}

/* ── шапка ─────────────────────────────────────────────────────────── */
/* Тёмная навигация — как во внутренних экранах Octa.Dev. */
#navbar {
  background: var(--color-nav-bg);
}
#navbar .item,
#navbar .brand,
#navbar a {
  color: var(--color-nav-text);
}
#navbar .item:hover {
  background: var(--color-nav-hover-bg);
}
/* АКТИВНЫЙ ПУНКТ ШАПКИ.
   navbar.css:38 красит его в --color-active, а эта переменная у нас
   светло-зелёная (она же подсветка строк на светлом фоне). В тёмной
   шапке получалось светлое пятно со светлым текстом — пункт пропадал
   (жалоба владельца 01.09: «белое на белом»). Даём фирменный фон и
   контрастный текст — как у активного пункта выпадающего меню ниже. */
#navbar .item.active,
#navbar .item.active:hover {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}
#navbar .item.active svg,
#navbar .item.active .svg { color: var(--color-primary-contrast); }

/* ВЫПАДАЮЩИЕ МЕНЮ — ИСКЛЮЧЕНИЕ.
   Они лежат ВНУТРИ #navbar, но рисуются на белой подложке, поэтому
   светлый цвет шапки делал их пункты нечитаемыми — белым по белому
   (жалоба владельца 01.09: видно было только подсвеченный пункт).
   Возвращаем им обычный текстовый цвет и обычную подсветку. */
#navbar .ui.dropdown .menu,
#navbar .menu.user-menu {
  background: var(--color-menu);
}
#navbar .ui.dropdown .menu .item,
#navbar .ui.dropdown .menu a,
#navbar .menu.user-menu .item,
#navbar .menu.user-menu a {
  color: var(--color-text);
}
#navbar .ui.dropdown .menu .item:hover,
#navbar .menu.user-menu .item:hover {
  background: var(--color-hover);
  color: var(--color-text);
}
/* Пункт под курсором/выбранный — фирменным фоном и белым текстом,
   иначе на зелёной подсветке остаётся тёмный текст. */
#navbar .ui.dropdown .menu .item.selected,
#navbar .ui.dropdown .menu .item.active,
#navbar .menu.user-menu .item.selected,
#navbar .menu.user-menu .item.active {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}
/* Разделители и заголовки внутри меню. */
#navbar .ui.dropdown .menu .header,
#navbar .ui.dropdown .menu .divider { color: var(--color-text-light-2); }
/* Логотип в шапке — на тёмном фоне знак должен быть белым, а файл у нас
   зелёный: перекрашиваем фильтром, чтобы не держать вторую копию SVG. */
#navbar .navbar-logo-light,
#navbar img[src$="logo.svg"] {
  filter: brightness(0) invert(1);
}
/* На главной шапка выводится ИЗ САМОЙ СТРАНИЦЫ (см. custom/templates/home.tmpl):
   на анонимной главной HideGlobalNavbar=true, и base/head её не рисует.
   Отступ сверху здесь не нужен — навбар в потоке, а не поверх. */
#octa-home > #navbar,
#navbar + #octa-home { margin-top: 0; }

/* ── аркадные герои: индикаторы ожидания ──────────────────────────── */
/* Gitea показывает ожидание через .is-loading::after — крутящийся круг.
   Заменяем его нашим призраком: он подпрыгивает, а не крутится, и это
   тот же герой, что в Codex. Фон рисуем через data:URI, чтобы не
   заводить внешних файлов и лишних запросов. */
.is-loading::after {
  border: none !important;
  border-radius: 0 !important;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 104"><path fill="%231f7a4d" d="M14 48C14 26 31 10 52 10s38 16 38 38v28c0 0-4 8-9.5 8S71 76 71 76s-4 8-9.5 8S52 76 52 76s-4 8-9.5 8S33 76 33 76s-4 8-9.5 8S14 76 14 76z"/><circle cx="38" cy="42" r="12" fill="%23fff"/><circle cx="66" cy="42" r="12" fill="%23fff"/><circle cx="40" cy="44" r="5.5" fill="%2312291d"/><circle cx="68" cy="44" r="5.5" fill="%2312291d"/></svg>') center / contain no-repeat;
  animation: octa-bob 0.85s ease-in-out infinite !important;
}
@keyframes octa-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
/* Полоса загрузки страницы и спиннеры в кнопках — тем же зелёным. */
#loading-bar .bar,
.ui.loader::after { border-color: var(--color-primary) transparent transparent; }

/* ── скрытая «Помощь» ─────────────────────────────────────────────── */
/* Документации пока нет, ссылка вела на пустой docs.gitjet.ru. Прячем
   ОБА вхождения — пункт в шапке (head_navbar.tmpl:40) и пункт в меню
   пользователя (там же, :123): оба ведут на один адрес, поэтому хватает
   одного правила по href. Когда документация появится — удалить этот
   блок, разметку править не придётся. */
#navbar a[href^="https://docs.gitjet.ru"] { display: none !important; }

/* ── аватарки агентов ─────────────────────────────────────────────── */
/* Коммиты агентов подписаны git-идентичностями, у которых НЕТ аккаунта в
   Gitea, поэтому им достаётся безликая сгенерированная картинка — и на
   странице коммита агента не отличить от человека.
   Целимся по title: AvatarHTML кладёт туда имя автора (alt намеренно
   пустой — см. modules/templates/util_avatar.go), а class аватарки всегда
   содержит "avatar". Подменяем картинку призраком через content —
   разметку и Go-код это не трогает.
   Список ПРЕЦИЗИОННЫЙ, а не по подстроке "octa": иначе призрака получил
   бы живой человек с именем вроде Octavia. */
img[class*="avatar"][title*="agent" i],
img[class*="avatar"][title*="runtime" i],
img[class*="avatar"][title*="bot" i],
img[class*="avatar"][title^="octa-" i],
img[class*="avatar"][title="octa" i],
img[class*="avatar"][title="cursor" i],
img[class*="avatar"][title*="sdlc" i] {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 104"><path fill="%231f7a4d" d="M14 48C14 26 31 10 52 10s38 16 38 38v28c0 0-4 8-9.5 8S71 76 71 76s-4 8-9.5 8S52 76 52 76s-4 8-9.5 8S33 76 33 76s-4 8-9.5 8S14 76 14 76z"/><circle cx="38" cy="42" r="12" fill="%23fff"/><circle cx="66" cy="42" r="12" fill="%23fff"/><circle cx="40" cy="44" r="5.5" fill="%2312291d"/><circle cx="68" cy="44" r="5.5" fill="%2312291d"/></svg>');
  border-radius: 0;
  background: none;
}

/* ── мелкая фирменная отделка ─────────────────────────────────────── */
.ui.primary.button,
.ui.primary.buttons .button {
  background: var(--color-primary);
  border-radius: 8px;
}
.ui.primary.button:hover { background: var(--color-primary-hover); }
.ui.button { border-radius: 8px; }
.ui.card, .ui.segment, .repository .ui.segment { border-radius: 12px; }

/* Ссылки на имена репозиториев — фирменным, но без подчёркивания:
   в списках их много, подчёркивание превращает страницу в частокол. */
.repo-title a, .flex-item-title a { color: var(--color-primary); }