/*!
 * velikie-inv-links.css — базовое оформление блока привязок и карточки дела.
 *
 * Это ОТПРАВНАЯ ТОЧКА, а не готовый дизайн: принимающий сайт почти наверняка захочет
 * подогнать вид под себя. Поэтому здесь нет ни жёстких размеров шрифта, ни фирменных
 * цветов — всё выражено переменными в :root и наследуется от окружения (font: inherit).
 * Чтобы перекрасить блок под сайт, достаточно переопределить переменные:
 *
 *     :root {
 *         --vi-accent: #8b0000;
 *         --vi-border: #d8d0c0;
 *     }
 *
 * Переменные CSS понимает Firefox 31+, Chrome 49+, Safari 9.1+. Для более старых
 * браузеров каждое правило продублировано обычным значением — оно и применится,
 * а var() будет проигнорирован.
 *
 * Все классы начинаются с vi- и не задевают разметку сайта.
 */

:root {
    --vi-accent: #2b6cb0;
    --vi-accent-weak: #ebf3fb;
    --vi-border: #d5d5d5;
    --vi-bg: #ffffff;
    --vi-bg-soft: #f7f7f7;
    --vi-text: #222222;
    --vi-text-weak: #6b6b6b;
    --vi-warn: #b26a00;
    --vi-warn-bg: #fff6e5;
    --vi-radius: 3px;
}

/* ── Ссылка на дело в тексте ─────────────────────────────────────────────── */

.vi-link {
    border-bottom: 1px dotted #2b6cb0;
    border-bottom-color: var(--vi-accent);
    text-decoration: none;
    cursor: help;
}

.vi-link:hover {
    background: #ebf3fb;
    background: var(--vi-accent-weak);
}

/* ── Карточка дела при наведении ─────────────────────────────────────────── */

.vi-card {
    position: absolute;
    z-index: 9999;
    max-width: 460px;
    padding: 10px 12px;
    border: 1px solid #d5d5d5;
    border-color: var(--vi-border);
    border-radius: 3px;
    border-radius: var(--vi-radius);
    background: #ffffff;
    background: var(--vi-bg);
    color: #222222;
    color: var(--vi-text);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    font: inherit;
    font-size: 90%;
    line-height: 1.4;
    text-align: left;
}

.vi-card-afic {
    font-weight: bold;
    margin-bottom: 4px;
}

.vi-card-title {
    margin: 4px 0;
}

.vi-card-row {
    margin: 2px 0;
}

/* Значения с переносами строк (заголовок дела, примечание) — сохраняем переводы строк. */
.vi-card-pre {
    white-space: pre-line;
}

.vi-card-flags,
.vi-card-note,
.vi-card-proj {
    color: #6b6b6b;
    color: var(--vi-text-weak);
}

.vi-card-note {
    margin: 4px 0;
    font-style: italic;
}

.vi-card-loading,
.vi-card-error {
    color: #6b6b6b;
    color: var(--vi-text-weak);
}

.vi-card-materials {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #d5d5d5;
    border-top-color: var(--vi-border);
}

.vi-card-materials-head {
    margin-bottom: 3px;
    font-weight: bold;
}

.vi-card-materials ul {
    margin: 0;
    padding-left: 18px;
}

.vi-card-materials li {
    margin: 1px 0;
}

.vi-card-more {
    margin-top: 8px;
}

/* ── Блок привязки в форме написания поста ───────────────────────────────── */

.vi-editor {
    margin: 8px 0;
    padding: 8px 10px;
    border: 1px solid #d5d5d5;
    border-color: var(--vi-border);
    border-radius: 3px;
    border-radius: var(--vi-radius);
    background: #f7f7f7;
    background: var(--vi-bg-soft);
    font: inherit;
    font-size: 95%;
}

.vi-editor-head {
    display: block;
    margin-bottom: 6px;
}

.vi-editor-title {
    font-weight: bold;
}

.vi-editor-help {
    float: right;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    background: #d5d5d5;
    background: var(--vi-border);
    color: #222222;
    color: var(--vi-text);
    text-decoration: none;
    font-size: 11px;
}

.vi-editor-empty {
    margin: 2px 0 6px;
    color: #6b6b6b;
    color: var(--vi-text-weak);
}

/* Строка добавленной привязки */

.vi-row {
    margin: 2px 0;
    padding: 3px 4px;
    background: #ffffff;
    background: var(--vi-bg);
    border: 1px solid #d5d5d5;
    border-color: var(--vi-border);
    border-radius: 3px;
    border-radius: var(--vi-radius);
}

.vi-row-no {
    display: inline-block;
    min-width: 56px;
    color: #6b6b6b;
    color: var(--vi-text-weak);
    font-family: monospace;
}

.vi-row-afic {
    font-weight: bold;
}

/* Встроенная справка (раскрывается по «?») */

.vi-editor-help-panel {
    margin: 4px 0 8px;
    padding: 8px 10px;
    border: 1px solid #d5d5d5;
    border-color: var(--vi-border);
    border-radius: 3px;
    border-radius: var(--vi-radius);
    background: #ffffff;
    background: var(--vi-bg);
    font-size: 92%;
}

.vi-editor-help-panel p {
    margin: 0 0 6px;
}

