/* Таблицы и фильтры. Файлы стилей подключаются в templates/base.html по порядку. */

/* ===== Таблицы ===== */
.table-card { padding: 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
th {
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--surface-2); }
td.title-cell a { color: var(--text); font-weight: 550; display: inline-flex; align-items: center; gap: 10px; }
td.title-cell a:hover { color: var(--link); }
td.title-cell .icon { color: var(--muted); }
td.title-cell .icon.folder { color: #e0a526; fill: #fdf0cf; }
tr.done td.title-cell a { color: var(--muted); text-decoration: line-through; }

/* ===== Фильтры ===== */
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.filters a {
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
}
.filters a:hover { border-color: var(--border-strong); color: var(--text); }
.filters a.active { background: var(--text); border-color: var(--text); color: #fff; }

/* Колонки раскладки не должны раздвигаться содержимым; широкая таблица прокручивается внутри карточки */
.doc-layout > *, .task-layout > * { min-width: 0; }
.table-card { overflow-x: auto; }

/* ===== Оформление в духе Notion (27.10.2026) — уточняет правила выше ===== */
/* ===== Таблицы: заголовки серым обычным текстом, тонкие линии, без «зебры» ===== */
.table-card { border: none; border-top: 1px solid var(--border); border-radius: 0; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--border); }
th { background: #fff; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
tbody tr:hover { background: var(--surface-2); }
td.title-cell a { font-weight: 500; }
td.title-cell a:hover { color: var(--text); }
.card.table-card { padding: 18px 20px; }  /* таблица в карточке — с отступами, как у остальных карточек */