/* --- folder screen --- */
/* --- сетка папок ------------------------------------------- */
.folder-grid {
  display: grid; gap: var(--folder-gap);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
@media (max-width: 520px) { .folder-grid { grid-template-columns: 1fr 1fr; } }

.folder-card {
  background: var(--bg-raised);
  border: none;
  border-radius: var(--radius-md); padding: var(--sp-4); cursor: pointer;
  min-height: 128px; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  animation: itemIn .4s var(--ease) backwards;
}
.folder-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(44,34,25,.1);
}
.folder-card:active { transform: scale(.97); }
.swatch {
  display: grid;
  place-items: center;
  color: var(--btn-ink);
}
.folder-card .swatch {
  width: 32px; height: 32px; border-radius: 10px; margin-bottom: var(--sp-3);
}
.swatch-compact { margin-bottom: 0; }
.swatch-compact-size { width: 28px; height: 28px; border-radius: 8px; }
.swatch-letter {
  font-weight: 800;
  font-size: 15px;
  color: var(--btn-ink);
}
.swatch-compact.swatch-letter { font-size: 13px; }
.folder-icon-glyph {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
  pointer-events: none;
}
.swatch .folder-icon-glyph {
  filter: brightness(0) invert(1);
  opacity: .95;
}
.swatch-compact .folder-icon-glyph { width: 16px; height: 16px; }
.folder-card h3 {
  margin: 0 0 var(--sp-1); font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display);
}
.folder-card .meta { color: var(--ink-faint); font-size: 13px; margin-top: auto; }
.folder-card .pack-chip { align-self: flex-start; }
.folder-card .due-chip {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
}
@keyframes itemIn { from { opacity: 0; transform: translateY(var(--sp-3)); } }

.add-tile {
  border: 1.5px dashed var(--line); border-radius: var(--radius-md);
  display: grid; place-items: center; min-height: 120px; cursor: pointer;
  color: var(--ink-muted); font-weight: 600; background: none;
  transition: border-color var(--dur), color var(--dur), background var(--dur), transform .16s var(--ease);
  animation: itemIn .4s var(--ease) backwards;
}
.add-tile:hover { border-color: var(--accent); color: var(--accent-text); background: transparent; }
.add-tile:active { transform: scale(.97); }

/* --- список карточек --------------------------------------- */
.card-list { display: flex; flex-direction: column; gap: var(--sp-2); }
/* Виртуальный список (js/lib/virtual-list.js): окно абсолютно позиционируется
   поверх спейсера, задающего полную высоту прокрутки. Без этих правил строки
   рендерятся ПОД спейсером и не видны — паки (>48 карточек) «пропадали». */
.virtual-list { position: relative; }
.virtual-list-spacer { width: 1px; flex: none; pointer-events: none; }
.virtual-list-window {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.virtual-list-window .card-row { animation: none; }
.folder-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center;
  margin-bottom: var(--sp-3);
}
.folder-search {
  flex: 1; min-width: 160px; padding: 10px var(--sp-3);
}
.folder-filter-seg { flex: none; }
.folder-filter-empty { text-align: center; padding: var(--sp-5) 0 var(--sp-2); }
.folder-filter-empty.hidden { display: none; }
.card-row {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4); display: flex; gap: var(--sp-3); align-items: center;
  box-shadow: var(--shadow); cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity .3s;
  animation: itemIn .35s var(--ease) backwards;
}
.card-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card-row .thumb {
  width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none;
  background: var(--bg-sunken);
}
.card-row .texts { flex: 1; min-width: 0; }
.card-row .front { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-row .back { color: var(--ink-soft); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-row .srs-chip {
  flex: none; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 999px;
  background: var(--chip-bg); color: var(--chip-ink);
}
.card-row .srs-chip.due { background: var(--chip-due-bg); color: var(--terra-deep); }
.card-row .srs-chip.new { background: var(--chip-new-bg); color: var(--ok-text); }
.card-row.removing { opacity: 0; transform: translateX(30px); }

/* --- пустая папка: клетка на фоне --------------------------- */
.folder-page.is-empty {
  position: relative; min-height: min(62vh, 520px);
}
.folder-page.is-empty::before {
  content: '';
  position: absolute;
  left: 50%; top: 52%;
  width: min(320px, 78vw); height: min(320px, 78vw);
  transform: translate(-50%, -50%);
  background: url('../../icons/empty cage.svg') center / contain no-repeat;
  opacity: .14;
  pointer-events: none;
  z-index: 0;
}
.folder-page.is-empty > * { position: relative; z-index: 1; }
[data-theme="dark"] .folder-page.is-empty::before { opacity: .1; filter: brightness(1.15); }
/* --- палитра цветов папки ---------------------------------- */
.color-row { display: flex; gap: 9px; flex-wrap: wrap; }
.color-dot {
  width: 40px; height: 40px; border-radius: 999px; cursor: pointer; border: 0;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  position: relative;
  margin: 2px;
}
.color-dot:hover { transform: scale(1.12); }
.color-dot.sel { box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 5px var(--ink); transform: scale(1.08); }

.folder-icon-row { display: flex; flex-wrap: wrap; gap: 8px; }
.folder-icon-pick {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  border: 1.5px solid var(--line);
  background: var(--bg-raised);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 0;
  transition: border-color var(--dur), background var(--dur), color var(--dur), transform .14s var(--ease);
}
.folder-icon-pick:hover { border-color: var(--accent); color: var(--accent); }
.folder-icon-pick.sel {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.folder-icon-pick .folder-icon-glyph {
  width: 22px;
  height: 22px;
  filter: brightness(0);
  opacity: .62;
}
.folder-icon-pick.sel .folder-icon-glyph,
.folder-icon-pick:hover .folder-icon-glyph { opacity: .88; }
.folder-actions { margin-bottom: 18px; display: flex; flex-direction: column; gap: 10px; }
.folder-actions-pair {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch;
}
.folder-actions-pair .btn { flex: 1 1 0; min-width: 0; }
.folder-action-wide { width: 100%; }

@media (max-width: 520px) {
  .folder-actions-pair { flex-wrap: nowrap; }
  .folder-actions-pair .btn {
    font-size: 13px;
    padding: 10px 8px;
    line-height: 1.25;
  }
  .folder-actions-pair .btn svg { width: 15px; height: 15px; }
  .folder-action-wide { font-size: 14.5px; }
}

@media (max-width: 520px) {
  .folder-card,
  .box-card { padding: 12px; min-height: 112px; }
  .folder-card h3,
  .box-card h3 { font-size: 15px; }
  .folder-card .due-chip,
  .box-card .due-chip { top: 10px; right: 10px; font-size: 11px; padding: 2px 7px; }
  .folder-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .folder-search { min-width: 0; width: 100%; }
  .folder-filter-seg { width: 100%; display: flex; }
  .folder-filter-seg button { flex: 1 1 0; }
  .card-row { padding: 12px; gap: 10px; }
  .card-row .thumb { width: 40px; height: 40px; }
  .card-row .back { font-size: 13px; }
  .add-tile,
  .add-tile-box { min-height: 100px; font-size: 14px; }
}