.vi-editor-help-panel p:last-child {
    margin-bottom: 0;
}

/* Галочка «номер дела зависит от раздела» — показывает поле «Раздел» */

.vi-chapter-toggle {
    display: block;
    margin: 4px 0 2px;
    font-size: 90%;
    color: #6b6b6b;
    color: var(--vi-text-weak);
    cursor: pointer;
}

.vi-chapter-toggle input {
    vertical-align: middle;
    margin-right: 4px;
}

/* Поля набора шифра */

.vi-editor-form {
    margin-top: 6px;
    /* Эластичный ряд: поля растягиваются на всю ширину, справа не остаётся пустоты.
       Flexbox есть в Firefox 52+; gap не используем (его в FF52 нет) — отступы на детях. */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.vi-field {
    position: relative;
    /* width из .vi-f-* работает как базовый размер, flex-grow добивает до края ряда */
    flex: 1 1 auto;
    margin: 0 6px 6px 0;
}

.vi-input {
    width: 100%;
    box-sizing: border-box;
    padding: 3px 18px 3px 5px;
    border: 1px solid #d5d5d5;
    border-color: var(--vi-border);
    border-radius: 3px;
    border-radius: var(--vi-radius);
    font: inherit;
}

/* Ширины — базовые (flex-basis через width); архив тянется вдвое сильнее номерных полей. */
.vi-f-arch { width: 150px; flex-grow: 2; }
.vi-f-num  { width: 90px;  flex-grow: 1; }

/* Отметка «найдено в каталоге» справа внутри поля */

.vi-mark {
    position: absolute;
    top: 50%;
    right: 5px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
}

.vi-mark-ok {
    background: #2e7d32;
}

.vi-mark-new {
    background: #b26a00;
    background: var(--vi-warn);
}

/* Выпадающие подсказки */

.vi-sugg {
    position: absolute;
    z-index: 9998;
    top: 100%;
    left: 0;
    /* Список намеренно шире поля: заголовки фондов/описей длинные. По окну его
       удерживает positionSuggest() в velikie-inv-links.js (сдвигает left и режет
       ширину под вьюпорт), поэтому max-width здесь щедрый. */
    min-width: 380px;
    max-width: 620px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #d5d5d5;
    border-color: var(--vi-border);
    border-top: none;
    background: #ffffff;
    background: var(--vi-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

/* Длинные заголовки фондов/описей переносим по словам, а не прячем в
   горизонтальный скролл: пусть подсказка занимает несколько строк. */
.vi-sugg-item {
    padding: 3px 6px;
    cursor: pointer;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.vi-sugg-item:hover,
.vi-sugg-active {
    background: #ebf3fb;
    background: var(--vi-accent-weak);
}

.vi-sugg-main {
    font-weight: bold;
}

.vi-sugg-extra {
    margin-left: 6px;
    color: #6b6b6b;
    color: var(--vi-text-weak);
    font-size: 90%;
}

/* Кнопки */

.vi-btn {
    padding: 3px 10px;
    border: 1px solid #d5d5d5;
    border-color: var(--vi-border);
    border-radius: 3px;
    border-radius: var(--vi-radius);
    background: #ffffff;
    background: var(--vi-bg);
    color: #222222;
    color: var(--vi-text);
    font: inherit;
    cursor: pointer;
}

.vi-btn:hover {
    background: #ebf3fb;
    background: var(--vi-accent-weak);
}

/* Кнопка «Добавить» стоит в одном ряду с полями (inline-block, vertical-align:top),
   поэтому выравниваем её по верху, а не по baseline — иначе съезжает вниз.
   margin:0 — защита от стилей сайта-хоста вида «button { margin-top: … }», которые
   иначе сдвигают кнопку относительно полей (класс перебивает селектор по тегу). */
.vi-btn-add {
    vertical-align: top;
    margin-top: 0;
    margin-bottom: 0;
    /* В эластичном ряду кнопка не растягивается — держит свой размер у края. */
    flex: 0 0 auto;
    align-self: flex-start;
}

.vi-btn-mini {
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 90%;
}

.vi-btn-del {
    color: #a00;
}

.vi-editor-hint {
    display: none;
    margin-top: 4px;
    color: #b26a00;
    color: var(--vi-warn);
}

/* Сноска «нет нужного архива» — постоянная, поэтому приглушённая: она не должна
   спорить с подсказками и сообщениями об ошибках. */
.vi-editor-note {
    margin-top: 6px;
    font-size: 90%;
    color: #6b6b6b;
    color: var(--vi-text-weak);
}

.vi-editor-note-small {
    font-size: 90%;
}

/* ── Список привязок под постом (режим без маркеров) ─────────────────────── */

.vi-summary {
    margin: 8px 0;
    font-size: 95%;
}

.vi-summary-title {
    font-weight: bold;
    margin-right: 4px;
}

.vi-summary-list {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vi-summary-list li {
    display: inline;
}

.vi-summary-list li + li:before {
    content: ", ";
}

/* ── Узкие экраны ────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .vi-field,
    .vi-f-arch,
    .vi-f-num {
        width: 100%;
        margin-right: 0;
    }

    .vi-card {
        max-width: 92%;
    }
}