/* ============================================================
   FILESTORE — дерево паперів
   ============================================================
   Один вигляд на два місця: окремий екран «Документи» і вкладка
   документів на картці закладу чи контрагента. Якщо правити тут —
   міняється в обох, і вони не розʼїжджаються.
   ============================================================ */
/* Шлях замість заголовка: людина завжди бачить, де вона стоїть. */
.fs-path { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: var(--s-4); min-height: 30px; }
.fs-path a, .fs-path .current { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: -0.01em; line-height: 1.2; }
.fs-path a { color: var(--text-secondary); text-decoration: none; }
.fs-path a:hover { color: var(--text-primary); text-decoration: underline; }
.fs-path .current { color: var(--text-primary); }
.fs-path .sep { color: var(--text-tertiary); font-size: var(--text-lg); }

/* Верхній рядок не переноситься ніколи: те, що не влазить, живе в
   поповері «Фільтри», а не другим рядком. */
.fs-bar { position: relative; }
.fs-bar .v2-toolbar { flex-wrap: nowrap; overflow: visible; }
.fs-bar .v2-savedviews { padding: 0; gap: var(--s-2); flex: 0 0 auto; }
.fs-search { flex: 1 1 auto; min-width: 120px; max-width: 280px; }
.fs-spacer { flex: 1 1 auto; min-width: 0; }
.fs-bar .v2-btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 900px) {
    .fs-bar .v2-btn-text { display: none; }
}

.fs-selection { justify-content: flex-start; }
.fs-selection .fs-count { font-weight: var(--weight-semibold); flex: 0 0 auto; }

.fs-tbl td { vertical-align: middle; }
.fs-tbl .fs-pick { width: 34px; text-align: center; }
.fs-tbl .fs-act { width: 96px; }
.fs-name { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; text-decoration: none; color: var(--text-primary); }
.fs-name:hover { text-decoration: underline; }
.fs-name .v2-i { flex: 0 0 auto; color: var(--text-tertiary); }
.fs-name.is-folder { font-weight: var(--weight-medium); }
.fs-name.is-folder .v2-i { color: var(--accent-primary, var(--text-secondary)); }
.fs-where { display: block; font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
.fs-muted { color: var(--text-secondary); }
.fs-due { color: var(--danger); font-weight: var(--weight-semibold); }
.fs-soon { color: var(--warning); font-weight: var(--weight-medium); }
.fs-chip { display: inline-block; font-size: var(--text-xs); padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border-light); color: var(--text-secondary); margin-left: 6px; }

/* Деталі — під рядком, а не окремою сторінкою. */
.fs-details td { background: var(--bg-subtle, rgba(0,0,0,0.02)); padding: var(--s-3) var(--s-4); }
.fs-facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.fs-fact { font-size: var(--text-sm); }
.fs-fact b { display: block; font-size: var(--text-xs); color: var(--text-tertiary); font-weight: var(--weight-medium); }
.fs-details-acts { margin-top: var(--s-3); display: flex; gap: var(--s-2); flex-wrap: wrap; }

.fs-rename { display: flex; gap: var(--s-2); align-items: center; }
.fs-rename input { max-width: 340px; }

tr.is-drag-over td { box-shadow: inset 0 0 0 2px var(--accent-primary, var(--border-strong)); }
/* Крихта шляху — така сама ціль, як папка в переліку: підсвічуємо однаково. */
.fs-path a.is-drag-over { box-shadow: inset 0 0 0 2px var(--accent-primary, var(--border-strong)); border-radius: var(--r-sm); text-decoration: none; }
#fsDrop.is-drop { outline: 2px dashed var(--accent-primary, var(--border-strong)); outline-offset: -4px; }

/* Перегляд файлу просто в рядку: аркуш видно, качати не треба. */
.fs-preview { margin-top: var(--s-3); }
.fs-preview iframe { width: 100%; height: 520px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--bg-card); }
.fs-preview img { max-width: 100%; max-height: 520px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.fs-hint { color: var(--text-tertiary); font-size: var(--text-xs); margin-top: var(--s-2); }

/* ── Тулбар зрощений із таблицею ──────────────────────────────────────────
   Домашнє правило `-attached` працює лише для сусідніх елементів, а тут
   тулбар лежить у .fs-bar, а таблиця — у формі масових дій. Тому вони
   ніколи не зросталися і між ними зяяла щілина. Зрощуємо явно. */
.fs-bar .v2-toolbar-attached {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}
/* Прив'язка за ідентифікатором, а не сусідством: між тулбаром і таблицею
   лежать форми нової папки та завантаження, тож будь-який сусідній селектор
   тут мовчки не спрацьовує — рівно те, на чому спіткнулось домашнє правило. */
#fsDrop {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
    border-top-color: var(--rule-soft, var(--border-light));
}

/* ── Зірочка ──────────────────────────────────────────────────────────────
   Не кнопка з рамкою: у рядку вона має читатись як позначка, а не як ще
   один орган керування. */
.fs-star {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 15px;
    line-height: 1;
    color: var(--text-tertiary);
    border-radius: 4px;
}
.fs-star:hover { color: var(--warning); background: var(--bg-subtle, rgba(0,0,0,.04)); }
/* Поставлена зірочка видна завжди — інакше позначка не позначає нічого.
   Порожня зʼявляється під курсором, як на Диску. Тримати її всередині
   .v2-row-actions не можна: та група має opacity 0 до наведення, а дитина
   не буває непрозорішою за батька. */
.fs-star { opacity: 0; transition: opacity .12s ease; }
.fs-star.is-on { color: var(--warning); opacity: 1; }
tr:hover .fs-star,
.fs-star:focus-visible { opacity: 1; }
.fs-act { white-space: nowrap; }
.fs-star:focus-visible { outline: 2px solid var(--accent-primary, var(--border-strong)); outline-offset: 1px; }

/* ── Видима зона перетягування ────────────────────────────────────────────
   Кидати файли в перелік було можна й раніше, але про це ніхто не здогадувався:
   підказка зʼявлялась тільки під час самого перетягування. */
.fs-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 14px;
    border-top: 1px dashed var(--border-light);
    color: var(--text-tertiary);
    font-size: var(--text-sm);
}
.fs-dropzone .v2-i { color: var(--text-tertiary); }
#fsDrop.is-drop .fs-dropzone {
    color: var(--accent-primary, var(--text-primary));
    border-top-color: var(--accent-primary, var(--border-strong));
}