/**
 * D&D Favorites — UI styles
 * Використовує тільки токени з style.css теми (--text-*, --bg-*, --bd-border, --accent тощо).
 */

/* ── Кнопка-серце на single-сторінці ─────────────────────────── */
/* Нащадок .btn з теми. Тут лише поведінка активного стану. */

.fav-toggle .fav-toggle__icon {
    transition: fill .15s ease, stroke .15s ease;
}

.fav-toggle.is-active {
    color: var(--text-main);
}

.fav-toggle.is-active .fav-toggle__icon {
    fill: oklch(0.59 0.21 20.49);
    stroke: oklch(0.59 0.21 20.49);
}


.fav-toggle:not(.is-active) .fav-toggle__icon {
    fill: none;
}


/* ── Сторінка обраного: header ───────────────────────────────── */

.favorites-page {
    width: 100%;
    padding: 0;
}

.favorites-page .list-head{
    margin-top: 15px;
}

.favorites-page .active-filters-bar {
    display: none;
}

.favorites-header {
    display: flex;
    align-items: center;
    gap: 16px;
    gap: 16px;
    padding: 24px 24px 8px;
}

.favorites-title {
    font-family: var(--font-serif);
    font-size: 28px;
    margin: 0;
    color: var(--text-main);
}

.favorites-total {
    color: var(--text-muted);
    font-size: 13px;
    background: var(--bg-block);
    border: 1px solid var(--bd-border);
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-variant-numeric: tabular-nums;
}


/* ── Табы ────────────────────────────────────────────────────── */

.favorites-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 16px 24px 0;
    overflow-y: auto;
    border-bottom: 1px solid var(--bd-border);
}

.favorites-tab {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-main);
    padding: 8px 14px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.favorites-tab:hover {
    color: var(--text-main);
    background: var(--bg-hover);
}

.favorites-tab.is-active {
    color: var(--text-main);
    background: var(--bg-block-grey);
    border-color: var(--bd-border);
    border-bottom-color: var(--bg-block); /* зливаємось з фоном панелі під tab-row */
}

.favorites-tab__label {
    line-height: 1;
}

.favorites-tab__count {
    display: inline-block;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--bg-block-grey);
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
    line-height: 16px;
    font-variant-numeric: tabular-nums;
}

.favorites-tab.is-active .favorites-tab__count {
    background: var(--accent-bg);
    color: var(--accent);
}

.favorites-tab.is-empty {
    opacity: 0.5;
}

.favorites-tab.is-empty:hover {
    opacity: 0.85;
}


/* ── Контент ─────────────────────────────────────────────────── */

.favorites-content {
    min-height: 60vh;
    position: relative;
}

body.is-split-mode .main-content #detail-pane ,
body.is-catalog-mode .main-content #catalog-pane{
    height: 100vh;
}

.favorites-content .list {
    max-height: 100vh;
}




/* ── Дашборд "Усі" ───────────────────────────────────────────── */

.favorites-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    padding: 24px;
}

.favorites-dashboard__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border: 1px solid var(--bd-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-main);
    background: var(--bg-block);
    box-shadow: var(--shadow-card);
    transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}

.favorites-dashboard__card:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}

.favorites-dashboard__card:active {
    transform: scale(.98);
}

.favorites-dashboard__card.is-empty {
    opacity: 0.45;
}

.favorites-dashboard__card.is-empty:hover {
    opacity: 0.7;
    border-color: var(--bd-border);
}

.favorites-dashboard__label {
    font-size: 14px;
    color: var(--text-main);
}

.favorites-dashboard__count {
    display: inline-block;
    min-width: 28px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.favorites-dashboard__card.is-empty .favorites-dashboard__count {
    background: var(--bg-block-grey);
    color: var(--text-muted);
}

.favorites-dashboard__loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px;
    color: var(--text-muted);
}


/* ── Empty / Loading / Error всередині favorites ─────────────── */

.favorites-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    color: var(--text-muted);
    font-size: 14px;
}

.favorites-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    color: var(--text-muted);
    text-align: center;
    gap: 12px;
}

