<?php
/**
 * Depto de Engenharia e Automacao - Master Automacao - Autor: Derlivon Silva
 * (parte do Premium Express BI - Fire Sistemas)
 */
$actionUrl = '/auditoria/liberacoes-caixa';
?>
<script src="/assets/js/echarts.min.js?v=<?= \App\Core\Versao::ATUAL ?>"></script>
<div class="pbi-page-header">
    <div class="pbi-page-icon"><i class="bi bi-key"></i></div>
    <div>
        <div class="pbi-page-title">Liberações de Caixa</div>
        <div class="pbi-page-subtitle" id="lib-periodo-label"><?= htmlspecialchars($dataIni) ?> a <?= htmlspecialchars($dataFim) ?></div>
    </div>
    <div class="ms-auto d-flex gap-2 align-items-center">
        <button id="btnLibAtualizar" class="btn btn-sm btn-outline-secondary" title="Atualizar"><i class="bi bi-arrow-clockwise"></i></button>
        <a href="/auditoria" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>Voltar</a>
    </div>
</div>

<div class="pbi-hint mb-3" style="margin-top:0">
    <i class="bi bi-info-circle me-1"></i>
    Toda vez que o caixa precisou de autorização do supervisor — pagamento bloqueado, desconto acima do permitido, cliente com fatura atrasada ou sem limite de crédito.
    Volume alto pode indicar limites mal configurados ou comportamento a investigar.
</div>

<!-- Filtro de período e tipo -->
<div class="pbi-card mb-3">
    <div class="p-3 d-flex flex-wrap gap-3 align-items-center">
        <div class="d-flex flex-wrap gap-2 align-items-center">
            <span class="text-muted small me-1"><i class="bi bi-calendar3 me-1"></i>Período:</span>
            <?php $base = '?' . ($tipo !== null ? "tipo={$tipo}&" : ''); ?>
            <a href="<?= $base ?>p=hoje"   class="pbi-ano-btn <?= $periodo==='hoje'?'active':'' ?>">Hoje</a>
            <a href="<?= $base ?>p=semana" class="pbi-ano-btn <?= $periodo==='semana'?'active':'' ?>">7 dias</a>
            <a href="<?= $base ?>p=mes"    class="pbi-ano-btn <?= $periodo==='mes'?'active':'' ?>">Mês</a>
            <a href="<?= $base ?>p=ano"    class="pbi-ano-btn <?= $periodo==='ano'?'active':'' ?>">Ano</a>
        </div>
        <div class="d-flex flex-wrap gap-2 align-items-center">
            <span class="text-muted small me-1"><i class="bi bi-funnel me-1"></i>Tipo:</span>
            <?php $qs = "?p={$periodo}"; ?>
            <a href="<?= $qs ?>"          class="pbi-ano-btn <?= $tipo===null?'active':'' ?>">Todos</a>
            <?php foreach ($tipos as $t => $info): ?>
            <a href="<?= $qs ?>&tipo=<?= $t ?>" class="pbi-ano-btn <?= $tipo===$t?'active':'' ?>" style="<?= $tipo===$t?'border-color:'.$info['cor'].';color:'.$info['cor']:'' ?>">
                <i class="bi <?= $info['icon'] ?> me-1"></i><?= htmlspecialchars($info['nome']) ?>
            </a>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<!-- KPIs -->
<div class="row g-3 mb-3">
    <div class="col-6 col-md-3">
        <div class="pbi-kpi-card">
            <div class="pbi-kpi-label"><i class="bi bi-key me-1"></i>Total Liberações</div>
            <div class="pbi-kpi-valor text-accent pbi-skeleton" id="lib-kpi-tot" style="height:1.6rem;border-radius:4px">&nbsp;</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="pbi-kpi-card">
            <div class="pbi-kpi-label"><i class="bi bi-people me-1"></i>Caixas Solicitantes</div>
            <div class="pbi-kpi-valor pbi-skeleton" id="lib-kpi-sol" style="height:1.6rem;border-radius:4px">&nbsp;</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="pbi-kpi-card">
            <div class="pbi-kpi-label"><i class="bi bi-person-check me-1"></i>Supervisores</div>
            <div class="pbi-kpi-valor pbi-skeleton" id="lib-kpi-sup" style="height:1.6rem;border-radius:4px">&nbsp;</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="pbi-kpi-card">
            <div class="pbi-kpi-label"><i class="bi bi-bar-chart me-1"></i>Média por Caixa</div>
            <div class="pbi-kpi-valor pbi-skeleton" id="lib-kpi-med" style="height:1.6rem;border-radius:4px">&nbsp;</div>
        </div>
    </div>
</div>

<!-- Distribuição por TIPO -->
<div class="pbi-card mb-3" id="lib-tipos-card">
    <div class="pbi-card-header"><i class="bi bi-pie-chart me-2 text-accent"></i>Distribuição por tipo de liberação</div>
    <div class="p-3" id="lib-tipos-body">
        <div class="text-muted small"><i class="bi bi-hourglass-split me-1"></i>Carregando...</div>
    </div>
</div>

<!-- 2 cards lado a lado: Caixas que pedem | Supervisores que liberam -->
<div class="row g-3 mb-3">
    <div class="col-12">
        <div class="pbi-card h-100">
            <div class="pbi-card-header d-flex justify-content-between align-items-center">
                <span><i class="bi bi-person-raised-hand me-2 text-warning"></i>Caixas que mais pedem liberação</span>
                <span id="lib-sol-badge" class="badge bg-secondary" style="display:none"></span>
            </div>
            <div class="table-responsive">
                <table class="pbi-table">
                    <thead>
                        <tr>
                            <th style="width:40px">#</th>
                            <th>Operadora (caixa)</th>
                            <th class="text-end" title="Quantidade total de liberações solicitadas (todos os tipos)">Total</th>
                            <th class="text-end" title="Quantidade de liberações de Desconto (TIPO=1)">Qtd Desconto</th>
                            <th class="text-end" title="Soma dos descontos efetivamente concedidos — dinheiro que saiu do caixa (TIPO=1)">Desconto R$</th>
                            <th class="text-end" title="Soma das autorizações de fatura atrasada e limite de crédito (TIPO=2 e TIPO=3) — valor autorizado, NÃO saída de caixa">Autorizado R$</th>
                            <th class="text-end" title="Ticket Desconto = Desconto R$ ÷ Qtd Desconto. Mostra '-' quando o caixa não fez nenhum desconto no período.">Ticket Desconto</th>
                            <th>Supervisor preferido</th>
                            <th class="text-center" title="Faixa do dia em que mais pediu liberações">Período</th>
                            <th class="text-end" title="Pagamento bloqueado">💳</th>
                            <th class="text-end" title="Desconto">💰</th>
                            <th class="text-end" title="Fatura atrasada">📅</th>
                            <th class="text-end" title="Limite crédito">🏦</th>
                        </tr>
                    </thead>
                    <tbody id="lib-sol-body">
                        <tr><td colspan="13" class="text-center text-muted p-4"><i class="bi bi-hourglass-split me-1"></i>Carregando...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-12">
        <div class="pbi-card h-100">
            <div class="pbi-card-header d-flex justify-content-between align-items-center">
                <span><i class="bi bi-person-check me-2 text-success"></i>Supervisores que mais liberam</span>
                <span id="lib-sup-badge" class="badge bg-secondary" style="display:none"></span>
            </div>
            <div class="table-responsive">
                <table class="pbi-table">
                    <thead>
                        <tr>
                            <th style="width:40px">#</th>
                            <th>Supervisor</th>
                            <th class="text-end" title="Quantidade total de liberações que este supervisor autorizou (todos os tipos)">Autorizações</th>
                            <th class="text-end" title="Quantidade de liberações de Desconto (TIPO=1) autorizadas">Qtd Desconto</th>
                            <th class="text-end" title="Soma dos descontos efetivamente autorizados por este supervisor — dinheiro que saiu do caixa (TIPO=1)">Desconto R$</th>
                            <th class="text-end" title="Soma das autorizações de fatura atrasada e limite de crédito (TIPO=2 e TIPO=3) — valor autorizado, NÃO saída de caixa">Autorizado R$</th>
                            <th class="text-end" title="Ticket Desconto = Desconto R$ ÷ Qtd Desconto. Mostra '-' quando o supervisor não autorizou nenhum desconto no período.">Ticket Desconto</th>
                            <th class="text-end" title="Quanto este supervisor autorizou ACIMA do que o sistema permitiria sozinho (em descontos TIPO=1). Este é o valor que só passou porque ele liberou.">Acima do limite</th>
                            <th>Caixa preferido</th>
                            <th class="text-center" title="Faixa do dia em que mais autorizou liberações">Período</th>
                        </tr>
                    </thead>
                    <tbody id="lib-sup-body">
                        <tr><td colspan="10" class="text-center text-muted p-4"><i class="bi bi-hourglass-split me-1"></i>Carregando...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Detalhamento (drill-down) -->
