/* Kibab · портал патчей Siemens (FASOLEY GANG)
   Стиль FASOLEY GANG: строгий монохром, акцент — белый.
   Шрифты только системные, внешних CDN нет. */

:root {
  --bg: #0a0a0a;
  --surface: #151515;
  --elevated: #1f1f1f;
  --line: #3d3d3d;
  --text: #f5f5f5;
  --muted: #a6a6a6;
  --accent: #ffffff;
  --active: #80bcff;
  --success: #8ce0b0;
  --error: #ffaaa5;
  --waiting: #f2d08b;
  --radius: 10px;
  --gap: 16px;
  --pad: 24px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: break-word;
}

code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  color: var(--muted);
}

a { color: var(--text); }
a:hover { color: var(--accent); }

/* Шапка: название слева, статус и размер базы справа */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  padding: 12px var(--pad);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.topbar__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  min-width: 0;
}

/* Строка состояния живёт в шапке: короткая, без отдельной полосы */
.status {
  font-size: 12.5px;
  color: var(--muted);
  max-width: 42ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status--idle { color: var(--muted); }
.status--loading { color: var(--waiting); }
.status--ok { color: var(--muted); }
.status--error { color: var(--error); }

/* Счётчик базы: главное число справа в шапке */
.counter {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--elevated);
  white-space: nowrap;
}
.counter b { font-size: 18px; font-weight: 700; }
.counter__label { font-size: 12px; color: var(--muted); }

.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }

/* Баннер GANG: слева от заголовка, не «задавливает» вордмарк и текст.
   Габариты через CSS (width/height в разметке — только подсказка для
   пропорций, чтобы не было скачка вёрстки до загрузки картинки). */
.brand__gang {
  display: block;
  flex: 0 0 auto;
  width: clamp(52px, 6.5vw, 76px);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg);
  object-fit: cover;
}

/* Основной логотип-вордмарк в шапке не используем: остаётся баннер GANG + текст
   заголовка. Класс оставлен для совместимости, но скрыт на всех экранах. */
.brand__logo { display: none; }

.brand__text { min-width: 0; }
.brand__text h1 {
  margin: 0;
  font-size: clamp(17px, 2.1vw, 21px);
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1.25;
}
.brand__accent { color: var(--accent); font-weight: 700; }
.brand__sub { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; }

