/* ============================================================================
 * files-tab.css — вкладка «Файлы» (агрегатор Документов+Таблиц+Вложений).
 * Классы .filesagg / .files-* (НЕ путать с легаси .files-v2-* в files.css —
 * это старый браузер вложений). Только токены, 3 темы. Карточка — в едином
 * стиле с «Мои документы»/«Мои таблицы».
 * ==========================================================================*/
/* width:100% — иначе в flex-column .main-area вкладка сжимается по контенту
   (плитки-сетка растягивалась за счёт колонок, а список выходил узким). */
#tab-files.tab-content { padding: 0; height: 100%; width: 100%; }
/* На всю рабочую область (как Задачи/Документы/Таблицы), без кап-ширины —
   иначе по бокам остаётся пустое место. */
.filesagg { display: flex; flex-direction: column; height: 100%; min-height: 0;
    width: 100%; margin: 0; box-sizing: border-box; padding: 16px 36px 28px; }

/* Верх: одна строка — табы слева · поиск+фильтры+вид справа */
.files-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.files-topright { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex: 1 1 auto; min-width: 0; }
.files-actions-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.files-tabs { display: flex; gap: 4px; flex: 0 0 auto; }
.files-tab {
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    border: none; background: transparent; color: var(--text-muted);
    padding: 8px 14px; border-radius: 8px;
}
.files-tab:hover { color: var(--text); background: var(--fill); }
.files-tab.is-active { color: var(--accent); background: var(--accent-tint); }
.files-search {
    font: inherit; font-size: 13px; color: var(--text); background: var(--surface);
    border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px;
    width: 240px; max-width: 100%; outline: none;
}
.files-search:focus { border-color: var(--accent); }

/* Фильтры: чипы типов + селекты */
/* Чипы-типы убраны → фильтры (период/сортировка/вид) прижимаем вправо. */
.files-filters { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.files-fchips { display: flex; gap: 6px; flex-wrap: wrap; }
.files-chip {
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
    padding: 5px 12px; border-radius: 999px;
}
.files-chip:hover { color: var(--text); }
.files-chip.is-on { background: var(--accent-tint); color: var(--accent); border-color: var(--accent); }
.files-fright { display: flex; gap: 8px; align-items: center; }
/* Селект в стиле системы (.system-select): appearance:none + чеврон, на токенах. */
.files-sel {
    font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md, 8px);
    padding: 7px 30px 7px 12px; line-height: 1.2;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236A7180' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 6 8 10 12 6'/></svg>");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 13px 13px;
    transition: border-color .12s, box-shadow .12s;
}
.files-sel:hover { border-color: var(--text-muted); }
.files-sel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
/* Переключатель Плитки/Список (как Чеклист/Карточки в дорожной карте) */
.files-viewtoggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
.files-vbtn {
    font: inherit; cursor: pointer; border: none; background: transparent; color: var(--text-muted);
    padding: 6px 9px; display: inline-flex; align-items: center; justify-content: center;
}
.files-vbtn + .files-vbtn { border-left: 1px solid var(--border); }
.files-vbtn:hover { color: var(--text); background: var(--fill); }
.files-vbtn.is-active { color: var(--accent); background: var(--accent-tint); }
.files-vbtn svg { width: 15px; height: 15px; display: block; }

/* Вид «Список» — карточки как .docs-v2-saved-row / .tbl-my-row.
   Grid в 1 колонку с 1fr (а не flex-column) — 1fr форсит полную ширину, иначе
   флекс-таб схлопывается по контенту и список выходит узкой колонкой. */
.files-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
    overflow-y: auto; min-height: 0; align-content: start; }
