/*
 * Форма просмотра из git (#91, заход В) — общая для админки и пульта (`gitViewer.js`).
 * Токены у двух интерфейсов названы по-разному, значения одни (дизайн-система макета), поэтому
 * здесь свои переменные на корне формы, а не чужие имена.
 */
.gv-tabs, .gv {
  --gv-card: #ffffff; --gv-border: #e2dfd6; --gv-field: #d9d5cb; --gv-line: #eeece6; --gv-head: #faf9f6;
  --gv-text: #1c1b18; --gv-text-2: #5f5b52; --gv-quiet: #8a867c;
  --gv-accent: #0f766e; --gv-accent-bg: #e6f4f2; --gv-accent-text: #0f5f58;
  --gv-danger-bg: #fde8e6; --gv-danger-text: #9a2216; --gv-warn: #d97706; --gv-warn-bg: #fff1d6; --gv-warn-text: #7a4a00; --gv-warn-border: #f3d9a4;
  --gv-grey: #f0eee8; --gv-staff: #3f3a8a; --gv-staff-bg: #ecebf5;
  --gv-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  color: var(--gv-text);
}
.gv-tabs { display: flex; border-bottom: 1px solid var(--gv-border); overflow-x: auto; margin-bottom: 16px; }
.gv-tabs a { padding: 10px 14px; font-size: 14px; color: var(--gv-text-2); border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; }
.gv-tabs a.on { color: var(--gv-text); font-weight: 600; border-bottom-color: var(--gv-accent); }
.gv { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; font-size: 14px; }
.gv-list, .gv-pane { background: var(--gv-card); border: 1px solid var(--gv-border); border-radius: 10px; min-width: 0; }
.gv-list { max-height: calc(100vh - 220px); overflow: auto; position: sticky; top: 16px; }
.gv-pane { overflow: hidden; }
.gv-list-head { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-bottom: 1px solid var(--gv-border); background: var(--gv-head); position: sticky; top: 0; z-index: 1; }
.gv-search { min-height: 40px; width: 100%; padding: 0 12px; border: 1px solid var(--gv-field); border-radius: 8px; background: #ffffff; font: inherit; color: inherit; }
.gv-search:focus { border-color: var(--gv-accent); outline: none; box-shadow: 0 0 0 3px var(--gv-accent-bg); }
.gv-quiet { color: var(--gv-quiet); font-size: 12px; }
.gv-sides { font-size: 13px; overflow-wrap: anywhere; }
.gv-counts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--gv-text-2); }
.gv-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; white-space: nowrap; }
.gv-pill.ok { background: var(--gv-accent-bg); color: var(--gv-accent-text); }
.gv-pill.grey { background: var(--gv-grey); color: var(--gv-text-2); }
.gv-pill.danger { background: var(--gv-danger-bg); color: var(--gv-danger-text); }
.gv-pill.warn { background: var(--gv-warn-bg); color: var(--gv-warn-text); }
.gv-btn { min-height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--gv-field); background: #ffffff; font: inherit; font-size: 13px; cursor: pointer; color: inherit; }
.gv-btn:hover { border-color: var(--gv-accent); }
.gv-note-box { margin: 10px 12px 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--gv-warn-border); background: var(--gv-warn-bg); color: var(--gv-warn-text); font-size: 13px; line-height: 1.4; }
.gv-pane .gv-note-box { margin: 10px 14px 0; }
.gv-failure { padding: 20px 18px; color: var(--gv-danger-text); display: flex; flex-direction: column; gap: 10px; }
.gv-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 4px 10px; border: 0; border-bottom: 1px solid var(--gv-line); background: none; text-align: left; cursor: pointer; font: inherit; font-size: 13px; color: inherit; }
.gv-row:hover { background: var(--gv-head); }
.gv-row.on { background: var(--gv-accent-bg); }
.gv-row.quiet { cursor: default; color: var(--gv-quiet); }
.gv-row.danger { color: var(--gv-danger-text); cursor: default; }
.gv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--gv-mono); font-size: 12px; }
.gv-row.two { align-items: flex-start; padding-top: 6px; padding-bottom: 6px; }
.gv-two { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gv-dir { color: var(--gv-quiet); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-size { color: var(--gv-quiet); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gv-ic { width: 12px; height: 12px; flex: none; border-radius: 2px; }
.gv-ic.file { border: 1px solid var(--gv-field); background: #ffffff; }
.gv-ic.dir { background: var(--gv-warn-border); }
.gv-row.dir[aria-expanded='true'] .gv-ic.dir { background: var(--gv-warn); }
.gv-mark { min-width: 22px; text-align: center; font-family: var(--gv-mono); }
.gv-plus { color: var(--gv-accent-text); }
.gv-minus { color: var(--gv-danger-text); }
.gv-empty, .gv-loading { padding: 28px 18px; color: var(--gv-text-2); text-align: center; }
.gv-more { padding: 10px 12px; }
.gv-note { margin: 0; padding: 8px 14px; }
.gv-file-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--gv-border); background: var(--gv-head); flex-wrap: wrap; }
.gv-path { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: var(--gv-mono); font-size: 12px; }
.gv-code { display: flex; overflow: auto; max-height: calc(100vh - 260px); font-family: var(--gv-mono); font-size: 12px; line-height: 18px; }
.gv-code pre { margin: 0; font: inherit; }
.gv-gutter { flex: none; padding: 8px 10px; text-align: right; color: var(--gv-quiet); background: var(--gv-head); border-right: 1px solid var(--gv-line); user-select: none; position: sticky; left: 0; }
.gv-text { padding: 8px 14px; }
.gv-diff { overflow: auto; max-height: calc(100vh - 280px); font-family: var(--gv-mono); font-size: 12px; line-height: 18px; }
.gv-d { display: grid; grid-template-columns: 48px 48px max-content; min-width: 100%; }
.gv-ln { padding: 0 6px; text-align: right; color: var(--gv-quiet); user-select: none; border-right: 1px solid var(--gv-line); }
.gv-dt { padding: 0 12px; white-space: pre; }
.gv-d.add { background: #e8f6ee; }
.gv-d.add .gv-dt::before { content: '+'; position: absolute; margin-left: -10px; color: var(--gv-accent-text); }
.gv-d.del { background: #fdeeec; }
.gv-d.del .gv-dt::before { content: '−'; position: absolute; margin-left: -10px; color: var(--gv-danger-text); }
.gv-d.hunk { background: var(--gv-staff-bg); color: var(--gv-staff); }

@media (max-width: 860px) {
  .gv { grid-template-columns: minmax(0, 1fr); }
  .gv-list { position: static; max-height: 60vh; }
  .gv-code, .gv-diff { max-height: 70vh; }
  .gv-d { grid-template-columns: 36px 36px max-content; }
}