<div class="pbi-card mb-4" id="lib-drilldown" style="display:none">
    <div class="pbi-card-header d-flex justify-content-between align-items-center">
        <span>
            <i class="bi bi-person-vcard me-2 text-accent"></i>
            <span id="lib-drill-titulo">Perfil de liberações</span> — <span id="lib-drill-nome"></span>
            <span id="lib-drill-papel-badge" class="badge bg-secondary ms-2" style="display:none"></span>
            <span id="lib-drill-alerta-badge" class="ms-2" style="display:none"></span>
        </span>
        <button id="lib-drill-close" class="btn btn-sm btn-outline-secondary"><i class="bi bi-x-lg"></i></button>
    </div>

    <!-- TABS Bootstrap: Perfil (default) | Liberações individuais -->
    <ul class="nav nav-tabs px-3 pt-2" id="lib-drill-tabs" role="tablist" style="border-bottom:1px solid rgba(0,0,0,.08)">
        <li class="nav-item">
            <a class="nav-link active" href="#" data-tab="perfil" role="tab">
                <i class="bi bi-person-vcard me-1"></i>Perfil
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#" data-tab="individuais" role="tab">
                <i class="bi bi-list-ul me-1"></i>Liberações individuais
            </a>
        </li>
    </ul>

    <!-- ABA 1: PERFIL (default) -->
    <div id="lib-drill-tab-perfil" class="lib-drill-tab" style="">
        <div class="p-3">
            <!-- KPIs comparativos -->
            <div class="row g-2 mb-3" id="lib-drill-kpis-perfil">
                <div class="col-12 text-muted small"><i class="bi bi-hourglass-split me-1"></i>Carregando perfil...</div>
            </div>

            <!-- Heatmap dia x hora -->
            <div class="pbi-card mb-3">
                <div class="pbi-card-header"><i class="bi bi-calendar3-week me-2 text-accent"></i>Quando essa pessoa libera (dia da semana × horário)</div>
                <div class="p-2" id="lib-drill-heatmap" style="height:260px"></div>
            </div>

            <!-- Evolução temporal -->
            <div class="pbi-card mb-3">
                <div class="pbi-card-header"><i class="bi bi-graph-up me-2 text-accent"></i>Evolução no período</div>
                <div class="p-2" id="lib-drill-evolucao" style="height:240px"></div>
            </div>

            <!-- Mix + Top clientes + Top mensagens -->
            <div class="row g-3 mb-3">
                <div class="col-12 col-md-3">
                    <div class="pbi-card h-100">
                        <div class="pbi-card-header small"><i class="bi bi-pie-chart me-2 text-accent"></i>Mix por tipo</div>
                        <div class="p-2" id="lib-drill-mix-tipo" style="height:240px"></div>
                    </div>
                </div>
                <div class="col-12 col-md-5">
                    <div class="pbi-card h-100">
                        <div class="pbi-card-header small d-flex justify-content-between align-items-center">
                            <span><i class="bi bi-people me-2 text-accent"></i>Top 10 clientes</span>
                            <span id="lib-drill-concentracao-badge" class="badge bg-danger" style="display:none">Concentração alta</span>
                        </div>
                        <div class="p-2" id="lib-drill-top-clientes" style="height:240px"></div>
                    </div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="pbi-card h-100">
                        <div class="pbi-card-header small"><i class="bi bi-chat-left-text me-2 text-accent"></i>Top mensagens</div>
                        <div class="p-2" id="lib-drill-top-mensagens" style="font-size:.85rem">
                            <div class="text-muted small">Carregando...</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Status + Acessos -->
            <div class="row g-3 mb-2">
                <div class="col-12 col-md-6">
                    <div class="pbi-card h-100">
                        <div class="pbi-card-header small"><i class="bi bi-check2-square me-2 text-success"></i>Distribuição por status</div>
                        <div class="p-2" id="lib-drill-status" style="height:180px"></div>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="pbi-card h-100">
                        <div class="pbi-card-header small"><i class="bi bi-shield-lock me-2 text-accent"></i>Top recursos bloqueados (acessos)</div>
                        <div class="p-2" id="lib-drill-acessos" style="height:180px"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ABA 2: LIBERAÇÕES INDIVIDUAIS (conteúdo original do drill-down) -->
    <div id="lib-drill-tab-individuais" class="lib-drill-tab" style="display:none">
        <!-- Cabecalho de totais do detalhamento -->
        <div class="p-3 border-bottom" id="lib-drill-resumo" style="background:rgba(0,0,0,.02)">
            <div class="row g-2 small" id="lib-drill-resumo-body"></div>
        </div>
        <!-- Bloco: distribuicao por contraparte (com quem trabalha) -->
        <div class="p-3 border-bottom" id="lib-drill-contraparte" style="display:none">
            <div class="fw-bold mb-2 small"><i class="bi bi-people-fill me-1 text-warning"></i><span id="lib-drill-contraparte-titulo">Distribuição</span></div>
            <div class="table-responsive">
                <table class="pbi-table table-sm" style="margin:0">
                    <thead><tr>
                        <th style="width:40px">#</th>
                        <th id="lib-drill-contraparte-col">Nome</th>
                        <th class="text-end">Liberações</th>
                        <th class="text-end">Valor</th>
                        <th class="text-end">% do total</th>
                    </tr></thead>
                    <tbody id="lib-drill-contraparte-body"></tbody>
                </table>
            </div>
        </div>
        <div class="table-responsive">
            <table class="pbi-table">
                <thead>
                    <tr>
                        <th>Data/Hora</th>
                        <th>Tipo</th>
                        <th id="lib-drill-col-contra">Supervisor</th>
                        <th>Cliente</th>
                        <th>Mensagem</th>
                        <th title="Observação do operador (passe o mouse para ver completo)">Observação</th>
                        <th class="text-end">Solicitado</th>
                        <th class="text-end">Permitido</th>
                        <th class="text-end" title="Diferença entre solicitado e permitido — quanto só passou porque foi autorizado">Acima</th>
                        <th class="text-end" title="Valor total da(s) nota(s) emitida(s) no mesmo dia para este cliente">Valor Nota</th>
                        <th class="text-end" title="% do valor solicitado sobre o valor da nota — proxy de desconto efetivo">% Desc</th>
                        <th class="text-center" title="Número da nota fiscal (clique no detalhe da liberação para mais)">N° Nota</th>
                        <th class="text-center">Status</th>
                    </tr>
                </thead>
                <tbody id="lib-drill-body"></tbody>
            </table>
        </div>
    </div>
</div>