.favorites-empty__title {
    font-family: var(--font-serif);
    font-size: 18px;
    color: var(--text-main);
    margin: 0;
}

.favorites-empty__hint {
    font-size: 13px;
    max-width: 480px;
    line-height: 1.6;
}

.favorites-error {
    padding: 24px;
    color: var(--r-artifact);
    text-align: center;
}


/* ── Catalog inside /favorites/ ──────────────────────────────── */
/* Прибираємо подвійний відступ — main вже всередині шорткоду */

.favorites-content > .main-content {
    padding: 0;
}

.favorites-content .catalog-empty {
    padding: 64px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}


/* ── Mobile ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .favorites-header { padding: 16px; }
    .favorites-tabs   { padding: 10px 16px 0; gap: 4px; }
    .favorites-title  { font-size: 22px; }
    .favorites-tab    { padding: 6px 10px; font-size: 12px; }
    .favorites-dashboard { padding: 16px; gap: 8px; }
}

/* ── Серце-індикатор обраного на картках ─────────────────────── */
/*
 * Місце розміщення в DOM:
 *   1) Якщо в карточці є .card-stats — серце вставляється туди (пліч-о-пліч з бейджем джерела).
 *      У такому разі позиція inline, push to right через margin-left:auto.
 *   2) Інакше — серце вставляється прямим нащадком карточки і позиціонується абсолютно
 *      у правому верхньому куті.
 *   3) У сайдбарі (.row) — те саме що випадок 2, але дрібніше.
 */

/* Базовий вигляд серця */
.card-fav-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: oklch(0.59 0.21 20.49);
    pointer-events: none;
    line-height: 0;
    opacity: 0.85;
}

.card-fav-mark svg {
    display: block;
    width: 14px;
    height: 14px;
}

/* Випадок 1 — серце всередині .card-stats (inline, праворуч від бейджа) */
.card-stats {
    /* Гарантуємо, що бейдж буде ліворуч, а серце — праворуч */
    align-items: center;
}

.card-stats .card-fav-mark {
    margin-left: auto;
    width: 16px;
    height: 16px;
}

.card-stats .card-fav-mark svg {
    width: 14px;
    height: 14px;
}

/* Випадок 2 — fallback (нема .card-stats), серце як абсолютний оверлей у правому верхньому куті */
.notion-card[data-slug] {
    position: relative;
}

.notion-card[data-slug] > .card-fav-mark {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    z-index: 1;
}

.notion-card[data-slug] > .card-fav-mark svg {
    width: 14px;
    height: 14px;
}

/* Випадок 3 — sidebar .row */
.row[data-slug] {
    position: relative;
}

.row[data-slug] > .card-fav-mark {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 12px;
    height: 12px;
}

.row[data-slug] > .card-fav-mark svg {
    width: 11px;
    height: 11px;
}


/* ── Rail button (favorites) у бічному меню ──────────────────── */

.rail-btn-favorites {
    position: relative;
    color: var(--text-soft);
    transition: color .15s ease;
}

.rail-btn-favorites:hover {
    color: var(--text-main);
}

/* Базовий стан — порожнє серце (контур) */
.rail-btn-favorites__icon {
    fill: none;
    transition: fill .2s ease;
}

/* Активний стан — є хоча б одна обрана сутність */
.rail-btn-favorites.has-items {
    color: var(--r-artifact);
}

/* Активний стан — є хоча б одна обрана сутність */
.rail .rail-btn-favorites.has-items {
    color: var(--bd-soft);
}

.rail-btn-favorites.has-items .rail-btn-favorites__icon {
    fill: var(--bg-sidebar);
}

/* Лічильник (badge) у правому верхньому куті */
.rail-btn-favorites__count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--text-main);
    color: var(--bg-sidebar);
    font-size: 8px;
    font-weight: 600;
    line-height: 16px;
    border-radius: 999px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}




/* ── list-head у favorites: компактний (без list-title-row) ──── */
/* На сторінці /favorites/ ми прибираємо великий заголовок —
   шорткод використовує клас .list-head--compact щоб зменшити паддинги. */

.list-head--compact {
    padding-top: 0 !important;
    padding-bottom: 8px !important;
}