/* ═══ ФАЙЛ — ОДИН ВИД НА ВЕСЬ КАБИНЕТ ═══════════════════════════════════════════
   Паспорт товара, счёт по заказу и строка в «Моих документах» — это одна и та же
   вещь: файл, который человек забирает к себе. До 03.08.2026 каждый экран рисовал
   её по-своему — плашка с листом 26×35 в карточке товара, строка таблицы с глифом
   16px в заказе, вообще без иконки и БЕЗ КНОПКИ СКАЧИВАНИЯ в «Моих документах».
   Дилер трижды за одну сессию заново понимал, что перед ним и куда жать.

   Эталон — принятая плашка вкладки «Документация» в карточке товара. Остальные
   экраны приведены к ней, а не наоборот.

   Цвета проставлены НА элементах: в site.css живут `* {color}` и `a {color!important}`,
   из-за которых наследование до вложенных span/i не доходит и «серая подпись» молча
   становится чёрной. См. reference_css_color_inheritance_mines.
   ────────────────────────────────────────────────────────────────────────────── */

/* ── Плашка файла: карточка товара, документы заказа ─────────────────────────── */
.file-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 520px;
    padding: 14px 18px;
    background: #F9F9FA;
    border: 1px solid transparent;
    border-radius: 16px;
    text-align: left;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.file-card:hover {
    background: #F3F4F6;
    border-color: #E1E4E9;
    transform: translateY(-1px);
}

.file-card__icon { flex: 0 0 auto; }

.file-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.file-card__name {
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    color: #0D1017;
    overflow-wrap: anywhere;
}

.file-card__meta {
    margin-top: 2px;
    font-size: 13px;
    line-height: 18px;
    color: #7A8290;
}

/* Только для бумаги: перечень документов на листе имеет смысл, сами превью — нет.
   Прячем классом, а не условием в PHP, чтобы бумага не зависела от решений про экран. */
.file-card--print { display: none; }

/* Плашка бывает и кнопкой (документ заказа собирается в 1С по клику, ссылки на файл
   не существует) — снимаем всё, чем браузер красит <button>. */
button.file-card {
    font-family: inherit;
    cursor: pointer;
}

/* ── Кнопка скачивания: одна на плашку и на строку «Моих документов» ─────────── */
.file-dl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    cursor: pointer;
}

.file-dl i { font-size: 18px; color: #45484F; }
.file-card:hover .file-dl i,
.file-dl:hover i { color: #ed1c24; }
.file-dl:hover { background: #EDEFF2; }

/* Спиннер занимает место кнопки, а не появляется рядом: иначе строка дёргается
   на каждое нажатие. Документ из 1С собирается секунды — без признака работы
   человек жмёт второй раз. */
.file-dl__spin {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid #D3D6DB;
    border-top-color: #ed1c24;
    border-radius: 50%;
    animation: file-spin .7s linear infinite;
}

.file-dl.is-busy { cursor: default; background: none; }
.file-dl.is-busy i { display: none; }
.file-dl.is-busy .file-dl__spin { display: block; }

@keyframes file-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .file-dl__spin { animation-duration: 2.4s; }
    .file-card { transition: none; }
}

/* ── Строка файла: там, где вокруг уже есть таблица со своими колонками ──────── */
.file-line {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.file-line__name {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #0D1017;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .file-card { max-width: none; }
}