/* Páginas de listagem do repositório: só o layout próprio.
   Cores, tipografia e componentes vêm do painel (tokens.css + app.css). */

.repo-top {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem max(var(--spacing-md), calc((100vw - 1200px) / 2));
    background: var(--header-bg);
    border-bottom: 1px solid var(--border-subtle);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.repo-top .brand img { width: 38px; height: 38px; }
.logo-light { display: none; }
:root[data-theme="light"] .logo-dark { display: none; }
:root[data-theme="light"] .logo-light { display: block; }

.repo-main { max-width: 1200px; margin-inline: auto; }

.crumbs { display: flex; flex-wrap: wrap; gap: .45rem; font-size: var(--font-size-sm); color: var(--text-muted); }
.crumbs a { color: var(--text-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--text-blue); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text-primary); font-weight: 600; }

.repo-stats { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.repo-stats b { color: var(--text-primary); }

.usage pre { margin: 0; white-space: pre; overflow-x: auto; }
.usage .card-head { align-items: flex-start; }

.repo-filter { padding-bottom: var(--spacing-sm); }
.repo-filter .search-wrap { max-width: 420px; }

.col-icon { width: 44px; padding-right: 0; }
.col-icon svg { width: 18px; height: 18px; vertical-align: middle; }
.kind-folder { color: var(--text-blue); }
.kind-package { color: #d9b27c; }
:root[data-theme="light"] .kind-package { color: #8a6236; }
.kind-db { color: var(--text-purple); }
.kind-up, .kind-file, .kind-disc { color: var(--text-muted); }

.table .file a { color: var(--text-blue); white-space: nowrap; }
.table tr[hidden] { display: none; }

.sort {
    font: inherit; color: inherit; background: none; border: none; cursor: pointer;
    text-transform: inherit; letter-spacing: inherit; padding: 0;
}
.sort::after { content: ""; margin-left: .3rem; }
.sort[aria-sort="ascending"]::after { content: "▲"; }
.sort[aria-sort="descending"]::after { content: "▼"; }

.empty { padding: var(--spacing-lg); text-align: center; color: var(--text-secondary); }

@media (max-width: 640px) {
    .repo-top { padding: .7rem var(--spacing-sm); }
    .brand-sub { display: none; }
}

/* ---------- Colunas (estilo packages.cachyos.org) ---------- */
.repo-filter { flex-wrap: wrap; }
.repo-filter select.input { min-width: 180px; }
.col-files { width: 1%; white-space: nowrap; text-align: right; }
.file-link {
    display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm);
    color: var(--text-secondary); text-decoration: none;
}
.file-link:hover { background: var(--surface-hover); color: var(--text-blue); text-decoration: none; }
.file-link svg { width: 16px; height: 16px; }
a.badge { text-decoration: none; }
a.badge:hover { text-decoration: underline; }
.repo-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.repo-card-link { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; color: var(--text-primary); text-decoration: none; }
.repo-card-link:hover { border-color: var(--border-light); text-decoration: none; }
.repo-card-link b { display: block; font-size: var(--font-size-lg); }
.repo-card-link svg { width: 26px; height: 26px; }
@media (max-width: 860px) {
    .repo-filter select.input { min-width: 0; flex: 1; }
}
.table td.mono { white-space: nowrap; }
@media (max-width: 640px) {
    .repo-filter .search-wrap { flex: 1 1 100%; max-width: none; }
    .repo-filter select.input { flex: 1 1 40%; }
    .repo-filter [data-count] { flex: 1 1 100%; text-align: right; }
}
.top-actions { display: flex; align-items: center; gap: .6rem; }
.lang-select { padding: .35rem 2rem .35rem .8rem; font-size: var(--font-size-xs); min-width: 0; }
.stat-item b { color: var(--text-primary); }
@media (max-width: 640px) { .lang-select { max-width: 110px; } }