/* ══════════════════════════════════════════════════════════════════════
   LISTAS.CSS — listas de ranking sobre fundo escuro do Observatório
   Agroalimentar dos Açores: linhas com nome + barra de proporção + valor
   + % + variação, com suporte a grupo "Outras" expansível/colapsável.
   Usado por ex. na lista de Raças (Setor da Carne), mas serve qualquer
   ranking do mesmo tipo (item vs total, ordenado, com cauda longa).

   Como aplicar numa página:
     <link rel="stylesheet" href="listas.css">

   ── Estrutura HTML esperada ─────────────────────────────────────────
     <div class="rank-list">
         <div class="rank-hdr">
             <span>Nome</span><span></span>
             <span class="rank-col-num">Valor</span>
             <span class="rank-col-num">%</span>
             <span class="rank-col-num">Var.</span>
         </div>

         <!-- linha normal (clicável, ex. abre detalhe) -->
         <div class="rank-row filterable" onclick="...">
             <span class="rank-name">Nome do item</span>
             <span class="rank-bar-track"><span class="rank-bar-fill" style="width:42%"></span></span>
             <span class="rank-col-num rank-val">1 234</span>
             <span class="rank-col-num rank-pct">42,0%</span>
             <span class="rank-col-num rank-var var-up">+3,2%</span>
         </div>

         <!-- grupo colapsável "Outras" — cabeçalho + linhas filhas indentadas -->
         <div class="rank-row rank-group-hdr" onclick="toggleGroup('g1')">
             <span class="rank-group-label">
                 <span class="rank-group-toggle" id="g1-btn">+</span>
                 Outras (12)
             </span>
             <span class="rank-bar-track"><span class="rank-bar-fill" style="width:8%"></span></span>
             <span class="rank-col-num rank-val">340</span>
             <span class="rank-col-num rank-pct">8,0%</span>
             <span class="rank-col-num rank-var var-zero">—</span>
         </div>
         <div id="g1" style="display:none;">
             <div class="rank-row rank-subrow filterable">...</div>
         </div>
     </div>

   A barra (.rank-bar-fill) usa por omissão a cor de destaque dourada;
   para tingir por categoria (ex. aptidão Carne/Leite da raça), aplicar
   a cor via `style="background:var(--cor-da-categoria)"` inline no
   elemento — a classe só define forma/posição, nunca a cor de dados.

   ── Variação (var-up / var-down / var-zero) ─────────────────────────
   Mesma convenção usada nos KPI cards do projeto (fundo escuro): verde
   para subida, vermelho para descida, cinza para nula/indisponível.
   ══════════════════════════════════════════════════════════════════════ */

.rank-list {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    overflow: hidden;
}