<script>
(function(){
    'use strict';
    var dataIni = <?= json_encode($dataIni) ?>;
    var dataFim = <?= json_encode($dataFim) ?>;
    var tipoSel = <?= $tipo === null ? 'null' : (int)$tipo ?>;
    var TIPOS = <?= json_encode($tipos, JSON_UNESCAPED_UNICODE) ?>;

    function moeda(v){ v=parseFloat(v||0); return 'R$ '+v.toLocaleString('pt-BR',{minimumFractionDigits:2,maximumFractionDigits:2}); }
    function num0(v){ return parseFloat(v||0).toLocaleString('pt-BR',{minimumFractionDigits:0,maximumFractionDigits:0}); }
    function num1(v){ return parseFloat(v||0).toLocaleString('pt-BR',{minimumFractionDigits:1,maximumFractionDigits:1}); }
    function esc(s){ return String(s==null?'':s).replace(/[&<>"']/g, function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];}); }

    // Faixa horaria -> icone e rotulo amigavel (Fire Sistemas)
    var FAIXAS = {
        madrugada: { rotulo: 'Madrugada (00h-05h)', icon: 'bi-moon-stars', cor: '#7c3aed' },
        manha:     { rotulo: 'Manhã (06h-11h)',    icon: 'bi-sunrise',    cor: '#f59e0b' },
        tarde:     { rotulo: 'Tarde (12h-17h)',    icon: 'bi-sun',        cor: '#0ea5e9' },
        noite:     { rotulo: 'Noite (18h-23h)',    icon: 'bi-moon',       cor: '#475569' }
    };
    var TOTAIS_LOJA = { qtd:0, valor:0, ticket:0 };

    function setKPI(id, v){ var el=document.getElementById(id); if(el){ el.classList.remove('pbi-skeleton'); el.textContent=v; } }
    function mostrarErro(msg){
        // v3: colspans atualizados — solicitantes 11→13 (add Qtd Desconto + Autorizado R$)
        //                          supervisores 8→10 (add Qtd Desconto + Autorizado R$)
        var alvos=[{id:'lib-sol-body', col:13},{id:'lib-sup-body', col:10}];
        alvos.forEach(function(o){
            var el=document.getElementById(o.id);
            if(el) el.innerHTML='<tr><td colspan="'+o.col+'" class="text-center text-danger p-4"><i class="bi bi-exclamation-triangle me-1"></i>'+esc(msg)+'</td></tr>';
        });
    }

    function badgeFaixa(faixa, pct, distrib){
        var info = FAIXAS[faixa] || { rotulo:'-', icon:'bi-clock', cor:'#94a3b8' };
        var tip = info.rotulo + ' · ' + num1(pct) + '% das liberações';
        if (distrib) {
            tip += ' | Madrugada: '+(distrib.madrugada||0)+' · Manhã: '+(distrib.manha||0)
                 + ' · Tarde: '+(distrib.tarde||0)+' · Noite: '+(distrib.noite||0);
        }
        return '<span class="badge" data-bs-toggle="tooltip" title="'+esc(tip)+'" '
             + 'style="background:'+info.cor+'18;color:'+info.cor+';font-weight:600;padding:.3rem .55rem">'
             + '<i class="bi '+info.icon+' me-1"></i>' + esc(info.rotulo.split(' ')[0]) + '</span>';
    }

    function badgeAlerta(motivos){
        if (!motivos || !motivos.length) return '';
        var t = motivos.join(' | ');
        return '<span class="badge text-bg-warning me-1" data-bs-toggle="tooltip" '
             + 'title="'+esc(t)+'" style="font-weight:700;cursor:help">'
             + '<i class="bi bi-exclamation-triangle-fill me-1"></i>ALERTA</span>';
    }

    // Barra mini de proporcao (sparkline) para % loja
    function miniBarra(pct, cor){
        var p = Math.max(0, Math.min(100, parseFloat(pct||0)));
        cor = cor || 'var(--pbi-accent,#3b82f6)';
        return '<div title="'+num1(p)+'% da loja" '
             + 'style="display:inline-block;vertical-align:middle;width:60px;height:6px;background:rgba(0,0,0,.08);border-radius:3px;margin-left:6px;overflow:hidden">'
             + '<div style="width:'+p+'%;height:100%;background:'+cor+'"></div>'
             + '</div>';
    }

    function carregar(){
        var url='/api/auditoria/liberacoes-caixa?data_ini='+encodeURIComponent(dataIni)+'&data_fim='+encodeURIComponent(dataFim);
        if(tipoSel !== null) url += '&tipo='+tipoSel;
        fetch(url, {credentials:'same-origin'})
            .then(function(r){ return r.text().then(function(txt){ return {status:r.status, ok:r.ok, body:txt}; }); })
            .then(function(resp){
                if (!resp.ok){ mostrarErro('HTTP '+resp.status+': '+resp.body.substring(0,200)); return; }
                var j; try { j = JSON.parse(resp.body); } catch(e){ mostrarErro('JSON inválido'); return; }
                if (!j.ok){ mostrarErro('Erro: '+(j.erro||'desconhecido')); return; }

                TOTAIS_LOJA = {
                    qtd:    j.total_geral || 0,
                    valor:  j.valor_total_geral || 0,
                    ticket: j.ticket_medio_loja || 0
                };
                setKPI('lib-kpi-tot', num0(j.total_geral));
                setKPI('lib-kpi-sol', num0(j.qtd_solic));
                setKPI('lib-kpi-sup', num0(j.qtd_sup));
                setKPI('lib-kpi-med', num0(j.media_por_oper));
                renderTipos(j.totais_por_tipo, j.total_geral);
                renderSolicitantes(j.solicitantes);
                renderSupervisores(j.supervisores);
                // Ativa tooltips Bootstrap nos badges renderizados
                try {
                    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el){
                        if (window.bootstrap && bootstrap.Tooltip) new bootstrap.Tooltip(el);
                    });
                } catch(e){}
            })
            .catch(function(e){ mostrarErro('Erro de rede: '+(e&&e.message?e.message:e)); });
    }

    function renderTipos(totais, totGeral){
        var box=document.getElementById('lib-tipos-body');
        if (totGeral===0){ box.innerHTML='<div class="text-muted small">Sem liberações no período.</div>'; return; }
        var html='<div class="row g-2">';
        [0,1,2,3].forEach(function(t){
            var info = TIPOS[t];
            var qtd = totais[t] || 0;
            var pct = totGeral>0 ? (qtd/totGeral*100) : 0;
            html += '<div class="col-12 col-md-6 col-lg-3">'
                 +    '<div style="border-left:3px solid '+info.cor+';padding:.6rem .9rem;background:rgba(0,0,0,.02);border-radius:6px">'
                 +      '<div style="font-size:.72rem;color:var(--pbi-text-muted);text-transform:uppercase;letter-spacing:.05em">'
                 +        '<i class="bi '+info.icon+' me-1"></i>'+esc(info.nome)
                 +      '</div>'
                 +      '<div style="font-size:1.4rem;font-weight:700;color:'+info.cor+'">'+num0(qtd)+'</div>'
                 +      '<div class="small text-muted">'+pct.toFixed(1)+'% do total</div>'
                 +    '</div>'
                 +  '</div>';
        });
        html += '</div>';
        box.innerHTML = html;
    }

    function renderSolicitantes(lista){
        // v3: linha agora tem 13 colunas (add Qtd Desconto + Autorizado R$;
        //     "Valor liberado" virou "Desconto R$"; "Ticket médio" virou "Ticket Desconto"
        //     que mostra "-" quando o caixa nao fez nenhum desconto).
        var tb=document.getElementById('lib-sol-body');
        var bd=document.getElementById('lib-sol-badge');
        if (!lista.length){
            tb.innerHTML='<tr><td colspan="13" class="text-center text-success p-4"><i class="bi bi-check-circle me-1"></i>Sem liberações no período. Caixas tranquilas!</td></tr>';
            bd.style.display='none';
            return;
        }
        bd.style.display='inline-block'; bd.textContent=lista.length+' caixas';
        tb.innerHTML = lista.map(function(d, i){
            var bg = d.alerta_conluio ? 'background:rgba(220,38,38,.06)' : (d.acima_media ? 'background:rgba(245,158,11,.06)' : '');
            var alerta = badgeAlerta(d.motivos_alerta);
            var iconMedia = d.acima_media
                ? ' <i class="bi bi-exclamation-triangle text-warning ms-1" data-bs-toggle="tooltip" title="Pede 2x acima da média da loja"></i>'
                : '';

            // Desconto R$ (dinheiro real que saiu, TIPO=1) — destaca amarelo se ticket do caixa > ticket loja
            var ticket = (d.ticket_desconto !== null && d.ticket_desconto !== undefined) ? parseFloat(d.ticket_desconto) : null;
            var corDesc = (TOTAIS_LOJA.ticket > 0 && ticket !== null && ticket > TOTAIS_LOJA.ticket)
                        ? 'color:#d97706;font-weight:700' : 'font-weight:600';
            var tipDesc = 'Soma dos descontos concedidos a este caixa (TIPO=1) — dinheiro que efetivamente saiu';
            if (d.val_permitido > 0) tipDesc += '. Sistema permitia até R$ '+num1(d.val_permitido).replace('.',',');

            // Autorizado R$ (TIPO 2,3) — fatura/limite, NAO e saida de caixa
            var valAutorizado = parseFloat(d.val_autorizado || 0);
            var autorizadoHtml = valAutorizado > 0
                ? '<span class="text-muted" data-bs-toggle="tooltip" '
                  + 'title="Fatura atrasada + limite de crédito autorizado (TIPO=2 e TIPO=3). NÃO é saída de caixa.">'
                  + moeda(valAutorizado)+'</span>'
                : '<span class="text-muted">-</span>';

            // Ticket Desconto — "-" se nao tiver desconto (caixa so faz pagamento operacional)
            var ticketHtml = (ticket === null || ticket === 0)
                ? '<span class="text-muted" data-bs-toggle="tooltip" title="Este caixa não fez nenhuma liberação de desconto no período.">-</span>'
                : '<span class="small text-muted">'+moeda(ticket)+'</span>';

            // Qtd Desconto (TIPO=1)
            var qtdDescHtml = (d.qtd_desconto > 0)
                ? '<span class="text-warning fw-bold">'+num0(d.qtd_desconto)+'</span>'
                : '<span class="text-muted">0</span>';

            // Supervisor preferido
            var supPref = '-';
            if (d.supervisor_top) {
                var corSup = d.supervisor_top_pct >= 70 ? 'color:#dc2626;font-weight:700' : '';
                supPref = '<span style="'+corSup+'" data-bs-toggle="tooltip" '
                        + 'title="'+esc(d.supervisor_top)+' autorizou '+d.supervisor_top_qtd+' liberações deste caixa">'
                        + esc(d.supervisor_top)+' <span class="small text-muted">('+num1(d.supervisor_top_pct)+'%)</span></span>';
            }

            // Coluna Total com mini-barra de % da loja
            var totalCol = '<span class="fw-bold">'+num0(d.qtd_total)+'</span>'
                         + miniBarra(d.pct_loja, '#f59e0b');

            // Desconto R$ — mostra "-" se zero
            var valDescReal = parseFloat(d.val_desconto_real || d.val_desconto || 0);
            var descHtml = valDescReal > 0
                ? '<span style="'+corDesc+'" data-bs-toggle="tooltip" title="'+esc(tipDesc)+'">'+moeda(valDescReal)+'</span>'
                : '<span class="text-muted">-</span>';

            return '<tr style="cursor:pointer;'+bg+'" data-nome="'+esc(d.solicitante)+'" data-tipo="oper" class="lib-row">'
                 + '<td class="text-muted">'+(i+1)+'</td>'
                 + '<td class="fw-bold">'+alerta+esc(d.solicitante)+iconMedia+'</td>'
                 + '<td class="text-end">'+totalCol+'</td>'
                 + '<td class="text-end">'+qtdDescHtml+'</td>'
                 + '<td class="text-end">'+descHtml+'</td>'
                 + '<td class="text-end">'+autorizadoHtml+'</td>'
                 + '<td class="text-end">'+ticketHtml+'</td>'
                 + '<td class="small">'+supPref+'</td>'
                 + '<td class="text-center">'+badgeFaixa(d.faixa, d.faixa_pct, d.faixa_distrib)+'</td>'
                 + '<td class="text-end text-muted">'+num0(d.qtd_pgto)+'</td>'
                 + '<td class="text-end text-warning fw-bold">'+num0(d.qtd_desconto)+'</td>'
                 + '<td class="text-end text-danger">'+num0(d.qtd_fatura)+'</td>'
                 + '<td class="text-end" style="color:#8b5cf6">'+num0(d.qtd_credito)+'</td>'
                 + '</tr>';
        }).join('');
        tb.querySelectorAll('.lib-row').forEach(function(tr){
            tr.addEventListener('click', function(){ drillDownOperador(tr.getAttribute('data-nome')); });
        });
    }

    function renderSupervisores(lista){
        // v3: linha agora tem 10 colunas (add Qtd Desconto + Autorizado R$;
        //     "Valor autorizado" virou "Desconto R$"; "Ticket médio" virou "Ticket Desconto"
        //     que mostra "-" quando o supervisor nao autorizou nenhum desconto).
        var tb=document.getElementById('lib-sup-body');
        var bd=document.getElementById('lib-sup-badge');
        if (!lista.length){
            tb.innerHTML='<tr><td colspan="10" class="text-center text-muted p-4">Sem supervisores no período.</td></tr>';
            bd.style.display='none';
            return;
        }
        bd.style.display='inline-block'; bd.textContent=lista.length+' supervisores';

        // ticket medio da loja para destacar supervisores acima de 3x
        var ticketLoja = TOTAIS_LOJA.ticket || 0;

        tb.innerHTML = lista.map(function(d, i){
            var bg = d.alerta_conluio ? 'background:rgba(220,38,38,.06)' : '';
            var alerta = badgeAlerta(d.motivos_alerta);

            // Caixa preferido
            var opPref = '-';
            if (d.operador_top) {
                var corOp = d.operador_top_pct >= 70 ? 'color:#dc2626;font-weight:700' : '';
                opPref = '<span style="'+corOp+'" data-bs-toggle="tooltip" '
                       + 'title="'+esc(d.operador_top)+' foi atendido em '+d.operador_top_qtd+' liberações deste supervisor">'
                       + esc(d.operador_top)+' <span class="small text-muted">('+num1(d.operador_top_pct)+'%)</span></span>';
            }

            var ticket = (d.ticket_desconto !== null && d.ticket_desconto !== undefined) ? parseFloat(d.ticket_desconto) : null;
            var corTicket = (ticketLoja > 0 && ticket !== null && ticket > 3*ticketLoja) ? 'color:#dc2626;font-weight:700' : 'color:var(--pbi-text-muted)';
            var corSpread = d.spread > 0 ? 'color:#dc2626;font-weight:700' : 'color:var(--pbi-text-muted)';

            var tipSpread = 'Quanto este supervisor autorizou de DESCONTO ACIMA do que o sistema permitia sozinho. '
                          + 'Se R$ 0, ele apenas confirmou o que o sistema já deixaria passar.';

            var qtdCol = '<span class="fw-bold text-success">'+num0(d.qtd)+'</span>' + miniBarra(d.pct_loja, '#16a34a');

            // Qtd Desconto autorizada (TIPO=1)
            var qtdDescHtml = (d.qtd_desconto > 0)
                ? '<span class="text-warning fw-bold">'+num0(d.qtd_desconto)+'</span>'
                : '<span class="text-muted">0</span>';

            // Desconto R$ autorizado (TIPO=1) — dinheiro real
            var valDescReal = parseFloat(d.val_desconto_real || 0);
            var descHtml = valDescReal > 0
                ? '<span class="fw-bold" data-bs-toggle="tooltip" '
                  + 'title="Soma dos descontos autorizados por este supervisor (TIPO=1) — dinheiro que efetivamente saiu">'
                  + moeda(valDescReal)+'</span>'
                : '<span class="text-muted">-</span>';

            // Autorizado R$ (TIPO 2,3) — fatura/limite
            var valAutorizado = parseFloat(d.val_autorizado || 0);
            var autorizadoHtml = valAutorizado > 0
                ? '<span class="text-muted" data-bs-toggle="tooltip" '
                  + 'title="Fatura atrasada + limite de crédito autorizado (TIPO=2 e TIPO=3). NÃO é saída de caixa.">'
                  + moeda(valAutorizado)+'</span>'
                : '<span class="text-muted">-</span>';

            // Ticket Desconto
            var ticketHtml = (ticket === null || ticket === 0)
                ? '<span class="text-muted" data-bs-toggle="tooltip" title="Este supervisor não autorizou nenhum desconto no período.">-</span>'
                : '<span class="small" style="'+corTicket+'">'+moeda(ticket)+'</span>';

            return '<tr style="cursor:pointer;'+bg+'" data-nome="'+esc(d.supervisor)+'" data-tipo="sup" class="lib-row-sup">'
                 + '<td class="text-muted">'+(i+1)+'</td>'
                 + '<td class="fw-bold">'+alerta+esc(d.supervisor)+'</td>'
                 + '<td class="text-end">'+qtdCol+'</td>'
                 + '<td class="text-end">'+qtdDescHtml+'</td>'
                 + '<td class="text-end">'+descHtml+'</td>'
                 + '<td class="text-end">'+autorizadoHtml+'</td>'
                 + '<td class="text-end">'+ticketHtml+'</td>'
                 + '<td class="text-end" style="'+corSpread+'" data-bs-toggle="tooltip" title="'+esc(tipSpread)+'">'+moeda(d.spread)+'</td>'
                 + '<td class="small">'+opPref+'</td>'
                 + '<td class="text-center">'+badgeFaixa(d.faixa, d.faixa_pct, d.faixa_distrib)+'</td>'
                 + '</tr>';
        }).join('');
        tb.querySelectorAll('.lib-row-sup').forEach(function(tr){
            tr.addEventListener('click', function(){ drillDownSupervisor(tr.getAttribute('data-nome')); });
        });
    }

    function drillDownOperador(nome){
        var url='/api/auditoria/liberacoes-caixa/detalhe?nome='+encodeURIComponent(nome)
              + '&data_ini='+encodeURIComponent(dataIni)+'&data_fim='+encodeURIComponent(dataFim);
        if (tipoSel !== null) url += '&tipo='+tipoSel;
        drillDown({
            tipo: 'oper',
            papel: 'solicitante',
            papelLabel: 'Caixa',
            nome: nome,
            titulo: 'Perfil de liberações',
            url: url,
            colContraNome: 'Supervisor (quem liberou)',
            contraTitulo: 'Distribuição por supervisor que liberou',
            getContra: function(n){ return n.supervisor; }
        });
        carregarPerfil(nome, 'solicitante');
    }
    function drillDownSupervisor(nome){
        var url='/api/auditoria/liberacoes-caixa/por-supervisor?nome='+encodeURIComponent(nome)
              + '&data_ini='+encodeURIComponent(dataIni)+'&data_fim='+encodeURIComponent(dataFim);
        if (tipoSel !== null) url += '&tipo='+tipoSel;
        drillDown({
            tipo: 'sup',
            papel: 'supervisor',
            papelLabel: 'Supervisor',
            nome: nome,
            titulo: 'Perfil de liberações',
            url: url,
            colContraNome: 'Caixa solicitante',
            contraTitulo: 'Distribuição por caixa que solicitou',
            getContra: function(n){ return n.operador; }
        });
        carregarPerfil(nome, 'supervisor');
    }

    function drillDown(opts){
        var box=document.getElementById('lib-drilldown');
        var tb=document.getElementById('lib-drill-body');
        var nm=document.getElementById('lib-drill-nome');
        var titulo=document.getElementById('lib-drill-titulo');
        var colContra=document.getElementById('lib-drill-col-contra');
        var resumoBody=document.getElementById('lib-drill-resumo-body');
        var contraBox=document.getElementById('lib-drill-contraparte');
        var contraTit=document.getElementById('lib-drill-contraparte-titulo');
        var contraCol=document.getElementById('lib-drill-contraparte-col');
        var contraBody=document.getElementById('lib-drill-contraparte-body');

        titulo.textContent = opts.titulo;
        nm.textContent = opts.nome;
        colContra.textContent = (opts.tipo === 'sup') ? 'Caixa solicitante' : 'Supervisor (quem liberou)';

        // Badge papel (Caixa / Supervisor) + reset badge alerta
        var papelBadge = document.getElementById('lib-drill-papel-badge');
        if (papelBadge) {
            papelBadge.style.display = 'inline-block';
            papelBadge.textContent = opts.papelLabel || '';
            papelBadge.className = 'badge ms-2 ' + (opts.tipo === 'sup' ? 'bg-success' : 'bg-info');
        }
        var alBadge = document.getElementById('lib-drill-alerta-badge');
        if (alBadge) { alBadge.style.display = 'none'; alBadge.innerHTML = ''; }

        // Sempre abre na aba "Perfil"
        ativarTab('perfil');

        resumoBody.innerHTML = '<div class="col-12 text-muted small"><i class="bi bi-hourglass-split me-1"></i>Carregando totais...</div>';
        contraBox.style.display = 'none';
        contraBody.innerHTML = '';
        contraTit.textContent = opts.contraTitulo;
        contraCol.textContent = opts.colContraNome;

        tb.innerHTML='<tr><td colspan="13" class="text-center text-muted p-3"><i class="bi bi-hourglass-split me-1"></i>Carregando liberações...</td></tr>';
        box.style.display='';
        box.scrollIntoView({behavior:'smooth', block:'start'});

        fetch(opts.url, {credentials:'same-origin'})
            .then(function(r){ return r.json(); })
            .then(function(j){
                if (!j.ok){
                    tb.innerHTML='<tr><td colspan="13" class="text-danger text-center p-3">'+esc(j.erro||'')+'</td></tr>';
                    resumoBody.innerHTML='<div class="col-12 text-danger small">'+esc(j.erro||'erro')+'</div>';
                    return;
                }
                var lista = j.lista || [];
                if (!lista.length){
                    tb.innerHTML='<tr><td colspan="13" class="text-muted text-center p-3">Sem liberações no período.</td></tr>';
                    resumoBody.innerHTML='<div class="col-12 text-muted small">Sem dados.</div>';
                    return;
                }

                // Resumo no topo
                var qtd = lista.length, valSolic = 0, valPerm = 0, spread = 0;
                var distFaixa = { madrugada:0, manha:0, tarde:0, noite:0 };
                lista.forEach(function(n){
                    valSolic += parseFloat(n.valor_solic||0);
                    valPerm  += parseFloat(n.valor_permit||0);
                    spread   += parseFloat(n.spread||0);
                    var h = (n.hora||'').split(':')[0]|0;
                    if (h<=5) distFaixa.madrugada++;
                    else if (h<=11) distFaixa.manha++;
                    else if (h<=17) distFaixa.tarde++;
                    else distFaixa.noite++;
                });
                var ticket = qtd>0 ? valSolic/qtd : 0;
                var pctLoja = TOTAIS_LOJA.qtd>0 ? (qtd/TOTAIS_LOJA.qtd*100) : 0;
                var faixaTop='manha', faixaQ=0;
                Object.keys(distFaixa).forEach(function(k){ if (distFaixa[k]>faixaQ){faixaTop=k; faixaQ=distFaixa[k];} });
                var faixaPct = qtd>0 ? (faixaQ/qtd*100) : 0;

                resumoBody.innerHTML =
                      '<div class="col-6 col-md-2"><div class="text-muted">Liberações</div><div class="fw-bold" style="font-size:1.1rem">'+num0(qtd)+'</div><div class="text-muted" style="font-size:.7rem">'+num1(pctLoja)+'% da loja</div></div>'
                    + '<div class="col-6 col-md-2"><div class="text-muted">Valor solicitado</div><div class="fw-bold" style="font-size:1.1rem">'+moeda(valSolic)+'</div></div>'
                    + '<div class="col-6 col-md-2"><div class="text-muted">Valor permitido</div><div class="fw-bold" style="font-size:1.1rem">'+moeda(valPerm)+'</div></div>'
                    + '<div class="col-6 col-md-2"><div class="text-muted">Acima do limite</div><div class="fw-bold" style="font-size:1.1rem;color:'+(spread>0?'#dc2626':'inherit')+'">'+moeda(spread)+'</div></div>'
                    + '<div class="col-6 col-md-2"><div class="text-muted">Ticket médio</div><div class="fw-bold" style="font-size:1.1rem">'+moeda(ticket)+'</div></div>'
                    + '<div class="col-6 col-md-2"><div class="text-muted">Período predominante</div><div>'+badgeFaixa(faixaTop, faixaPct, distFaixa)+'</div></div>';

                // Distribuição por contraparte
                var contraMap = {}, contraValor = {};
                lista.forEach(function(n){
                    var k = opts.getContra(n) || '(sem nome)';
                    contraMap[k] = (contraMap[k]||0)+1;
                    contraValor[k] = (contraValor[k]||0) + parseFloat(n.valor_solic||0);
                });
                var contraArr = Object.keys(contraMap).map(function(k){
                    return { nome:k, q:contraMap[k], v:contraValor[k], pct:qtd>0?(contraMap[k]/qtd*100):0 };
                }).sort(function(a,b){ return b.q - a.q; });
                if (contraArr.length){
                    contraBox.style.display='';
                    contraBody.innerHTML = contraArr.map(function(c, i){
                        var cor = c.pct >= 70 ? 'background:rgba(220,38,38,.08)' : '';
                        var corT = c.pct >= 70 ? 'color:#dc2626;font-weight:700' : '';
                        var alert = c.pct >= 70 ? ' <i class="bi bi-exclamation-triangle text-danger ms-1" title="Concentração suspeita (>=70%)"></i>' : '';
                        return '<tr style="'+cor+'">'
                             + '<td class="text-muted">'+(i+1)+'</td>'
                             + '<td style="'+corT+'">'+esc(c.nome)+alert+'</td>'
                             + '<td class="text-end">'+num0(c.q)+'</td>'
                             + '<td class="text-end">'+moeda(c.v)+'</td>'
                             + '<td class="text-end" style="'+corT+'">'+num1(c.pct)+'%</td>'
                             + '</tr>';
                    }).join('');
                }

                // Tabela cronológica
                tb.innerHTML = lista.map(function(n){
                    var info = TIPOS[n.tipo] || {nome:'?', icon:'bi-question', cor:'#94a3b8'};
                    var tipoBadge = '<span class="badge" style="background:'+info.cor+'22;color:'+info.cor+';font-weight:600;padding:.3rem .5rem;font-size:.7rem"><i class="bi '+info.icon+' me-1"></i>'+esc(info.nome)+'</span>';
                    var contra = opts.getContra(n) || '-';
                    var cliente = n.cliente_nome
                        ? esc(n.cliente_nome)
                        : (n.cod_pessoa ? '<span class="text-muted small">cód. '+n.cod_pessoa+'</span>' : '<span class="text-muted">-</span>');
                    var spreadCor = parseFloat(n.spread||0) > 0 ? 'color:#dc2626;font-weight:700' : 'color:var(--pbi-text-muted)';
                    var stTxt = (n.status||'').toUpperCase();
                    var stBadge = stTxt==='L'
                        ? '<span class="badge bg-success">Liberado</span>'
                        : (stTxt ? '<span class="badge bg-secondary">'+esc(stTxt)+'</span>' : '<span class="text-muted small">-</span>');
                    var rowStyle = (stTxt && stTxt !== 'L')
                        ? 'cursor:pointer;color:#94a3b8;text-decoration:line-through'
                        : 'cursor:pointer';
                    // Mensagem (sem OBS embaixo — OBS virou coluna propria)
                    var msgTxt = (n.mensagem||'-');
                    var msgHtml = '<span title="'+esc(msgTxt)+'">'+esc(msgTxt.substring(0,80))+(msgTxt.length>80?'...':'')+'</span>';

                    // OBS truncada com tooltip (coluna propria)
                    var obsTxt = (n.obs||'').trim();
                    var obsHtml = obsTxt
                        ? '<span class="text-muted small" title="'+esc(obsTxt)+'" '
                            + 'style="display:inline-block;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom">'
                            + esc(obsTxt)+'</span>'
                        : '<span class="text-muted">-</span>';

                    // Valor da nota (mesmo dia, mesmo cliente)
                    var valNota = parseFloat(n.valor_nota||0);
                    var valNotaHtml = valNota > 0
                        ? moeda(valNota) + (n.qtd_notas > 1 ? ' <span class="badge bg-light text-dark" title="'+n.qtd_notas+' notas agregadas">+'+(n.qtd_notas-1)+'</span>' : '')
                        : '<span class="text-muted">-</span>';

                    // % desconto sobre valor da nota
                    var pct = (n.pct_desc === null || n.pct_desc === undefined) ? null : parseFloat(n.pct_desc);
                    var pctHtml = '<span class="text-muted">-</span>';
                    if (pct !== null) {
                        var corPct = pct >= 20 ? 'color:#dc2626;font-weight:700'
                                   : (pct >= 10 ? 'color:#d97706;font-weight:600' : '');
                        pctHtml = '<span style="'+corPct+'">'+num1(pct)+'%</span>';
                    }

                    // Numero da nota
                    var nrNota = parseInt(n.nr_nota||0, 10);
                    var nrNotaHtml = nrNota > 0
                        ? '<span title="Nota '+nrNota+(n.serie_nota?' / serie '+esc(n.serie_nota):'')+'">'+nrNota+'</span>'
                        : '<span class="text-muted">-</span>';

                    return '<tr class="lib-row-detail" data-seq="'+n.cod_seq+'" style="'+rowStyle+'" title="Clique pra ver detalhes completos">'
                         + '<td class="small">'+esc(n.data)+' '+esc(n.hora)+'</td>'
                         + '<td>'+tipoBadge+'</td>'
                         + '<td class="fw-bold">'+esc(contra)+'</td>'
                         + '<td class="small">'+cliente+'</td>'
                         + '<td class="small">'+msgHtml+'</td>'
                         + '<td class="small">'+obsHtml+'</td>'
                         + '<td class="text-end">'+(n.valor_solic > 0 ? moeda(n.valor_solic) : '-')+'</td>'
                         + '<td class="text-end text-muted">'+(n.valor_permit > 0 ? moeda(n.valor_permit) : '-')+'</td>'
                         + '<td class="text-end" style="'+spreadCor+'">'+(n.spread > 0 ? moeda(n.spread) : '-')+'</td>'
                         + '<td class="text-end small">'+valNotaHtml+'</td>'
                         + '<td class="text-end small">'+pctHtml+'</td>'
                         + '<td class="text-center small">'+nrNotaHtml+'</td>'
                         + '<td class="text-center">'+stBadge+'</td>'
                         + '</tr>'
                         + '<tr class="lib-detail-pane" data-pane-for="'+n.cod_seq+'" style="display:none">'
                         + '  <td colspan="13" style="padding:0">'
                         + '    <div class="lib-detail-body" style="background:rgba(0,0,0,.02);padding:1rem 1.25rem;border-top:2px solid var(--pbi-accent,#3b82f6)">'
                         + '      <div class="text-muted small"><i class="bi bi-hourglass-split me-1"></i>Carregando detalhes...</div>'
                         + '    </div>'
                         + '  </td>'
                         + '</tr>';
                }).join('');
                tb.querySelectorAll('.lib-row-detail').forEach(function(tr){
                    tr.addEventListener('click', function(){ toggleDetalhe(tr); });
                });
            })
            .catch(function(){ tb.innerHTML='<tr><td colspan="13" class="text-danger text-center p-3">Erro de rede.</td></tr>'; });
    }

    // -----------------------------------------------------------------------
    // Aba "Perfil" do drill-down — KPIs grandes + 4 ECharts + tabela top
    // (Depto de Engenharia e Automacao - Master Automacao - Autor: Derlivon Silva)
    // -----------------------------------------------------------------------
    var perfilCharts = {};
    function disposeChart(id){
        try { if (perfilCharts[id]) { perfilCharts[id].dispose(); perfilCharts[id]=null; } } catch(e){}
    }
    function initChart(id){
        disposeChart(id);
        var el = document.getElementById(id);
        if (!el || typeof echarts === 'undefined') return null;
        var c = echarts.init(el);
        perfilCharts[id] = c;
        return c;
    }

    function ativarTab(tab){
        document.querySelectorAll('#lib-drill-tabs a[data-tab]').forEach(function(a){
            a.classList.toggle('active', a.getAttribute('data-tab') === tab);
        });
        var perfil = document.getElementById('lib-drill-tab-perfil');
        var indiv  = document.getElementById('lib-drill-tab-individuais');
        if (perfil) perfil.style.display = (tab === 'perfil')      ? '' : 'none';
        if (indiv)  indiv.style.display  = (tab === 'individuais') ? '' : 'none';
        // ECharts precisa de resize quando o container ganha tamanho
        if (tab === 'perfil') {
            setTimeout(function(){
                Object.keys(perfilCharts).forEach(function(k){
                    try { perfilCharts[k] && perfilCharts[k].resize(); } catch(e){}
                });
            }, 50);
        }
    }

    function carregarPerfil(nome, papel){
        var url = '/api/auditoria/liberacoes-caixa/perfil?codigo='+encodeURIComponent(nome)
                + '&papel='+encodeURIComponent(papel)
                + '&data_ini='+encodeURIComponent(dataIni)
                + '&data_fim='+encodeURIComponent(dataFim);
        if (tipoSel !== null) url += '&tipo='+tipoSel;

        var kpisBox = document.getElementById('lib-drill-kpis-perfil');
        if (kpisBox) kpisBox.innerHTML = '<div class="col-12 text-muted small"><i class="bi bi-hourglass-split me-1"></i>Carregando perfil...</div>';
        ['lib-drill-heatmap','lib-drill-evolucao','lib-drill-mix-tipo','lib-drill-status','lib-drill-acessos'].forEach(disposeChart);

        fetch(url, {credentials:'same-origin'})
            .then(function(r){ return r.json(); })
            .then(function(j){
                if (!j.ok) {
                    if (kpisBox) kpisBox.innerHTML = '<div class="col-12 text-danger small"><i class="bi bi-exclamation-triangle me-1"></i>'+esc(j.erro||'erro')+'</div>';
                    return;
                }
                renderPerfilKpis(j, papel);
                renderPerfilAlerta(j);
                renderHeatmap(j.heatmap || []);
                renderEvolucao(j.evolucao || []);
                renderMixTipo(j.mix_tipo || []);
                renderStatus(j.status_dist || []);
                renderAcessos(j.top_acessos || []);
                renderTopClientes(j.top_clientes || [], (j.kpis_pessoa && j.kpis_pessoa.qtd) || 0);
                renderTopMensagens(j.top_mensagens || [], (j.kpis_pessoa && j.kpis_pessoa.qtd) || 0);
            })
            .catch(function(e){
                if (kpisBox) kpisBox.innerHTML = '<div class="col-12 text-danger small">Erro de rede ao carregar perfil.</div>';
            });
    }

    function renderPerfilKpis(j, papel){
        // v3: 6 KPIs revistos
        //   1. Qtd Total Liberações (todos os tipos)
        //   2. Qtd Desconto (TIPO=1)
        //   3. Desconto R$ (SUM DESCONTO WHERE TIPO=1) — dinheiro real
        //   4. Autorizado R$ (SUM DESCONTO WHERE TIPO IN 2,3) — fatura/limite, NAO saida
        //   5. Ticket Desconto (Desconto R$ / Qtd Desconto, "-" se Qtd Desconto = 0)
        //   6. vs Média da Loja (Ticket Desconto do caixa / Ticket Desconto médio loja, em %)
        var box = document.getElementById('lib-drill-kpis-perfil');
        if (!box) return;
        var kp = j.kpis_pessoa || {};
        var kl = j.kpis_loja   || {};
        var qtd      = kp.qtd || 0;
        var qtdDesc  = kp.qtd_desconto || 0;
        var valDesc  = kp.val_desconto_real || 0;
        var valAut   = kp.val_autorizado || 0;
        var tic      = (kp.ticket_desconto !== null && kp.ticket_desconto !== undefined) ? kp.ticket_desconto : null;

        // delta ticket vs loja (ticket alto = pior — caixa concede valor maior que média)
        var ticL = kl.ticket_medio_loja || 0;
        var deltaHtml;
        if (tic === null || tic === 0 || ticL <= 0) {
            deltaHtml = '<div class="fw-bold text-muted" style="font-size:1.4rem">-</div>'
                      + '<div class="text-muted" style="font-size:.7rem">sem desconto pra comparar</div>';
        } else {
            var delta = ((tic - ticL)/ticL*100);
            var deltaCor = delta > 0 ? '#dc2626' : '#16a34a';
            var deltaArrow = delta > 0 ? 'bi-caret-up-fill' : (delta < 0 ? 'bi-caret-down-fill' : 'bi-dash');
            deltaHtml = '<div class="fw-bold" style="font-size:1.4rem;color:'+deltaCor+'">'
                      +   '<i class="bi '+deltaArrow+'"></i> '+num1(Math.abs(delta))+'%'
                      + '</div>'
                      + '<div class="text-muted" style="font-size:.7rem">Ticket Desconto vs média da loja</div>';
        }

        function card(label, valor, hint, hintTip){
            var tipAttr = hintTip ? ' data-bs-toggle="tooltip" title="'+esc(hintTip)+'"' : '';
            return '<div class="col-6 col-md-2"'+tipAttr+'>'
                +    '<div class="pbi-card p-3 h-100">'
                +      '<div class="small text-muted">'+label+'</div>'
                +      '<div class="fw-bold" style="font-size:1.4rem">'+valor+'</div>'
                +      (hint ? '<div class="text-muted" style="font-size:.7rem">'+hint+'</div>' : '')
                +    '</div>'
                +  '</div>';
        }

        var ticketStr = (tic === null || tic === 0) ? '-' : moeda(tic);
        var valDescStr = valDesc > 0 ? moeda(valDesc) : '-';
        var valAutStr  = valAut  > 0 ? moeda(valAut)  : '-';

        box.innerHTML =
              card('Qtd Liberações', num0(qtd), (papel === 'supervisor' ? 'autorizações totais' : 'pedidos totais'),
                   'Total de liberações de todos os tipos (pagamento + desconto + fatura + crédito)')
            + card('Qtd Desconto', num0(qtdDesc), 'TIPO=1',
                   'Quantidade de liberações de Desconto (TIPO=1)')
            + card('Desconto R$', valDescStr, 'dinheiro real',
                   'Soma dos descontos concedidos (TIPO=1) — valor que efetivamente saiu do caixa')
            + card('Autorizado R$', valAutStr, 'fatura + limite',
                   'Soma de autorizações TIPO=2 (fatura atrasada) + TIPO=3 (limite de crédito). NÃO é saída de caixa.')
            + card('Ticket Desconto', ticketStr, 'Desconto R$ ÷ Qtd Desconto',
                   'Ticket Desconto = Desconto R$ ÷ Qtd Desconto. Exibe "-" quando não houve nenhum desconto.')
            + '<div class="col-6 col-md-2">'
            +   '<div class="pbi-card p-3 h-100">'
            +     '<div class="small text-muted">vs Média da Loja</div>'
            +     deltaHtml
            +   '</div>'
            + '</div>';
    }

    function renderPerfilAlerta(j){
        var al = j.alerta || {};
        var motivos = al.motivos || [];
        var badge = document.getElementById('lib-drill-alerta-badge');
        if (!badge) return;
        if (!motivos.length) { badge.style.display='none'; badge.innerHTML=''; return; }
        var nivel = al.nivel || 'atencao';
        var cls = (nivel === 'alerta') ? 'bg-danger' : 'bg-warning text-dark';
        badge.style.display = 'inline-block';
        badge.className = 'badge ms-2 ' + cls;
        badge.title = motivos.join(' | ');
        badge.innerHTML = '<i class="bi bi-exclamation-triangle-fill me-1"></i>ALERTA ('+motivos.length+')';
    }

    var DIAS_SEM = ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'];
    function renderHeatmap(cells){
        var c = initChart('lib-drill-heatmap'); if (!c) return;
        var data = [], maxQ = 0;
        cells.forEach(function(o){
            data.push([o.hora, o.dia, o.qtd, o.valor]);
            if (o.qtd > maxQ) maxQ = o.qtd;
        });
        c.setOption({
            tooltip:{
                position:'top',
                formatter:function(p){
                    return DIAS_SEM[p.value[1]]+' '+String(p.value[0]).padStart(2,'0')+'h<br/>'
                         + '<b>'+num0(p.value[2])+'</b> liberações<br/>'
                         + moeda(p.value[3]);
                }
            },
            grid:{ left:50, right:20, top:20, bottom:30, containLabel:true },
            xAxis:{ type:'category', data:Array.from({length:24}, function(_,i){return String(i).padStart(2,'0')+'h';}), splitArea:{show:true} },
            yAxis:{ type:'category', data:DIAS_SEM, splitArea:{show:true} },
            visualMap:{
                min:0, max:Math.max(1, maxQ),
                calculable:true, orient:'horizontal', left:'center', bottom:0,
                inRange:{ color:['#fff7ed','#fed7aa','#fb923c','#dc2626'] }
            },
            series:[{ type:'heatmap', data:data, label:{show:false} }]
        });
    }

    function renderEvolucao(lista){
        var c = initChart('lib-drill-evolucao'); if (!c) return;
        var datas = lista.map(function(o){ return o.data; });
        var qtds  = lista.map(function(o){ return o.qtd; });
        var vals  = lista.map(function(o){ return o.valor; });
        var opt = {
            tooltip:{ trigger:'axis' },
            legend:{ data:['Quantidade','Valor R$'], top:0 },
            grid:{ left:50, right:60, top:30, bottom:30, containLabel:true },
            xAxis:{ type:'category', data:datas, axisLabel:{ rotate:30, formatter:function(v){
                var p = (v||'').split('-'); return p.length===3 ? p[2]+'/'+p[1] : v;
            }}},
            yAxis:[
                { type:'value', name:'Qtd',   position:'left',  axisLine:{lineStyle:{color:'#3b82f6'}} },
                { type:'value', name:'R$',    position:'right', axisLine:{lineStyle:{color:'#f97316'}}, splitLine:{show:false} }
            ],
            series:[
                { name:'Quantidade', type:'line', smooth:true, yAxisIndex:0, data:qtds, itemStyle:{color:'#3b82f6'}, areaStyle:{color:'rgba(59,130,246,.12)'} },
                { name:'Valor R$',   type:'line', smooth:true, yAxisIndex:1, data:vals, itemStyle:{color:'#f97316'} }
            ]
        };
        if (datas.length > 30) {
            opt.dataZoom = [{ type:'slider', height:18, bottom:0, start:Math.max(0, 100 - (30/datas.length*100)), end:100 }];
            opt.grid.bottom = 50;
        }
        c.setOption(opt);
    }

    function renderMixTipo(lista){
        var c = initChart('lib-drill-mix-tipo'); if (!c) return;
        var dados = lista.map(function(o){
            var info = TIPOS[o.tipo] || { nome:'?', cor:'#94a3b8' };
            return { name:info.nome, value:o.qtd, itemStyle:{color:info.cor}, valor:o.valor };
        });
        c.setOption({
            tooltip:{ trigger:'item', formatter:function(p){
                return p.name+'<br/><b>'+num0(p.value)+'</b> liberações ('+num1(p.percent)+'%)<br/>'+moeda(p.data.valor||0);
            }},
            legend:{ bottom:0, orient:'horizontal' },
            series:[{
                type:'pie', radius:['45%','75%'], center:['50%','45%'],
                avoidLabelOverlap:true,
                label:{ formatter:function(p){ return p.percent>=5 ? num1(p.percent)+'%' : ''; }, fontSize:11 },
                data: dados
            }]
        });
    }

    function renderStatus(lista){
        var c = initChart('lib-drill-status'); if (!c) return;
        var qtdL = 0, qtdX = 0;
        lista.forEach(function(o){ if ((o.status||'').toUpperCase()==='L') qtdL += o.qtd; else qtdX += o.qtd; });
        var tot = qtdL + qtdX;
        var taxa = tot > 0 ? (qtdL/tot*100) : 0;
        c.setOption({
            title:{ text:'Taxa de liberação: '+num1(taxa)+'%', left:'center', textStyle:{fontSize:12, fontWeight:600} },
            tooltip:{ trigger:'item', formatter:function(p){
                var pct = tot > 0 ? (p.value/tot*100) : 0;
                return p.seriesName+': <b>'+num0(p.value)+'</b> ('+num1(pct)+'%)';
            }},
            grid:{ left:10, right:10, top:40, bottom:10, containLabel:false },
            xAxis:{ type:'value', show:false, max:tot || 1 },
            yAxis:{ type:'category', data:[''], show:false },
            series:[
                { name:'Liberado', type:'bar', stack:'a', data:[qtdL], itemStyle:{color:'#16a34a'},
                  label:{ show:qtdL>0, formatter:num0(qtdL)+' liberados', position:'inside', color:'#fff', fontWeight:600 } },
                { name:'Negado/Outro', type:'bar', stack:'a', data:[qtdX], itemStyle:{color:'#94a3b8'},
                  label:{ show:qtdX>0, formatter:num0(qtdX)+' outros', position:'inside', color:'#fff', fontWeight:600 } }
            ]
        });
    }

    function renderAcessos(lista){
        var c = initChart('lib-drill-acessos'); if (!c) return;
        var nomes = lista.map(function(o){ return o.acesso || '-'; }).reverse();
        var qtds  = lista.map(function(o){ return o.qtd; }).reverse();
        c.setOption({
            tooltip:{ trigger:'axis', axisPointer:{type:'shadow'} },
            grid:{ left:10, right:30, top:10, bottom:10, containLabel:true },
            xAxis:{ type:'value' },
            yAxis:{ type:'category', data:nomes, axisLabel:{ fontSize:11 } },
            series:[{ type:'bar', data:qtds, itemStyle:{color:'#6366f1'}, label:{show:true, position:'right', formatter:'{c}'} }]
        });
    }

    function renderTopClientes(lista, qtdTotal){
        var box = document.getElementById('lib-drill-top-clientes');
        var badge = document.getElementById('lib-drill-concentracao-badge');
        if (!box) return;
        if (!lista.length) { box.innerHTML = '<div class="text-muted small p-2">Sem dados.</div>'; if (badge) badge.style.display='none'; return; }
        // Detecta concentracao alta
        var concentrouAlto = false;
        var html = '<div style="height:100%;overflow-y:auto"><table class="pbi-table table-sm" style="margin:0;font-size:.78rem">'
                 + '<thead><tr><th style="width:28px">#</th><th>Cliente</th><th class="text-end">Qtd</th><th class="text-end">Valor</th></tr></thead><tbody>';
        lista.forEach(function(c, i){
            var pct = qtdTotal > 0 ? (c.qtd/qtdTotal*100) : 0;
            if (pct >= 25) concentrouAlto = true;
            var bg = pct >= 25 ? 'background:rgba(220,38,38,.08)' : '';
            var corPct = pct >= 25 ? 'color:#dc2626;font-weight:700' : 'color:var(--pbi-text-muted)';
            html += '<tr style="cursor:pointer;'+bg+'" data-cli="'+c.cod_pessoa+'" class="lib-drill-cli-row" title="Clique para filtrar este cliente na aba Liberações individuais">'
                 +    '<td class="text-muted">'+(i+1)+'</td>'
                 +    '<td>'+esc(c.nome || ('cód. '+c.cod_pessoa))+'<div style="'+corPct+'" class="small">'+num1(pct)+'% do total</div></td>'
                 +    '<td class="text-end fw-bold">'+num0(c.qtd)+'</td>'
                 +    '<td class="text-end">'+moeda(c.valor)+'</td>'
                 +  '</tr>';
        });
        html += '</tbody></table></div>';
        box.innerHTML = html;
        if (badge) badge.style.display = concentrouAlto ? 'inline-block' : 'none';
        // Click pra filtrar na aba individuais
        box.querySelectorAll('.lib-drill-cli-row').forEach(function(tr){
            tr.addEventListener('click', function(){
                var cod = parseInt(tr.getAttribute('data-cli')||'0', 10);
                if (!cod) return;
                ativarTab('individuais');
                // destaca linhas do cliente
                document.querySelectorAll('#lib-drill-body tr.lib-row-detail').forEach(function(r){
                    var match = r.querySelector('td:nth-child(4)');
                    // simples: nao filtra (sem cod_pessoa no DOM), apenas rola pra tabela
                });
                document.getElementById('lib-drill-tab-individuais').scrollIntoView({behavior:'smooth', block:'start'});
            });
        });
    }

    function renderTopMensagens(lista, qtdTotal){
        var box = document.getElementById('lib-drill-top-mensagens');
        if (!box) return;
        if (!lista.length) { box.innerHTML = '<div class="text-muted small p-2">Sem mensagens.</div>'; return; }
        box.innerHTML = lista.map(function(m){
            var pct = qtdTotal > 0 ? (m.qtd/qtdTotal*100) : 0;
            var txt = (m.mensagem || '-');
            var trunc = txt.length > 120 ? txt.substring(0,120)+'...' : txt;
            return '<div class="pbi-card p-2 mb-2" style="border-left:3px solid var(--pbi-accent,#3b82f6)">'
                 +   '<div class="fw-bold small" title="'+esc(txt)+'">'+esc(trunc)+'</div>'
                 +   '<div class="text-muted" style="font-size:.7rem">'+num0(m.qtd)+' liberações · '+num1(pct)+'% do total</div>'
                 + '</div>';
        }).join('');
    }

    // Delegação de clique nas tabs
    document.querySelectorAll('#lib-drill-tabs a[data-tab]').forEach(function(a){
        a.addEventListener('click', function(ev){
            ev.preventDefault();
            ativarTab(a.getAttribute('data-tab'));
        });
    });

    function toggleDetalhe(tr){
        var seq = tr.getAttribute('data-seq');
        var pane = document.querySelector('.lib-detail-pane[data-pane-for="'+seq+'"]');
        if (!pane) return;
        if (pane.style.display === 'none') {
            // fecha qualquer outro painel aberto
            document.querySelectorAll('.lib-detail-pane').forEach(function(p){ p.style.display='none'; });
            pane.style.display = '';
            carregarDetalhe(seq, pane.querySelector('.lib-detail-body'));
        } else {
            pane.style.display = 'none';
        }
    }

    function carregarDetalhe(seq, body){
        fetch('/api/auditoria/liberacoes-caixa/info?cod_seq='+seq, {credentials:'same-origin'})
            .then(function(r){ return r.json(); })
            .then(function(j){
                if (!j.ok){ body.innerHTML = '<div class="text-danger small"><i class="bi bi-exclamation-triangle me-1"></i>'+esc(j.erro||'erro')+'</div>'; return; }
                renderDetalhe(body, j);
            })
            .catch(function(e){ body.innerHTML = '<div class="text-danger small">Erro de rede.</div>'; });
    }

    function renderDetalhe(body, j){
        var lib = j.liberacao;
        var cli = j.cliente;
        var fin = j.financeiro;
        var hist = j.historico;
        var notas = j.notas || [];
        var html = '<div class="row g-3">';

        // CLIENTE
        if (cli) {
            var doc = cli.cpf || cli.cnpj || '-';
            var contato = [];
            if (cli.fone) contato.push('📞 ' + esc(cli.fone));
            if (cli.cel)  contato.push('📱 ' + esc(cli.cel));
            html += '<div class="col-12 col-md-6">'
                 + '<div class="pbi-card h-100" style="border-left:3px solid #3b82f6">'
                 +   '<div class="pbi-card-header"><i class="bi bi-person-circle me-2 text-accent"></i>Cliente</div>'
                 +   '<div class="p-3">'
                 +     '<div class="fw-bold" style="font-size:1.05rem">'+esc(cli.nome)+'</div>'
                 +     '<div class="small text-muted">Código: '+cli.cod_pessoa+'  ·  Doc: '+esc(doc)+'</div>'
                 +     (contato.length ? '<div class="small mt-2">'+contato.join('  ·  ')+'</div>' : '')
                 +     '<div class="mt-2"><span class="badge bg-light text-dark">Limite cadastrado: <strong>'+moeda(cli.limite)+'</strong></span></div>'
                 +   '</div>'
                 + '</div>'
                 + '</div>';
        }

        // FINANCEIRO
        if (fin) {
            var alertaFin = fin.saldo_vencido > 0 ? 'border-left:3px solid #dc2626' : 'border-left:3px solid #16a34a';
            html += '<div class="col-12 col-md-6">'
                 + '<div class="pbi-card h-100" style="'+alertaFin+'">'
                 +   '<div class="pbi-card-header"><i class="bi bi-cash-stack me-2"></i>Situação financeira</div>'
                 +   '<div class="p-3">'
                 +     '<div class="row g-2">'
                 +       '<div class="col-4"><div class="small text-muted">Em aberto</div><div class="fw-bold">'+num0(fin.qtd_titulos)+' títulos</div></div>'
                 +       '<div class="col-4"><div class="small text-muted">Saldo</div><div class="fw-bold">'+moeda(fin.saldo_total)+'</div></div>'
                 +       '<div class="col-4"><div class="small text-muted">Vencido</div><div class="fw-bold '+(fin.saldo_vencido>0?'text-danger':'')+'">'+moeda(fin.saldo_vencido)+'</div></div>'
                 +     '</div>'
                 +     (fin.dias_atraso > 0 ? '<div class="mt-2"><span class="badge bg-danger">Em atraso há '+fin.dias_atraso+' dias</span></div>' : '<div class="mt-2"><span class="badge bg-success">Sem atraso</span></div>')
                 +   '</div>'
                 + '</div>'
                 + '</div>';
        }

        // HISTÓRICO de liberações desse cliente
        if (hist && hist.total > 0) {
            html += '<div class="col-12 col-md-6">'
                 + '<div class="pbi-card h-100" style="border-left:3px solid #f59e0b">'
                 +   '<div class="pbi-card-header"><i class="bi bi-clock-history me-2 text-warning"></i>Histórico desse cliente</div>'
                 +   '<div class="p-3">'
                 +     '<div class="fw-bold" style="font-size:1.15rem">'+num0(hist.total)+' liberações solicitadas</div>'
                 +     '<div class="small text-muted mt-1">'
                 +       '💳 Pgto: '+num0(hist.por_tipo[0])+'  ·  '
                 +       '💰 Desconto: '+num0(hist.por_tipo[1])+'  ·  '
                 +       '📅 Fatura: '+num0(hist.por_tipo[2])+'  ·  '
                 +       '🏦 Crédito: '+num0(hist.por_tipo[3])
                 +     '</div>'
                 +     (hist.total >= 20 ? '<div class="mt-2"><span class="badge bg-warning text-dark">Cliente recorrente — investigar</span></div>' : '')
                 +   '</div>'
                 + '</div>'
                 + '</div>';
        }

        // NOTAS GERADAS NO DIA (provável venda resultante)
        if (notas.length) {
            html += '<div class="col-12 col-md-6">'
                 + '<div class="pbi-card h-100" style="border-left:3px solid #8b5cf6">'
                 +   '<div class="pbi-card-header"><i class="bi bi-receipt me-2" style="color:#8b5cf6"></i>Venda gerada no mesmo dia</div>'
                 +   '<div class="p-3">'
                 +     notas.map(function(n){
                            var statusBadge = n.cancelada
                                ? '<span class="badge bg-danger ms-1">cancelada '+esc(n.data_canc)+'</span>'
                                : '<span class="badge bg-success ms-1">efetivada</span>';
                            return '<div class="d-flex justify-content-between align-items-start mb-2">'
                                 + '<div>'
                                 +   '<div class="small text-muted">Nota '+n.nr_nota+' / '+esc(n.serie||'-')+statusBadge+'</div>'
                                 +   '<div class="small">'+esc(n.op_descr||('Op '+n.op_cod))+'</div>'
                                 + '</div>'
                                 + '<div class="text-end">'
                                 +   '<div class="fw-bold">'+moeda(n.total)+'</div>'
                                 +   (n.desconto > 0 ? '<div class="small text-danger">desc: '+moeda(n.desconto)+'</div>' : '')
                                 + '</div>'
                                 + '</div>';
                          }).join('')
                 +   '</div>'
                 + '</div>'
                 + '</div>';
        } else if (cli) {
            html += '<div class="col-12 col-md-6">'
                 + '<div class="pbi-card h-100" style="border-left:3px solid #94a3b8">'
                 +   '<div class="pbi-card-header"><i class="bi bi-receipt me-2 text-muted"></i>Venda gerada</div>'
                 +   '<div class="p-3 text-muted small"><i class="bi bi-info-circle me-1"></i>Nenhuma nota emitida nesse dia pra esse cliente. A liberação não resultou em venda.</div>'
                 + '</div>'
                 + '</div>';
        }

        // BLOCO DA LIBERAÇÃO (rodapé com dados completos + atalhos)
        // Tipo por extenso + ícone
        var tiposLabel = {
            0: {nome:'Pagamento',         icone:'bi-credit-card-2-front', cor:'#3b82f6'},
            1: {nome:'Desconto',          icone:'bi-percent',             cor:'#16a34a'},
            2: {nome:'Fatura Atrasada',   icone:'bi-calendar-x',          cor:'#dc2626'},
            3: {nome:'Limite de Crédito', icone:'bi-bank',                cor:'#f59e0b'}
        };
        var tInfo = tiposLabel[lib.tipo] || {nome:'Tipo '+lib.tipo, icone:'bi-question-circle', cor:'#64748b'};

        // Data + hora formatados pt-BR (dd/mm/aaaa HH:MM:SS)
        // lib.data vem ISO (YYYY-MM-DD) e lib.hora pode vir HH:MM:SS, HH:MM:SS.0000 ou "1899-12-30 HH:MM:SS"
        function fmtDataHoraBR(d, h){
            var dataBR = '-';
            if (d && /^\d{4}-\d{2}-\d{2}/.test(d)) {
                var p = d.substring(0,10).split('-');
                dataBR = p[2]+'/'+p[1]+'/'+p[0];
            }
            var horaBR = '';
            if (h) {
                var hs = String(h);
                var m = hs.match(/(\d{2}):(\d{2}):(\d{2})/);
                if (m) horaBR = m[1]+':'+m[2]+':'+m[3];
                else {
                    m = hs.match(/(\d{2}):(\d{2})/);
                    if (m) horaBR = m[1]+':'+m[2]+':00';
                }
            }
            return dataBR + (horaBR ? ' às '+horaBR : '');
        }
        var dataHoraStr = fmtDataHoraBR(lib.data, lib.hora);

        // Cliente — nome (código) + telefone se houver
        var clienteLinha = '';
        if (cli) {
            var telCli = cli.cel || cli.fone || '';
            clienteLinha = '<div><strong>Cliente:</strong> '+esc(cli.nome)+' <span class="text-muted">(cód. '+cli.cod_pessoa+')</span>'
                         + (telCli ? '  <span class="text-muted">· 📞 '+esc(telCli)+'</span>' : '')
                         + '</div>';
        }

        // Valores (somente quando for Desconto — tipo 1)
        var valoresLinha = '';
        if (lib.tipo === 1) {
            valoresLinha = '<div class="row g-2 mt-1">'
                         +   '<div class="col-6 col-md-3"><div class="small text-muted">Solicitado</div><div class="fw-bold">'+moeda(lib.valor_solic||0)+'</div></div>'
                         +   '<div class="col-6 col-md-3"><div class="small text-muted">Permitido</div><div class="fw-bold">'+moeda(lib.valor_permit||0)+'</div></div>'
                         + '</div>';
        }

        // Nota vinculada (heurística: mesmo dia + mesmo cliente + mesma empresa)
        var notaBloco = '';
        if (notas && notas.length > 0) {
            var n0 = notas[0];
            var pct = (n0.total > 0) ? Math.round((n0.desconto / n0.total) * 100) : 0;
            notaBloco  = '<div class="mt-2 pt-2 border-top">'
                       +   '<div><strong>Nota vinculada:</strong> N° '+n0.nr_nota+' (Série '+esc(n0.serie||'-')+')'
                       +     (n0.cancelada ? ' <span class="badge bg-danger ms-1">cancelada</span>' : '')
                       +   '</div>'
                       +   '<div class="small mt-1">'
                       +     'Valor original: <strong>'+moeda(n0.total)+'</strong>'
                       +     (n0.desconto > 0 ? '  ·  Desconto aplicado: <strong class="text-danger">'+moeda(n0.desconto)+' ('+pct+'%)</strong>' : '')
                       +   '</div>'
                       +   (notas.length > 1 ? '<div class="small text-muted mt-1"><i class="bi bi-info-circle me-1"></i>Vinculada a '+notas.length+' notas no mesmo dia (mostrando a mais recente).</div>' : '')
                       + '</div>';
        }

        // Observação completa (sem truncar)
        var obsBloco = '';
        if (lib.obs) {
            obsBloco = '<div class="mt-2 pt-2 border-top">'
                     +   '<div class="small text-muted mb-1"><strong>Observação:</strong></div>'
                     +   '<div class="small" style="white-space:pre-wrap;word-break:break-word">'+esc(lib.obs)+'</div>'
                     + '</div>';
        }

        // Botões de atalho pros perfis
        var btnCaixa = '';
        var btnSup   = '';
        if (lib.solicitante) {
            btnCaixa = '<button type="button" class="btn btn-sm btn-outline-info" data-perfil-caixa="'+esc(lib.solicitante)+'">'
                     +   '<i class="bi bi-person-badge me-1"></i>Ver perfil do caixa '+esc(lib.solicitante)
                     + '</button>';
        }
        if (lib.supervisor) {
            btnSup   = '<button type="button" class="btn btn-sm btn-outline-success" data-perfil-sup="'+esc(lib.supervisor)+'">'
                     +   '<i class="bi bi-shield-check me-1"></i>Ver perfil do supervisor '+esc(lib.supervisor)
                     + '</button>';
        }

        html += '<div class="col-12">'
             + '<div class="pbi-card" style="border-left:3px solid '+tInfo.cor+'">'
             +   '<div class="pbi-card-header"><i class="bi '+tInfo.icone+' me-2" style="color:'+tInfo.cor+'"></i>Dados da liberação <span class="badge ms-2" style="background:'+tInfo.cor+';color:#fff">'+esc(tInfo.nome)+'</span></div>'
             +   '<div class="p-3 small">'
             +     '<div class="row g-2">'
             +       '<div class="col-12 col-md-6"><strong>Data/Horário:</strong> '+esc(dataHoraStr)+'</div>'
             +       '<div class="col-12 col-md-6"><strong>Status:</strong> '+(lib.status==='L'?'<span class="badge bg-success">Liberado</span>':'<span class="badge bg-secondary">'+esc(lib.status)+'</span>')+'</div>'
             +     '</div>'
             +     clienteLinha
             +     valoresLinha
             +     '<div class="mt-2"><strong>Mensagem:</strong> '+esc(lib.mensagem||'-')+'</div>'
             +     notaBloco
             +     obsBloco
             +     '<div class="text-muted mt-2 pt-2 border-top">'
             +       'Caixa solicitante: <strong>'+esc(lib.solicitante)+'</strong>  ·  '
             +       'Supervisor: <strong>'+esc(lib.supervisor)+'</strong>  ·  '
             +       'Recurso bloqueado: <code>'+esc(lib.acesso)+'</code>'
             +     '</div>'
             +     ((btnCaixa || btnSup) ? '<div class="mt-3 d-flex flex-wrap gap-2">'+btnCaixa+btnSup+'</div>' : '')
             +   '</div>'
             + '</div>'
             + '</div>';

        html += '</div>';
        body.innerHTML = html;

        // Atalhos pro perfil do caixa / supervisor — reaproveita drillDownOperador / drillDownSupervisor
        var btCx = body.querySelector('[data-perfil-caixa]');
        if (btCx) {
            btCx.addEventListener('click', function(){
                var nome = btCx.getAttribute('data-perfil-caixa');
                if (typeof drillDownOperador === 'function') drillDownOperador(nome);
            });
        }
        var btSp = body.querySelector('[data-perfil-sup]');
        if (btSp) {
            btSp.addEventListener('click', function(){
                var nome = btSp.getAttribute('data-perfil-sup');
                if (typeof drillDownSupervisor === 'function') drillDownSupervisor(nome);
            });
        }
    }

    document.getElementById('lib-drill-close').addEventListener('click', function(){ document.getElementById('lib-drilldown').style.display='none'; });
    document.getElementById('btnLibAtualizar').addEventListener('click', carregar);
    carregar();
})();
</script>