.files-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px); padding: 12px 14px;
}
.files-ico {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius-md, 9px);
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft, var(--accent-tint)); color: var(--accent);
}
.files-ico svg { width: 18px; height: 18px; display: block; }
.files-main { flex: 1 1 auto; min-width: 0; }
.files-title {
    font-size: 14px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.files-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.files-badge {
    display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; background: var(--accent-tint); color: var(--accent);
    vertical-align: middle;
}
.files-open {
    flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    min-height: 32px; padding: 0 14px; border-radius: var(--radius-md, 8px);
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.files-open:hover { background: var(--fill); }

/* ── Вид «Плитки» — компактные, число колонок по ширине. Фиксированные N с 1fr
   (а не auto-fill) — иначе таб-флекс-контейнер сжимается по контенту и сетка
   не тянется на всю ширину. */
/* Карточки по Stitch: авто-число колонок, квадратная иконка-область,
   «Открыть» появляется по hover, «⋯» в строке с названием. */
.files-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px; overflow-y: auto; min-height: 0; align-content: start;
}
.files-tile {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.files-tile:hover { box-shadow: 0 10px 24px -8px rgba(15,19,28,.18); }
.files-tile-thumb {
    aspect-ratio: 1 / 1; background: var(--fill); display: flex; align-items: center; justify-content: center;
    position: relative; transition: background .2s ease;
}
.files-tile:hover .files-tile-thumb { background: var(--accent-tint); }
.files-tile-ico { color: var(--text-muted); display: flex; transition: color .2s ease; }
.files-tile:hover .files-tile-ico { color: var(--accent); }
.files-tile-ico svg { width: 46px; height: 46px; display: block; }
.files-tile-badge {
    position: absolute; top: 8px; left: 8px; max-width: calc(100% - 16px);
    padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600;
    background: var(--surface); color: var(--accent); border: 1px solid var(--accent-tint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.files-tile-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.files-tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.files-tile-head .files-menu-btn { position: static; flex: 0 0 auto; width: 22px; height: 22px; border: none; background: transparent; }
.files-tile-head .files-menu-btn:hover { background: var(--fill); }
.files-tile-title {
    flex: 1 1 auto; min-width: 0;
    font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.files-tile-meta { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-tile-open {
    margin-top: 4px; width: 100%; min-height: 34px; font-size: 13px; font-weight: 600;
    background: var(--accent); color: var(--on-accent, #fff); border: 1px solid var(--accent);
    opacity: 0; transition: opacity .2s ease, background .15s ease;
}
.files-tile:hover .files-tile-open { opacity: 1; }
.files-tile-open:hover { background: var(--accent-deep, var(--accent)); }

.files-hint, .files-empty { color: var(--text-muted); font-size: 14px; padding: 24px 4px; text-align: center; grid-column: 1 / -1; }

/* ── Загрузка личных файлов ────────────────────────────────────────────────── */
.files-upbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.files-upbtn {
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    padding: 8px 16px; border-radius: var(--radius-md, 8px);
    background: var(--accent); color: var(--on-accent, #fff); border: 1px solid var(--accent);
}
.files-upbtn:hover { background: var(--accent-deep, var(--accent)); }
.files-uphint { font-size: 12px; color: var(--text-muted); }
.files-upprog { display: flex; flex-direction: column; gap: 6px; }
.files-upprog:not(:empty) { margin-bottom: 12px; }
.files-uprow {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px); padding: 8px 12px; font-size: 12.5px;
}
.files-upname { flex: 1 1 auto; min-width: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.files-upbar-track { flex: 0 0 120px; height: 6px; background: var(--fill); border-radius: 999px; overflow: hidden; }
.files-upbar-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s ease; }
.files-uppct { flex: 0 0 auto; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.files-uprow--err { border-color: var(--status-failed); }
.files-uperr { flex: 1 1 auto; color: var(--status-failed); }
.files-upretry {
    font: inherit; font-size: 12px; cursor: pointer; padding: 4px 10px; border-radius: 6px;
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
/* Подсветка зоны drag-and-drop */
.files-grid.files-drop, .files-list.files-drop { outline: 2px dashed var(--accent); outline-offset: -6px; border-radius: var(--radius-md, 8px); }

/* Кнопка «⋯» и меню действий личного файла */
.files-menu-btn {
    position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-muted);
}
.files-row .files-menu-btn { position: static; flex: 0 0 auto; margin-left: 4px; }
.files-menu-btn:hover { color: var(--text); background: var(--fill); }
.files-menu-btn svg { width: 15px; height: 15px; }
.files-menu {
    position: fixed; z-index: 3000; min-width: 160px; padding: 4px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md, 10px);
    box-shadow: 0 10px 30px rgba(15,19,28,.16); display: flex; flex-direction: column;
}
.files-menu button {
    font: inherit; font-size: 13px; text-align: left; cursor: pointer;
    padding: 8px 12px; border: none; background: transparent; color: var(--text); border-radius: 7px;
}
.files-menu button:hover { background: var(--fill); }
.files-menu button.is-danger { color: var(--status-failed); }

/* ── Модалки «Поделиться» / «Прикрепить к задаче» ──────────────────────────── */
.files-modal-scrim { position: fixed; inset: 0; z-index: 3200; background: rgba(10,12,20,.45);
    display: flex; align-items: center; justify-content: center; padding: 16px; }
.files-modal { width: 100%; max-width: 480px; max-height: 80vh; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 14px);
    box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; }
.files-modal-head { display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--border); gap: 10px; }
.files-modal-head h3 { font-size: 15px; font-weight: 600; color: var(--text); margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-modal-x { font: inherit; font-size: 14px; cursor: pointer; border: none; background: transparent;
    color: var(--text-muted); padding: 4px 8px; border-radius: 6px; flex: 0 0 auto; }
.files-modal-x:hover { background: var(--fill); color: var(--text); }
.files-modal-body { padding: 16px; overflow-y: auto; }
.files-share-add { display: flex; gap: 8px; margin-bottom: 14px; }
.files-share-fio { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md, 8px); padding: 8px 12px; }
.files-share-fio:focus { outline: none; border-color: var(--accent); }
.files-share-list { display: flex; flex-direction: column; gap: 6px; }
.files-share-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: var(--radius-md, 8px); }
.files-share-name { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-share-lvltag { font-size: 11px; color: var(--accent); background: var(--accent-tint); padding: 1px 8px; border-radius: 999px; }
.files-share-revoke { font: inherit; font-size: 12px; cursor: pointer; padding: 4px 10px; border-radius: 6px;
    background: var(--surface); border: 1px solid var(--border); color: var(--status-failed); }
.files-attach-q { width: 100%; box-sizing: border-box; margin-bottom: 12px; }
.files-attach-list { display: flex; flex-direction: column; gap: 6px; }
.files-attach-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
    cursor: pointer; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md, 8px);
    background: var(--surface); font: inherit; width: 100%; box-sizing: border-box; }
.files-attach-row:hover { background: var(--fill); border-color: var(--accent); }
.files-attach-t { font-size: 13px; font-weight: 600; color: var(--text); }
.files-attach-sub { font-size: 11.5px; color: var(--text-muted); }

@media (max-width: 640px) {
    .filesagg { padding: 12px; }
    .files-search { width: 100%; }
    /* На мобильном — только строки (JS форсит list), переключатель прячем. */
    .files-viewtoggle { display: none; }
}

/* «Загрузить» в верхней строке (Stitch) */
/* Размер под остальные контролы строки (селекты/переключатель ~32px). */
.files-upbtn-top {
    display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12.5px; font-weight: 600;
    cursor: pointer; padding: 6px 12px; border-radius: 8px; flex: 0 0 auto; line-height: 1.2;
    background: var(--accent); color: var(--on-accent, #fff); border: 1px solid var(--accent);
}
.files-upbtn-top:hover { background: var(--accent-deep, var(--accent)); }
.files-upbtn-top svg { width: 14px; height: 14px; }
.files-upload-target-label { display: block; margin-bottom: 7px; color: var(--text-muted); font-size: 12px; font-weight: 600; }
.files-upload-target { width: 100%; min-height: 38px; }
.files-upload-target-note { margin: 10px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.files-upload-target-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.files-upload-empty { padding: 22px 12px; }