.rank-hdr {
    display: grid;
    grid-template-columns: var(--rank-grid, 1fr 1fr 60px 48px 54px);
    gap: 0 8px;
    padding: 5px 10px;
    font-family: Lato, sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,.35);
    letter-spacing: .8px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.rank-row {
    display: grid;
    grid-template-columns: var(--rank-grid, 1fr 1fr 60px 48px 54px);
    gap: 0 8px;
    align-items: center;
    padding: 6px 10px;
    font-family: Lato, sans-serif;
    font-size: 12px;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.rank-row:last-child { border-bottom: none; }

.rank-name {
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rank-subrow { padding-left: 22px; opacity: .88; }
.rank-subrow .rank-name { color: rgba(255,255,255,.78); }

.rank-bar-track {
    position: relative;
    height: 5px;
    background: rgba(255,255,255,.08);
    border-radius: 3px;
    overflow: hidden;
    align-self: center;
}
.rank-bar-fill {
    position: absolute;
    left: 0; top: 0; height: 100%;
    background: var(--filtro-accent, #E1C233);
    border-radius: 3px;
    opacity: .85;
    transition: width .3s;
}
.rank-subrow .rank-bar-fill,
.rank-group-hdr .rank-bar-fill { opacity: .5; }

.rank-col-num { text-align: right; }
.rank-val { color: rgba(255,255,255,.85); }
.rank-pct { color: var(--filtro-accent, #E1C233); font-weight: 600; }
.rank-var { font-size: 11px; font-weight: 700; }
.rank-var.var-up   { color: #2ecc71; }
.rank-var.var-down { color: #e74c3c; }
.rank-var.var-zero { color: rgba(255,255,255,.25); }

/* ── Grupo "Outras" — cabeçalho colapsável ── */
.rank-group-hdr { background: rgba(255,255,255,.025); cursor: pointer; }
.rank-group-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.6);
    font-style: italic;
}
.rank-group-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: rgba(255,255,255,.1);
    font-size: 11px;
    font-weight: 700;
    color: white;
    font-style: normal;
    transition: transform .2s;
    flex-shrink: 0;
}
.rank-group-hdr .rank-val  { color: rgba(255,255,255,.5); }
.rank-group-hdr .rank-pct  { color: rgba(255,255,255,.4); }

@media (max-width: 900px) {
    .rank-hdr, .rank-row { grid-template-columns: var(--rank-grid-mobile, minmax(0,1fr) 54px 40px) !important; font-size: 10px; }
    .rank-bar-track { display: none; }
}

/* ── Variante clara — .rank-list usado dentro de um .chart-card (graficos.css),
   ex. o cartão "inverted" (padrão do 2º gráfico/barras: fundo azul claro,
   cabeçalho dourado). As regras abaixo sobrepõem-se automaticamente por
   especificidade de selector — não é preciso trocar de classe, só colocar
   o .rank-list dentro do .chart-card-body. Os tokens de variação (var-up/
   down/zero) passam a usar as cores de graficos.css para fundo claro
   (--chart-value-positive/negative/neutral) em vez do verde/vermelho dos
   KPI cards escuros. ── */
.chart-card .rank-list { background: transparent; border: none; border-radius: 0; }
.chart-card .rank-hdr { color: rgba(35,47,93,.5); border-bottom-color: rgba(35,47,93,.15); }
.chart-card .rank-row { border-bottom-color: rgba(35,47,93,.08); }
.chart-card .rank-name { color: var(--chart-axis, #232F5D); }
.chart-card .rank-subrow .rank-name { color: rgba(35,47,93,.65); }
.chart-card .rank-bar-track { background: rgba(35,47,93,.1); }
.chart-card .rank-val { color: var(--chart-axis, #232F5D); }
.chart-card .rank-group-hdr { background: rgba(35,47,93,.03); }
.chart-card .rank-group-label { color: rgba(35,47,93,.55); }
.chart-card .rank-group-toggle { background: rgba(35,47,93,.1); color: #232F5D; }
.chart-card .rank-group-hdr .rank-val { color: rgba(35,47,93,.4); }
.chart-card .rank-group-hdr .rank-pct { color: rgba(35,47,93,.35); }
.chart-card .rank-var.var-up   { color: var(--chart-value-positive, #185FA5); }
.chart-card .rank-var.var-down { color: var(--chart-value-negative, #791F1F); }
.chart-card .rank-var.var-zero { color: var(--chart-value-neutral, #5a6b8c); }

/* ── Variante "cartão" — .rank-list usado dentro de um .card-info
   (cartoes.css), ex. os painéis de "Indicadores por Dimensão". Mesma
   paleta dos cartões de informação: fundo azul claro do cartão, texto
   navy sólido, barra/percentagem em azul de destaque (#6190B5) — em vez
   do verde/vermelho dos KPI cards escuros ou do navy do .chart-card. ── */
.card-info .rank-list { background: transparent; border: none; border-radius: 0; }
.card-info .rank-hdr { color: rgba(26,37,72,.5); border-bottom-color: rgba(26,37,72,.15); }
.card-info .rank-row { border-bottom-color: rgba(26,37,72,.08); }
.card-info .rank-name { color: #1a2548; font-weight: 600; }
.card-info .rank-subrow .rank-name { color: rgba(26,37,72,.65); }
.card-info .rank-bar-track { background: rgba(97,144,181,.18); }
.card-info .rank-bar-fill { background: #6190B5; }
.card-info .rank-val { color: #1a2548; }
.card-info .rank-pct { color: #6190B5; }
.card-info .rank-group-hdr { background: rgba(26,37,72,.03); }
.card-info .rank-group-label { color: rgba(26,37,72,.55); }
.card-info .rank-group-toggle { background: rgba(26,37,72,.1); color: #1a2548; }
.card-info .rank-group-hdr .rank-val { color: rgba(26,37,72,.4); }
.card-info .rank-group-hdr .rank-pct { color: rgba(26,37,72,.35); }
.card-info .rank-var.var-up   { color: var(--chart-value-positive, #185FA5); }
.card-info .rank-var.var-down { color: var(--chart-value-negative, #791F1F); }
.card-info .rank-var.var-zero { color: var(--chart-value-neutral, #5a6b8c); }