.topbar__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Общие элементы */
.btn {
  background: var(--elevated);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 14px;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn--primary { border-color: var(--active); color: var(--active); }

.pill {
  display: inline-block;
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  color: var(--muted);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.muted { color: var(--muted); }

/* Сводка одной строкой: числа, а не карточки. Без сворачиваний и сносок. */
.meta-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  padding: 2px 2px 0;
  font-size: 13px;
  color: var(--muted);
}
.stat { white-space: nowrap; }
.stat b { color: var(--text); font-weight: 600; margin-right: 3px; }
.stat--muted { font-size: 12.5px; }
.meta-row__sep { flex: 1 1 auto; min-width: 12px; }

/* Каркас: страница на десктопе не скроллится — в экран вписывается .shell,
   а прокрутка живёт внутри панелей со списками (.panel--scroll). */
.shell {
  overflow: hidden;
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px var(--gap);
  padding: 12px var(--pad) 14px;
  align-items: stretch;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  min-width: 0;
}
.panel--wide { grid-column: 1 / -1; }
.panel--filters { grid-column: 1 / -1; display: grid; gap: 12px; }
.panel__title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.panel__title-spacer { flex: 1 1 auto; min-width: 8px; }
.panel__title .muted { font-size: 12.5px; text-transform: none; letter-spacing: 0; }

/* Чипы семейств: горизонтальная лента — «взрослые» каталоги так и делают */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--rail {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.chips--rail::-webkit-scrollbar { height: 6px; }
.chips--rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.chip {
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  padding: 6px 13px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.chip:hover { border-color: var(--accent); }
.chip--on { border-color: var(--active); color: var(--active); background: var(--bg); }
.chip__num { color: var(--muted); margin-left: 6px; }
.chip--on .chip__num { color: var(--active); }

/* Фильтры: один ряд — прошивка, поиск, размер страницы, сброс */
.filters {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field--grow { flex: 1 1 260px; }
.field--limit { flex: 0 0 120px; }
.field--reset { flex: 0 0 auto; }
.field__label { font-size: 12px; color: var(--muted); }
.field select,
.field input {
  background: var(--elevated);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  font: inherit;
  width: 100%;
  min-width: 0;
}
.field select:focus,
.field input:focus { outline: 1px solid var(--active); border-color: var(--active); }
.btn--ghost { background: transparent; color: var(--muted); }
.btn--ghost:hover:not(:disabled) { color: var(--text); }

/* Панель изменений: компактный блок внизу, скроллится сам */
.panel--changes { display: flex; flex-direction: column; min-height: 0; }
.panel--changes .list--compact {
  max-height: 148px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Сводка (устаревшие карточки/чипы оставлены только на случай кэша страницы) */

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.toolbar__spacer { flex: 1 1 auto; }

/* Списки */
.list { display: flex; flex-direction: column; gap: 8px; }
.list--compact .row { padding: 8px 10px; }

.row {
  background: var(--elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: left;
  color: var(--text);
  font: inherit;
  min-width: 0;
}
.row:hover { border-color: var(--accent); }
.row--on { border-color: var(--active); }
.row__top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.row__title { font-weight: 500; }
.row__meta { color: var(--muted); font-size: 12.5px; margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
.row__id { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.row__preview {
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.empty { color: var(--muted); padding: 12px 4px; }

/* Карточка патча */
.detail { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.detail__title { font-size: 17px; font-weight: 600; margin: 0; }
.detail__title-en { color: var(--muted); font-size: 13px; margin: 0; }
.detail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 14px;
  font-size: 13px;
}
.detail__grid dt { color: var(--muted); font-size: 12px; margin: 0 0 2px; }
.detail__grid dd { margin: 0; word-break: break-word; }
.detail__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Описание патча (из блока с комментарием внутри .vkp) */
.detail__desc {
  border: 1px solid var(--line);
  border-left: 2px solid var(--active);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 10px 12px;
  font-size: 13.5px;
  white-space: pre-wrap;
  hyphens: auto;
  max-height: 420px;
  overflow: auto;
}
.detail__desc-title {
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
}

/* --- Мобильная панель поиска (только узкие экраны) --------------------------- */
.mobile-bar { display: none; }

/* Липкая пагинация и шторка карточки по умолчанию выключены (десктоп) */
.toolbar--sticky { display: none; }
.sheet__close { display: none; }
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.62); z-index: 40; }

.footer {
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding: 10px var(--pad) 12px;
  color: var(--muted);
  font-size: 12.5px;
}

/* Планшеты и телефоны: одна колонка, страница снова скроллится нормально */
@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; grid-template-rows: none; }
  .shell { overflow: visible; }
  .panel--changes .list--compact { max-height: none; }
}

/* --- Десктоп: витрина в экран и независимый скролл списков --------------------
   Страница (body) не прокручивается вовсе: всю высоту занимает .shell, а
   переполнение гасят панели со списками (.panel--scroll) и внутренние блоки
   (.detail--scroll). Поэтому «страница не убегает вниз», а карточка и список
   листаются каждый сам по себе. Включаем только там, где высота предсказуема:
   широкий экран и не крошечная высота окна. */
@media (min-width: 961px) and (min-height: 620px) {
  body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
  .topbar, .footer { flex: 0 0 auto; }
  .shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .layout { flex: 1 1 auto; min-height: 0; }
  .panel--scroll {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  .panel--scroll > .panel__title { flex: 0 0 auto; }
  .list--scroll,
  .detail--scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  /* Панель изменений внизу — короткая и со своим скроллом */
  .panel--changes { max-height: 210px; }
}

/* --- Мобильный режим: облегчённый UI/UX, список-first -------------------------
   До 720px: закреплённая шапка и поиск, список занимает экран, карточка шторкой
   снизу, фильтры одной строкой, чипы семейств — горизонтальной лентой. */
@media (max-width: 720px) {
  :root { --pad: 12px; --gap: 12px; }
  html, body { font-size: 15px; }
  .topbar {
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--surface);
    padding: 10px var(--pad);
  }
  /* Шапка на мобильном — ОДНА строка: баннер и название слева (название может
     ужиматься), счётчик патчей справа. Статус уходит вниз отдельной строкой,
     чтобы главное число не «съезжало» на второй ряд. */
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .brand { flex: 1 1 auto; min-width: 0; gap: 10px; }
  .brand__gang { width: 40px; }
  .brand__text { min-width: 0; }
  .brand__text h1 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand__sub { display: none; }          /* подпись-сноска на мобильном не нужна */
  .topbar__meta { margin-left: 0; gap: 8px; justify-content: flex-end; }
  .counter { padding: 4px 11px; }
  .counter b { font-size: 16px; }
  .counter__label { font-size: 11px; }
  .status {
    grid-column: 1 / -1;
    order: 3;
    max-width: none;
    font-size: 12px;
    white-space: normal;
  }
  .pill { max-width: 100%; }
  .detail__desc { max-height: none; }

  /* Сводка и заголовки панелей — плотнее */
  .meta-row { gap: 6px 14px; font-size: 12.5px; padding: 0; }
  .panel { padding: 12px; }
  .panel__title { margin-bottom: 10px; }

  /* Фильтры одной строкой: прошивка и размер — половина, поиск на всю ширину */
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
  .field--grow { grid-column: 1 / -1; }
  .field--limit { flex: none; }
  .field--reset { grid-column: 1 / -1; }
  .chips--rail { margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 6px; }

  /* Поиск закреплён под шапкой: всегда под рукой, без прокрутки вверх */
  .mobile-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 25;
    padding: 8px var(--pad);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .mobile-bar input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;         /* тач-таргет */
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 16px;          /* 16px на iOS не даёт авто-зум при фокусе */
  }
  .btn, .toolbar .btn, #reset-filters { min-height: 44px; padding: 10px 14px; }
  .btn--icon { min-width: 44px; }
  #filters-panel .toolbar .btn,
  #filters-panel .toolbar .pill:last-of-type { display: none; }

  /* Липкая пагинация внизу списка: листать, не возвращаясь наверх */
  .toolbar--sticky {
    display: flex;
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: 8px 10px;
    margin: 8px calc(var(--pad) * -1) calc(var(--pad) * -1);
    justify-content: space-between;
  }

  /* Карточка — шторка снизу: открывается поверх списка, закрывается кнопкой */
  #detail-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    max-height: 86vh;
    overflow: auto;
    border-radius: 14px 14px 0 0;
    border: 1px solid var(--line);
    border-bottom: none;
    background: var(--surface);
    padding: var(--pad);
    transform: translateY(102%);
    transition: transform 0.2s ease;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
  }
  body.sheet-open #detail-panel { transform: translateY(0); }
  .sheet__close { display: inline-flex; margin-left: auto; }
  /* Кнопки в карточке — во всю ширину: удобно попадать пальцем */
  .detail__actions { flex-direction: column; }
  .detail__actions .btn { width: 100%; justify-content: center; text-align: center; }
  /* Надёжная «безопасная зона» под домашним индикатором iPhone */
  #detail-panel { padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 420px) {
  html, body { font-size: 14.5px; }
  .row__preview { -webkit-line-clamp: 2; }
  .meta-row { font-size: 12px; }
}

/* Тёмная схема — как у остальных сервисов команды */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}