/*
 * Listas públicas do Tainacan mais legíveis (v1.73.0-beta.15).
 *
 * Escopo: body.tb-list-ui (List_UI, só nas páginas de lista). As cores seguem
 * o destaque do tema (--tainacan-secondary), com reserva. Especificidade: o
 * Tainacan injeta CSS com escopo do Vue depois desta folha; por isso as regras
 * usam :is(#tainacan-items-page, #tb-lists), que vale como um id.
 */
body.tb-list-ui {
    --tb-ui-accent: var(--tainacan-secondary, #1d5fa8);
    --tb-ui-accent-soft: color-mix(in srgb, var(--tb-ui-accent) 10%, #fff);
    --tb-ui-accent-line: color-mix(in srgb, var(--tb-ui-accent) 35%, #fff);
    /* Superfícies e texto a partir das variáveis do tema Tainacan, com reserva. */
    --tb-ui-panel: var(--tainacan-background-color, #fff);
    --tb-ui-surface: color-mix(in srgb, var(--tb-ui-panel) 94%, #1b3a5c);
    --tb-ui-line: var(--tainacan-gray2, #e1e6ec);
    --tb-ui-ink: var(--tainacan-label-color, #16212b);
    --tb-ui-muted: var(--tainacan-info-color, #5a6874);
    --tb-ui-radius: 12px;
    --tb-ui-shadow: 0 1px 2px rgba(16, 32, 48, .05);
}

/* ── Área da lista: fundo de leitura, os cartões brancos se destacam ── */
body.tb-list-ui :is(#tainacan-items-page, #tb-lists).theme-items-list {
    background: var(--tb-ui-surface);
    border-radius: 16px;
    padding: 18px 18px 8px;
    margin-top: 12px;
    margin-bottom: 24px;
}

/* ── Barra de busca e ferramentas ── */
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .search-control {
    background: var(--tb-ui-panel);
    border: 1px solid var(--tb-ui-line);
    border-radius: var(--tb-ui-radius);
    box-shadow: var(--tb-ui-shadow);
    padding: 10px 14px !important;
    margin-bottom: 16px !important;
    align-items: center;
}
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .search-control .search-area input.input {
    height: 42px;
    border: 1.5px solid var(--tb-ui-accent-line) !important;
    border-radius: 999px !important;
    padding-left: 16px !important;
    font-size: 15px;
    background: #fff;
}
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .search-control .search-area input.input:focus {
    border-color: var(--tb-ui-accent) !important;
    box-shadow: 0 0 0 3px var(--tb-ui-accent-soft) !important;
}
/* Só os botões e rótulos da própria barra: o conteúdo das listas suspensas
   (metadados mostrados, ordenação, visualização) segue as cores do Tainacan. */
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .search-control .search-control-item .dropdown-trigger .button,
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .search-control .search-control-item > label,
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .search-control .search-control-item > .label {
    color: var(--tb-ui-ink) !important;
    font-weight: 600;
}
/* Item marcado/ativo e botão de ação dentro das listas suspensas: texto claro sobre o fundo de cor. */
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .dropdown-menu .dropdown-item.is-active,
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .dropdown-menu .dropdown-item.is-active *,
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .dropdown-menu .button.is-success,
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .dropdown-menu .button.is-primary,
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .dropdown-menu .button.is-secondary {
    color: #fff !important;
}

/* ── Coluna de filtros (facetas), na largura de desktop ── */
@media (min-width: 769px) {
    body.tb-list-ui :is(#tainacan-items-page, #tb-lists):not(.is-fullscreen).is-filters-menu-open .filters-menu {
        background: var(--tb-ui-panel) !important;
        border: 1px solid var(--tb-ui-line);
        border-radius: var(--tb-ui-radius);
        box-shadow: var(--tb-ui-shadow);
        padding: 16px 14px 12px !important;
        margin-right: 18px;
        align-self: flex-start;
    }
}
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) #filters-label-landmark {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--tb-ui-ink) !important;
    margin: 0 0 4px !important;
}
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) #filters-items-list .collapse-all {
    font-size: 13px !important;
    color: var(--tb-ui-muted) !important;
}
/* Cada faceta é um grupo separado, com título forte. */
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-item-forms {
    border-top: 1px solid var(--tb-ui-line);
    padding: 12px 0 10px !important;
    margin: 0 !important;
}
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-item-forms .collapse-trigger .label {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--tb-ui-ink) !important;
    padding: 2px 0 !important;
}
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-item-forms .collapse-content {
    margin-top: 8px;
}
/* Opção inteira clicável: linha com realce, nome à esquerda, contagem à direita. */
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-options-wrap .metadatum {
    margin: 0 !important;
}
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-options-wrap label.b-checkbox {
    display: flex !important;
    align-items: flex-start;
    width: 100%;
    margin: 0 !important;
    padding: 5px 6px !important;
    border-radius: 8px;
    font-size: 14px !important;
    line-height: 1.35;
    color: var(--tb-ui-ink);
    cursor: pointer;
    transition: background-color .12s ease;
}
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-options-wrap label.b-checkbox:hover {
    background: var(--tb-ui-accent-soft);
}
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-options-wrap label.b-checkbox .control-label {
    display: flex !important;
    flex: 1 1 auto;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    padding-left: 8px !important;
}
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-options-wrap .checkbox-label-text {
    font-size: 13.5px !important;
    line-height: 1.35 !important;
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-transform: none;
}
/* Contagem à direita, discreta e alinhada em coluna (o texto " (12)" é do Tainacan). */
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-options-wrap .facet-item-count {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--tb-ui-muted) !important;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* Marcado: realce e negrito. */
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-options-wrap label.b-checkbox:has(input:checked) {
    background: var(--tb-ui-accent-soft);
}
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-options-wrap label.b-checkbox:has(input:checked) .checkbox-label-text {
    font-weight: 700;
    color: var(--tb-ui-accent);
}
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-options-wrap label.b-checkbox:has(input:checked) .facet-item-count {
    color: var(--tb-ui-accent) !important;
}
/* "Ver todos" como botão, não como texto solto. */
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-item-forms a.add-link,
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-item-forms .view-all-button,
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-item-forms button.link-style {
    display: inline-block !important;
    margin: 8px 0 0 4px !important;
    padding: 3px 12px !important;
    border: 1px solid var(--tb-ui-accent-line) !important;
    border-radius: 999px !important;
    color: var(--tb-ui-accent) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: var(--tb-ui-panel) !important;
}
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-item-forms a.add-link:hover,
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-item-forms .view-all-button:hover,
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-item-forms button.link-style:hover {
    background: var(--tb-ui-accent-soft);
}
/* Campos de busca dentro das facetas (autocompletar). */
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-item-forms input.input {
    border-radius: 8px !important;
    border-color: var(--tb-ui-line) !important;
}

/* ── Quantos itens e quais filtros estão valendo ── */
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-tags-list {
    background: var(--tb-ui-panel);
    border: 1px solid var(--tb-ui-line);
    border-left: 4px solid var(--tb-ui-accent);
    border-radius: var(--tb-ui-radius);
    box-shadow: var(--tb-ui-shadow);
    padding: 10px 14px !important;
    margin-bottom: 16px !important;
    align-items: center;
}
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-tags-list .filter-tags-info {
    font-size: 14px !important;
    color: var(--tb-ui-ink) !important;
}
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-tags-list .filter-tags-info a {
    font-weight: 600;
    color: var(--tb-ui-accent) !important;
    text-decoration: underline;
}
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-tags-list li.filter-tag {
    background: var(--tb-ui-accent-soft) !important;
    border: 1px solid var(--tb-ui-accent-line) !important;
    border-radius: 10px !important;
    color: var(--tb-ui-ink) !important;
    padding: 4px 12px !important;
}
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-tags-list li.filter-tag .filter-tag-metadatum-name {
    font-size: 11.5px !important;
    color: var(--tb-ui-muted) !important;
}
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .filter-tags-list li.filter-tag .filter-tag-metadatum-value {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--tb-ui-accent) !important;
}

/* ── Paginação ── */
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .pagination-area {
    background: var(--tb-ui-panel);
    border: 1px solid var(--tb-ui-line) !important;
    border-radius: var(--tb-ui-radius);
    box-shadow: var(--tb-ui-shadow);
    padding: 10px 16px !important;
    margin: 18px 0 10px !important;
    color: var(--tb-ui-ink);
}
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .pagination-area .pagination-link,
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .pagination-area .pagination-previous,
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .pagination-area .pagination-next {
    min-width: 36px;
    height: 36px;
    border-radius: 999px !important;
    border: 1px solid var(--tb-ui-line) !important;
    color: var(--tb-ui-ink) !important;
    font-weight: 600;
    background: #fff;
}
body.tb-list-ui :is(#tainacan-items-page, #tb-lists) .pagination-area .pagination-link.is-current {
    background: var(--tb-ui-accent) !important;
    border-color: var(--tb-ui-accent) !important;
    color: #fff !important;
}

/* ── Cabeçalho da página de termo: "Voltar" visível ── */
body.tb-list-ui .page-header-content-title {
    align-items: center;
    gap: 16px;
}
body.tb-list-ui .page-header-content-title .page-header-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 7px 16px;
    border: 1.5px solid var(--tb-ui-accent);
    border-radius: 999px;
    color: var(--tb-ui-accent) !important;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color .12s ease, color .12s ease;
}
body.tb-list-ui .page-header-content-title .page-header-back::before {
    content: "\2190";
    font-size: 16px;
    line-height: 1;
}
body.tb-list-ui .page-header-content-title .page-header-back:hover,
body.tb-list-ui .page-header-content-title .page-header-back:focus-visible {
    background: var(--tb-ui-accent);
    color: #fff !important;
}

@media (max-width: 768px) {
    body.tb-list-ui :is(#tainacan-items-page, #tb-lists).theme-items-list {
        padding: 10px 10px 4px;
        border-radius: 12px;
    }
    body.tb-list-ui .page-header-content-title {
        flex-wrap: wrap;
    }
}