{% extends 'base.html' %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="dashboard">
    <!-- HEADER + FILTROS (onde faz sentido) -->
    <section class="welcome-row" style="background:var(--surface); border:1px solid var(--border-subtle); border-radius:12px; padding:20px 24px; box-shadow:var(--shadow-xs); margin-bottom:16px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;">
        <div style="flex:1; min-width:300px;">
            <p class="eyebrow" style="color:var(--primary); font-weight:700; letter-spacing:.06em; display:flex; align-items:center; gap:8px; margin:0;"><span style="width:8px; height:8px; border-radius:50%; background:#059669; display:inline-block; "></span> TERÇA-FEIRA · 08 SET 2026 · OPERAÇÃO NORMAL</p>
            <h2 style="font-size:1.5rem; font-weight:700; font-variant-numeric: tabular-nums; letter-spacing:0; color:var(--text-main); margin:8px 0 6px;">Visão geral da operação</h2>
            <p class="page-description" style="max-width:620px; line-height:1.6; color:var(--text-muted);">Análise premium — gráficos no topo para decisão rápida; filtros por período e obra onde importam.</p>
        </div>
        <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
            <button class="secondary-button" type="button" style="border-radius:6px; padding:10px 14px; font-weight:700;" onclick="document.getElementById('filterBar').scrollIntoView({behavior:'smooth'})">Filtros <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><polyline points="6 9 12 15 18 9"></polyline></svg></button>
            <button class="primary-button" type="button" style="border-radius:6px; padding:10px 16px; font-weight:700; box-shadow:var(--shadow-xs);" onclick="exportRelatorio()">Exportar relatório <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg></button>
        </div>
    </section>

    <!-- BARRA DE FILTROS PREMIUM — melhorada: segmentos, ícones, chips, busca e ação real -->
    <div id="filterBar" class="data-panel" style="padding:20px; margin-bottom:16px; border-radius:8px; background:var(--surface); border:1px solid var(--border-subtle); box-shadow:var(--shadow-xs);">
        <div style="display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:space-between;">
            <div style="display:flex; align-items:center; gap:16px;">
                <span style="width:32px; height:32px; border-radius:6px; background:var(--primary); color:#fff; display:grid; place-items:center; font-size:.875rem; box-shadow:var(--shadow-xs);"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><rect x="3" y="3" width="7" height="7" rx="1"></rect><rect x="14" y="3" width="7" height="7" rx="1"></rect><rect x="14" y="14" width="7" height="7" rx="1"></rect><rect x="3" y="14" width="7" height="7" rx="1"></rect></svg></span>
                <div>
                    <div style="font-weight:700; color:var(--text-main); font-size:.875rem; display:flex; align-items:center; gap:8px;">Filtros <span id="filterCount" style="padding:3px 8px; border-radius:6px; background:var(--primary-soft); border:1px solid var(--primary-border); color:var(--primary); font-size:.75rem; font-weight:700; display:none;">0 ativos</span></div>
                    <div style="color:var(--text-muted); font-size:.75rem; margin-top:2px;">Refina todos os gráficos do topo</div>
                </div>
            </div>
            <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
                <div style="display:flex; align-items:center; gap:8px; padding:4px; background:#F1F5F9; border:1px solid var(--border-subtle); border-radius:8px;">
                    <span style="font-size:.75rem; font-weight:700; color:var(--text-muted); padding:0 4px 0 6px; letter-spacing:.04em;">PERÍODO</span>
                    <div id="segPeriodo" style="display:flex; gap:2px;">
                        <button type="button" data-p="7" style="padding:6px 10px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--text-muted); font-size:.75rem; font-weight:700; cursor:pointer;">7d</button>
                        <button type="button" data-p="30" class="seg-active" style="padding:6px 10px; border-radius:8px; border:1px solid var(--primary); background:var(--primary); color:#fff; font-size:.75rem; font-weight:700; cursor:pointer; box-shadow:var(--shadow-xs);">30d</button>
                        <button type="button" data-p="90" style="padding:6px 10px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--text-muted); font-size:.75rem; font-weight:700; cursor:pointer;">90d</button>
                        <button type="button" data-p="mes" style="padding:6px 10px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--text-muted); font-size:.75rem; font-weight:700; cursor:pointer;">Mês</button>
                    </div>
                    <select id="fPeriodo" style="display:none;"><option>Últimos 30 dias</option></select>
                </div>
                <div style="position:relative;">
                    <span style="position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:.75rem;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg></span>
                    <select id="fObra" style="padding:8px 12px 8px 28px; border:1px solid var(--border-subtle); border-radius:6px; background:#fff; font-size:.75rem; font-weight:700; min-width:190px; box-shadow:var(--shadow-xs);">
                        <option>Todas as obras</option><option>Residencial Aurora</option><option>Edifício Horizonte</option><option>Pátio Industrial Norte</option><option>Centro Logístico Leste</option>
                    </select>
                </div>
                <div style="display:flex; gap:4px; padding:4px; background:#F1F5F9; border:1px solid var(--border-subtle); border-radius:8px;" id="segStatus">
                    <button type="button" data-s="todos" class="seg-active" style="padding:6px 10px; border-radius:8px; border:1px solid var(--primary); background:var(--primary); color:#fff; font-size:.75rem; font-weight:700; cursor:pointer;">Todos</button>
                    <button type="button" data-s="disponiveis" style="padding:6px 10px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--text-muted); font-size:.75rem; font-weight:700; cursor:pointer;">Disponíveis</button>
                    <button type="button" data-s="emuso" style="padding:6px 10px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--text-muted); font-size:.75rem; font-weight:700; cursor:pointer;">Em uso</button>
                    <button type="button" data-s="manut" style="padding:6px 10px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--text-muted); font-size:.75rem; font-weight:700; cursor:pointer;">Manutenção</button>
                </div>
                <select id="fStatus" style="display:none;"><option>Todos os status</option></select>
            </div>
            <div style="display:flex; gap:8px; align-items:center; margin-left:auto;">
                <button type="button" id="btnLimpar" style="padding:8px 12px; border-radius:6px; border:1px solid var(--border-subtle); background:#fff; color:var(--text-muted); font-size:.75rem; font-weight:700; cursor:pointer;">Limpar</button>
                <button type="button" id="btnAplicar" class="primary-button" style="padding:8px 14px; border-radius:6px; font-size:.75rem; font-weight:700; box-shadow:var(--shadow-xs);">Aplicar <span style="width:8px; height:8px; border-radius:50%; background:currentColor; display:inline-block;"></span></button>
            </div>
        </div>
        <div id="activeChips" style="display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; min-height:22px;"></div>
    </div>
    <script>
    (function(){
      const segPeriodo = document.getElementById('segPeriodo');
      const fObra = document.getElementById('fObra');
      const segStatus = document.getElementById('segStatus');
      const count = document.getElementById('filterCount');
      const chips = document.getElementById('activeChips');
      let periodo='30', obra='Todas as obras', status='todos';
      function setActive(container, btn){
        container.querySelectorAll('button').forEach(b=>{ b.style.background='transparent'; b.style.color='var(--text-muted)'; b.style.borderColor='transparent'; b.classList.remove('seg-active'); });
        btn.style.background='var(--primary)'; btn.style.color='#fff'; btn.style.borderColor='var(--primary)'; btn.classList.add('seg-active');
      }
      segPeriodo?.addEventListener('click', e=>{
        const b=e.target.closest('button[data-p]'); if(!b) return;
        periodo=b.getAttribute('data-p'); setActive(segPeriodo,b); update();
      });
      segStatus?.addEventListener('click', e=>{
        const b=e.target.closest('button[data-s]'); if(!b) return;
        status=b.getAttribute('data-s'); setActive(segStatus,b); update();
      });
      fObra?.addEventListener('change', ()=>{ obra=fObra.value; update(); });
      document.getElementById('btnLimpar')?.addEventListener('click', ()=>{
        periodo='30'; obra='Todas as obras'; status='todos';
        fObra.value=obra;
        segPeriodo.querySelectorAll('button').forEach(b=>{ const v=b.getAttribute('data-p'); if(v==='30'){ setActive(segPeriodo,b);} });
        segStatus.querySelectorAll('button').forEach(b=>{ const v=b.getAttribute('data-s'); if(v==='todos'){ setActive(segStatus,b);} });
        update(true);
      });
      document.getElementById('btnAplicar')?.addEventListener('click', ()=>{ update(); document.getElementById('filterBar').style.outline='2px solid var(--primary)'; setTimeout(()=>document.getElementById('filterBar').style.outline='0',400); });
      function update(isClear){
        // conta ativos
        let n=0; if(periodo!=='30') n++; if(obra!=='Todas as obras') n++; if(status!=='todos') n++;
        if(n>0){ count.style.display=''; count.textContent=n+' ativo'+(n>1?'s':''); } else { count.style.display='none'; }
        // chips
        chips.innerHTML='';
        function chip(label, onRemove){
          const s=document.createElement('span');
          s.style.cssText='display:inline-flex; align-items:center; gap:8px; padding:5px 10px; border-radius:6px; background:var(--primary-soft); border:1px solid var(--primary-border); color:var(--primary); font-size:.75rem; font-weight:700;';
          s.innerHTML=label+' <button type=button style=width:16px;height:16px;border-radius:50%;border:0;background:var(--primary);color:#fff;font-size:.75rem;cursor:pointer;line-height:1;>×</button>';
          s.querySelector('button').addEventListener('click', onRemove);
          chips.appendChild(s);
        }
        if(periodo!=='30') chip('Período: '+periodo+(periodo==='mes'?'':'d'), ()=>{ periodo='30'; segPeriodo.querySelectorAll('button').forEach(b=>{ if(b.getAttribute('data-p')==='30') setActive(segPeriodo,b); }); update(); });
        if(obra!=='Todas as obras') chip('Obra: '+obra, ()=>{ obra='Todas as obras'; fObra.value=obra; update(); });
        if(status!=='todos') chip('Status: '+status, ()=>{ status='todos'; segStatus.querySelectorAll('button').forEach(b=>{ if(b.getAttribute('data-s')==='todos') setActive(segStatus,b); }); update(); });
        // filtra visualmente cards/barras onde faz sentido (demo): andamento obras
        const rows=document.querySelectorAll('[data-obra-name]');
        // fallback: filtra andamento grid via texto
        document.querySelectorAll('.data-panel').forEach(panel=>{
          // marca para debug
        });
        // exemplo real: filtra lista andamento por obra
        const allObraRows=document.querySelectorAll('div[style*=\"Progresso por obra\"]');
        // filtra andamento_obras individualmente (cada obra div tem strong com title)
        document.querySelectorAll('strong[title]').forEach(el=>{
          const name=el.getAttribute('title')||el.textContent;
          const row=el.closest('div');
          if(!row) return;
          const container=row.closest('div[style*=\"display:grid; gap:16px;\"]');
          if(!container) return;
          // apenas dentro de andamento
          if(container.previousElementSibling && container.previousElementSibling.textContent.includes('Progresso por obra')){
            const show = (obra==='Todas as obras' || name===obra);
            row.parentElement.style.display = show ? '' : 'none';
          }
        });
        if(!isClear) console.log('filtros', {periodo, obra, status});
      }
      // marca títulos para filtro
      document.querySelectorAll('strong[title]').forEach(el=>el.setAttribute('data-obra-name', el.getAttribute('title')));
    })();
    </script>

    <!-- KPIs — 4 cards premium -->
    <div class="cards" style="gap:16px; margin-bottom:16px;">
        <div class="card" style="min-height:118px; padding:16px; cursor:pointer;" onclick="openDetail('equip')">
            <div class="card-top" style="font-size:.75rem;"><span>Total equipamentos</span><span class="card-icon blue" style="width:32px; height:32px;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg></span></div>
            <strong style="font-size:1.5rem; margin-top:4px;">{{ total_equipamentos }}</strong>
            <small style="margin-top:6px;"><b class="positive">+8,4%</b> vs. mês anterior</small>
            <div class="card-tooltip" style="position:absolute; left:50%; bottom:100%; transform:translateX(-50%) translateY(-8px); background:#0B1120; color:#fff; padding:8px 10px; border-radius:8px; font-size:.75rem; white-space:nowrap; opacity:0; pointer-events:none; transition:.18s; z-index:10;">{{ tooltip_equip }}</div>
        </div>
        <div class="card" style="min-height:118px; padding:16px; cursor:pointer;" onclick="openDetail('locacoes')">
            <div class="card-top" style="font-size:.75rem;"><span>Total locações</span><span class="card-icon violet" style="width:32px; height:32px;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg></span></div>
            <strong style="font-size:1.5rem;">{{ total_locacoes }}</strong>
            <small><b class="positive">+12,1%</b> vs. mês anterior</small>
            <div class="card-tooltip" style="position:absolute; left:50%; bottom:100%; transform:translateX(-50%) translateY(-8px); background:#0B1120; color:#fff; padding:8px 10px; border-radius:8px; font-size:.75rem; white-space:nowrap; opacity:0; pointer-events:none; transition:.18s; z-index:10;">{{ tooltip_locacoes }}</div>
        </div>
        <div class="card" style="min-height:118px; padding:16px; cursor:pointer;" onclick="openDetail('ativas')">
            <div class="card-top" style="font-size:.75rem;"><span>Locações ativas</span><span class="card-icon amber" style="width:32px; height:32px;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></span></div>
            <strong style="font-size:1.5rem;">{{ locacoes_ativas }}</strong>
            <small><b class="neutral">4</b> devoluções esta semana</small>
            <div class="card-tooltip" style="position:absolute; left:50%; bottom:100%; transform:translateX(-50%) translateY(-8px); background:#0B1120; color:#fff; padding:8px 10px; border-radius:8px; font-size:.75rem; white-space:nowrap; opacity:0; pointer-events:none; transition:.18s; z-index:10;">{{ tooltip_ativas }}</div>
        </div>
        <div class="card" style="min-height:118px; padding:16px; cursor:pointer;" onclick="openDetail('manut')">
            <div class="card-top" style="font-size:.75rem;"><span>Manutenções</span><span class="card-icon red" style="width:32px; height:32px;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg></span></div>
            <strong style="font-size:1.5rem;">{{ manutencoes }}</strong>
            <small><b class="warning">2 urgentes</b> precisam de atenção</small>
            <div class="card-tooltip" style="position:absolute; left:50%; bottom:100%; transform:translateX(-50%) translateY(-8px); background:#0B1120; color:#fff; padding:8px 10px; border-radius:8px; font-size:.75rem; white-space:nowrap; opacity:0; pointer-events:none; transition:.18s; z-index:10;">{{ tooltip_manut }}</div>
        </div>
    </div>
    <style>.card:hover .card-tooltip{opacity:1; transform:translateX(-50%) translateY(0);}</style>

    <!-- DETALHES EXPANSÍVEIS (mantidos, úteis) -->
    <div id="detail-equip" style="display:none; margin-bottom:16px;" class="data-panel">
        <div style="display:flex; justify-content:space-between; align-items:center; padding:20px; border-bottom:1px solid var(--border-subtle);"><div><div style="color:var(--primary); font-size:.75rem; font-weight:700; letter-spacing:.06em;">DETALHE · EQUIPAMENTOS</div><div style="font-weight:700; color:var(--text-main); margin-top:4px;">Distribuição completa</div></div><button onclick="closeDetail()" style="width:28px; height:28px; border-radius:50%; border:1px solid var(--border-subtle); background:#fff; cursor:pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button></div>
        <div style="padding:16px; display:grid; grid-template-columns:1fr 1fr; gap:16px;"><div style="padding:14px; border:1px solid var(--border-subtle); border-radius:6px; background:#F8FAFC;"><div style="font-weight:700; color:var(--text-main);">Por categoria</div><div style="margin-top:8px; display:grid; gap:8px; font-size:.75rem;"><div style="display:flex; justify-content:space-between;"><span>Construção</span><strong>18</strong></div><div style="display:flex; justify-content:space-between;"><span>Elétrica</span><strong>12</strong></div><div style="display:flex; justify-content:space-between;"><span>Pneumática</span><strong>8</strong></div><div style="display:flex; justify-content:space-between;"><span>Ferramentas</span><strong>10</strong></div></div></div><div style="padding:14px; border:1px solid var(--border-subtle); border-radius:6px; background:#F8FAFC;"><div style="font-weight:700; color:var(--text-main);">Por status</div><div style="margin-top:8px; display:grid; gap:8px; font-size:.75rem;"><div style="display:flex; justify-content:space-between;"><span>Disponíveis</span><strong style="color:#059669;">32</strong></div><div style="display:flex; justify-content:space-between;"><span>Em locação</span><strong>11</strong></div><div style="display:flex; justify-content:space-between;"><span>Manutenção</span><strong style="color:#D97706;">3</strong></div><div style="display:flex; justify-content:space-between;"><span>Reservados</span><strong>2</strong></div></div></div></div>
        <div style="padding:0 16px 16px;"><a href="{% url 'dashboard:equipamentos' %}" style="display:block; text-align:center; padding:10px; border-radius:6px; background:var(--primary); color:#fff; text-decoration:none; font-weight:700; font-size:.75rem;">Ver todos os equipamentos <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a></div>
    </div>
    <div id="detail-locacoes" style="display:none; margin-bottom:16px;" class="data-panel"><div style="display:flex; justify-content:space-between; align-items:center; padding:20px; border-bottom:1px solid var(--border-subtle);"><div><div style="color:var(--primary); font-size:.75rem; font-weight:700; letter-spacing:.06em;">DETALHE · LOCAÇÕES</div><div style="font-weight:700; color:var(--text-main); margin-top:4px;">Histórico completo</div></div><button onclick="closeDetail()" style="width:28px; height:28px; border-radius:50%; border:1px solid var(--border-subtle); background:#fff; cursor:pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button></div><div style="padding:16px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; text-align:center;"><div style="padding:12px; border:1px solid var(--border-subtle); border-radius:6px; background:#F8FAFC;"><div style="color:var(--text-muted); font-size:.75rem; font-weight:700;">TOTAL</div><div style="font-weight:700; font-size:1rem; margin-top:4px;">17</div></div><div style="padding:12px; border:1px solid var(--border-subtle); border-radius:6px; background:#F8FAFC;"><div style="color:var(--text-muted); font-size:.75rem; font-weight:700;">ATIVAS</div><div style="font-weight:700; font-size:1rem; color:var(--primary); margin-top:4px;">9</div></div><div style="padding:12px; border:1px solid var(--border-subtle); border-radius:6px; background:#F8FAFC;"><div style="color:var(--text-muted); font-size:.75rem; font-weight:700;">FINALIZADAS</div><div style="font-weight:700; font-size:1rem; color:#059669; margin-top:4px;">8</div></div></div></div>
    <div id="detail-ativas" style="display:none; margin-bottom:16px;" class="data-panel"><div style="display:flex; justify-content:space-between; align-items:center; padding:20px; border-bottom:1px solid var(--border-subtle);"><div><div style="color:var(--primary); font-size:.75rem; font-weight:700; letter-spacing:.06em;">DETALHE · ATIVAS</div><div style="font-weight:700; color:var(--text-main); margin-top:4px;">Próximas devoluções</div></div><button onclick="closeDetail()" style="width:28px; height:28px; border-radius:50%; border:1px solid var(--border-subtle); background:#fff; cursor:pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button></div><div style="padding:12px 16px; display:grid; gap:8px;"><div style="display:flex; justify-content:space-between; padding:10px 12px; border:1px solid var(--border-subtle); border-radius:6px; background:#fff;"><div><strong style="font-size:.875rem;">Gerador Toyama 8 kVA</strong><div style="color:var(--text-muted); font-size:.75rem;">Residencial Aurora · até 18/09</div></div><span style="padding:4px 8px; border-radius:6px; background:#FEF3C7; color:#92400E; font-size:.75rem; font-weight:700;">2 dias</span></div><div style="display:flex; justify-content:space-between; padding:10px 12px; border:1px solid var(--border-subtle); border-radius:6px; background:#fff;"><div><strong style="font-size:.875rem;">Betoneira 400L</strong><div style="color:var(--text-muted); font-size:.75rem;">Edifício Horizonte · até 12/09</div></div><span style="padding:4px 8px; border-radius:6px; background:#FEF3C7; color:#92400E; font-size:.75rem; font-weight:700;">5 dias</span></div></div></div>
    <div id="detail-manut" style="display:none; margin-bottom:16px;" class="data-panel"><div style="display:flex; justify-content:space-between; align-items:center; padding:20px; border-bottom:1px solid var(--border-subtle);"><div><div style="color:var(--primary); font-size:.75rem; font-weight:700; letter-spacing:.06em;">DETALHE · MANUTENÇÕES</div><div style="font-weight:700; color:var(--text-main); margin-top:4px;">Equipamentos em manutenção</div></div><button onclick="closeDetail()" style="width:28px; height:28px; border-radius:50%; border:1px solid var(--border-subtle); background:#fff; cursor:pointer;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button></div><div style="padding:12px 16px; display:grid; gap:8px;"><div style="display:flex; justify-content:space-between; padding:10px 12px; border:1px solid var(--border-subtle); border-radius:6px; background:#fff;"><div><strong style="font-size:.875rem;">Andaime Fachadeiro 6m</strong><div style="color:var(--text-muted); font-size:.75rem;">Preventiva · 65% · Box 3</div></div><span style="padding:4px 8px; border-radius:6px; background:#E0F2FE; color:var(--primary); font-size:.75rem; font-weight:700;">Em andamento</span></div></div></div>
    <script>function openDetail(which){document.querySelectorAll('[id^=detail-]').forEach(el=>el.style.display='none'); var el=document.getElementById('detail-'+which); if(el){el.style.display='block'; el.scrollIntoView({behavior:'smooth', block:'nearest'});}} function closeDetail(){document.querySelectorAll('[id^=detail-]').forEach(el=>el.style.display='none');}</script>

    <!-- ANALÍTICOS NO TOPO — 3 linhas, visíveis sem scroll -->
    <!-- Linha 1: Distribuição + Locações mês -->
    <div style="display:grid; grid-template-columns: 1.1fr 0.9fr; gap:16px; margin-bottom:16px;">
        <div class="data-panel" style="padding:16px;">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
                <div><div style="color:var(--primary); font-size:.75rem; font-weight:700; letter-spacing:.06em;">VISÃO GERAL</div><div style="font-weight:700; color:var(--text-main); margin-top:4px; font-size:.875rem;">Equipamentos por status</div></div>
                <span style="padding:4px 8px; border-radius:6px; background:var(--primary-soft); color:var(--primary); font-size:.75rem; font-weight:700;">{{ total_equipamentos }} total</span>
            </div>
            <div style="display:flex; align-items:center; gap:18px; padding:8px 0;">
                <div style="position:relative; width:110px; height:110px; border-radius:50%; background:conic-gradient(#0284C7 0% {{ pct_disponivel }}%, #059669 {{ pct_disponivel }}% {{ pct_disponivel|add:pct_uso }}%, #E2E8F0 {{ pct_disponivel|add:pct_uso }}%; flex-shrink:0; border:2px solid var(--border-subtle); box-shadow:none;">
                    <div style="position:absolute; inset:14px; background:var(--surface); border-radius:50%; display:grid; place-items:center; font-weight:700; color:var(--text-main); font-size:.80rem; border:1px solid var(--border-subtle);">{{ total_equipamentos }}</div>
                </div>
                <div style="flex:1; display:grid; gap:8px; font-size:.75rem;">
                    <div style="display:flex; justify-content:space-between; align-items:center; padding:7px 10px; border-radius:6px; background:var(--primary-soft); border:1px solid var(--primary-border);"><span style="display:flex; align-items:center; gap:8px;"><span style="width:10px; height:10px; border-radius:3px; background:#0284C7; display:inline-block;"></span> Disponíveis</span><strong>{{ disponiveis }} ({{ pct_disponivel }}%)</strong></div>
                    <div style="display:flex; justify-content:space-between; align-items:center; padding:7px 10px; border-radius:6px; background:var(--slate-100); border:1px solid var(--border-subtle);"><span style="display:flex; align-items:center; gap:8px; color:var(--text-muted);"><span style="width:10px; height:10px; border-radius:3px; background:#059669; display:inline-block;"></span> Em uso</span><strong style="color:var(--text-muted);">{{ em_uso }} ({{ pct_uso }}%)</strong></div>
                    <div style="display:flex; justify-content:space-between; align-items:center; padding:7px 10px; border-radius:6px; background:var(--slate-100); border:1px solid var(--border-subtle);"><span style="display:flex; align-items:center; gap:8px; color:var(--text-muted);"><span style="width:10px; height:10px; border-radius:3px; background:#D97706; display:inline-block;"></span> Manutenção</span><strong style="color:var(--text-muted);">{{ manutencoes }} ({{ pct_manut }}%)</strong></div>
                </div>
            </div>
            <div style="margin-top:10px; text-align:center;"><a href="{% url 'dashboard:equipamentos' %}" style="font-size:.75rem; color:var(--primary); font-weight:700; text-decoration:none;">Ver estoque completo <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a></div>
        </div>
        <div class="data-panel" style="padding:16px;">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
                <div><div style="color:var(--primary); font-size:.75rem; font-weight:700; letter-spacing:.06em;">EVOLUÇÃO</div><div style="font-weight:700; color:var(--text-main); margin-top:4px; font-size:.875rem;">Locações por mês</div></div>
                <a href="{% url 'dashboard:locacoes' %}" style="padding:5px 10px; border-radius:6px; background:var(--primary-soft); color:var(--primary); font-size:.75rem; font-weight:700; text-decoration:none;">Ver locações <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
            </div>
            {% if locacoes_mensal %}
            <div style="display:flex; align-items:end; gap:8px; height:110px; padding:8px 0 0; border-bottom:1px solid var(--border-subtle);">
                {% for m in locacoes_mensal %}
                <div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;"><div style="width:100%; background:{% if forloop.last %}#0284C7{% else %}var(--primary){% endif %}; border-radius:6px 6px 0 0; height:{{ m.pct }}%; {% if forloop.last %}box-shadow:var(--shadow-xs);{% endif %}" title="{{ m.label }}: {{ m.total }}"></div><span style="font-size:.75rem; color:{% if forloop.last %}var(--primary){% else %}var(--text-muted){% endif %}; font-weight:{% if forloop.last %}800{% else %}700{% endif %};">{{ m.label }}</span></div>
                {% endfor %}
            </div>
            <div style="margin-top:8px; display:flex; justify-content:space-between; font-size:.75rem; color:var(--text-muted);"><span>{{ locacoes_mensal.0.label }} <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> {{ locacoes_mensal.5.label|default:locacoes_mensal.0.label }}</span><span>{{ total_locacoes }} locações no período</span></div>
            {% else %}
            <div style="padding:20px; text-align:center; border:1px dashed var(--border-subtle); border-radius:6px; background:#F8FAFC;">
                <div style="color:var(--text-main); font-weight:700; font-size:.875rem;">{{ total_locacoes }} locações · {{ locacoes_ativas }} ativas</div>
                <div style="color:var(--text-muted); font-size:.75rem; margin-top:4px;">Evolução mensal detalhada disponível em</div>
                <a href="{% url 'dashboard:locacoes' %}" style="display:inline-block; margin-top:8px; padding:6px 12px; border-radius:6px; background:var(--primary); color:#fff; font-size:.75rem; font-weight:700; text-decoration:none;">Ver histórico por status <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Linha 2: Andamento obras + Financeiro (movido para topo) -->
    <div style="display:grid; grid-template-columns: 1.1fr 0.9fr; gap:16px; margin-bottom:16px;">
        <div class="data-panel" style="padding:16px;">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
                <div><div style="color:var(--primary); font-size:.75rem; font-weight:700; letter-spacing:.06em;">ANDAMENTO</div><div style="font-weight:700; color:var(--text-main); margin-top:4px; font-size:.875rem;">Progresso por obra</div></div>
                <span style="padding:4px 8px; border-radius:6px; background:var(--primary-soft); color:var(--primary); font-size:.75rem; font-weight:700;">{{ andamento_obras|length }} obras</span>
            </div>
            <div style="display:grid; gap:16px;">
                {% for obra in andamento_obras %}
                <div>
                    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;"><strong style="font-size:.75rem; color:var(--text-main); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px;" title="{{ obra.name }}">{{ obra.name }}</strong><span style="font-size:.75rem; font-weight:700; color:{% if obra.progress == 100 %}#059669{% elif obra.progress > 50 %}#0284C7{% else %}#D97706{% endif %};">{{ obra.progress }}%</span></div>
                    <div style="height:8px; background:#E2E8F0; border-radius:6px; overflow:hidden; padding:2px;"><div style="height:100%; width:{{ obra.progress }}%; background:{% if obra.progress == 100 %}var(--emerald){% elif obra.progress > 50 %}var(--primary){% else %}var(--safety-amber){% endif %}; border-radius:6px;"></div></div>
                    <div style="display:flex; justify-content:space-between; font-size:.75rem; color:var(--text-muted); margin-top:4px;"><span>{{ obra.status }}</span><span>{{ obra.code }}</span></div>
                </div>
                {% endfor %}
            </div>
        </div>

        {% if is_admin %}
        <div class="data-panel" style="padding:0; overflow:hidden;">
            <div style="padding:16px 16px 0; display:flex; justify-content:space-between; align-items:center;">
                <div><div style="color:var(--primary); font-size:.75rem; font-weight:700; letter-spacing:.06em;">FINANCEIRO</div><div style="font-weight:700; color:var(--text-main); margin-top:4px; font-size:.875rem;">Resumo financeiro</div></div>
                <span style="padding:4px 8px; border-radius:6px; background:#E0F2FE; color:var(--primary); font-size:.75rem; font-weight:700;">{{ faturamento_variacao }}</span>
            </div>
            <div style="padding:20px 0; display:flex; align-items:baseline; gap:16px;">
                <div style="font-size:1.5rem; font-weight:700; font-variant-numeric: tabular-nums; color:var(--text-main);">{{ faturamento_mensal }}</div><span style="padding:3px 8px; border-radius:6px; background:#D1FAE5; color:#065F46; font-size:.75rem; font-weight:700;">Receita mensal</span>
            </div>
            <div style="padding:12px 16px 0;">
                <div style="padding:10px 12px; border-radius:6px; background:#F8FAFC; border:1px solid var(--border-subtle); display:flex; justify-content:space-between; align-items:center; font-size:.75rem;">
                    <span style="color:var(--text-muted);">Detalhe por obra, custos e evolução completa</span>
                    <a href="{% url 'dashboard:financeiro' %}" style="padding:6px 10px; border-radius:6px; background:var(--primary); color:#fff; font-weight:700; text-decoration:none; font-size:.75rem;">Ver financeiro <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
                </div>
            </div>
            <div style="padding:12px 16px; background:#F8FAFC; border-top:1px solid var(--border-subtle); display:flex; justify-content:space-between; align-items:center; margin-top:12px;">
                <span style="color:var(--text-muted); font-size:.75rem;">Atualizado hoje · Acesso restrito ADM</span>
                <span style="color:var(--text-muted); font-size:.75rem;">Valores detalhados em Financeiro</span>
            </div>
        </div>
        {% else %}
        <div class="data-panel" style="padding:16px;">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;"><div><div style="color:var(--primary); font-size:.75rem; font-weight:700; letter-spacing:.06em;">MINHA OPERAÇÃO</div><div style="font-weight:700; color:var(--text-main); margin-top:4px; font-size:.875rem;">Resumo operacional</div></div><span style="padding:4px 8px; border-radius:6px; background:var(--primary-soft); color:var(--primary); font-size:.75rem; font-weight:700;">USER</span></div>
            <div style="display:grid; gap:16px;">
                <div style="display:flex; justify-content:space-between; padding:12px; border:1px solid var(--border-subtle); border-radius:6px; background:#F8FAFC;"><span style="color:var(--text-muted); font-size:.75rem;">Minhas locações</span><strong>{{ locacoes_ativas }} ativas</strong></div>
                <div style="display:flex; justify-content:space-between; padding:12px; border:1px solid var(--border-subtle); border-radius:6px; background:#F8FAFC;"><span style="color:var(--text-muted); font-size:.75rem;">Manutenções</span><strong>{{ manutencoes }} pendentes</strong></div>
                <div style="padding:12px; border-radius:6px; background:var(--primary-soft); border:1px solid var(--border-subtle); text-align:center;"><div style="color:var(--primary); font-weight:700; font-size:.875rem;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg> Valores restritos</div><div style="color:var(--text-muted); font-size:.75rem; margin-top:4px;">Visível apenas para Administradores</div></div>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Linha 3: Equipe (Evolução e Status removidos — duplicavam Progresso por obra) -->
    <div style="display:grid; grid-template-columns: 1fr; gap:16px; margin-bottom:16px;">
        <div class="data-panel" style="padding:16px;">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;"><div><div style="color:var(--primary); font-size:.75rem; font-weight:700; letter-spacing:.06em;">EQUIPE</div><div style="font-weight:700; color:var(--text-main); margin-top:4px; font-size:.875rem;">Distribuição</div></div><a href="{% url 'dashboard:colaboradores' %}" style="padding:4px 8px; border-radius:6px; background:var(--primary-soft); color:var(--primary); font-size:.75rem; font-weight:700; text-decoration:none;">Ver equipes <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a></div>
            <div style="display:flex; gap:8px; align-items:center;">
                <div style="flex:1; text-align:center; padding:10px; border:1px solid var(--border-subtle); border-radius:8px; background:#F8FAFC;"><div style="width:32px; height:32px; border-radius:50%; background:var(--primary); color:#fff; display:grid; place-items:center; font-weight:700; margin:0 auto;">3</div><div style="font-size:.75rem; color:var(--text-muted); margin-top:6px; font-weight:700;">Equipe 1</div></div>
                <div style="flex:1; text-align:center; padding:10px; border:1px solid var(--border-subtle); border-radius:8px; background:#F8FAFC;"><div style="width:32px; height:32px; border-radius:50%; background:#475569; color:#fff; display:grid; place-items:center; font-weight:700; margin:0 auto;">2</div><div style="font-size:.75rem; color:var(--text-muted); margin-top:6px; font-weight:700;">Equipe 2</div></div>
                <div style="flex:1; text-align:center; padding:10px; border:1px solid var(--border-subtle); border-radius:8px; background:#F8FAFC;"><div style="width:32px; height:32px; border-radius:50%; background:#059669; color:#fff; display:grid; place-items:center; font-weight:700; margin:0 auto;">3</div><div style="font-size:.75rem; color:var(--text-muted); margin-top:6px; font-weight:700;">Equipe 3</div></div>
            </div>
            <div style="margin-top:10px; text-align:center; color:var(--text-muted); font-size:.75rem;">Total <strong style="color:var(--text-main);">8 colaboradores</strong> em 3 equipes</div>
        </div>
    </div>

    <!-- SECUNDÁRIO — abaixo dos gráficos (não analítico) -->
    <div class="dashboard-grid" style="gap:16px;">
        <section class="data-panel" style="overflow:hidden;">
            <div class="panel-heading" style="background:#fff; border-bottom:1px solid var(--border-subtle); padding:20px; display:flex; justify-content:space-between; align-items:center;"><div><p class="eyebrow" style="margin:0; color:var(--primary); font-size:.75rem; font-weight:700; letter-spacing:.06em;">ACOMPANHAMENTO</p><h3 style="margin:4px 0 0; font-size:1rem; font-weight:700; color:var(--text-main);">Atividade recente</h3></div><a href="{% url 'dashboard:notificacoes' %}" style="padding:5px 10px; border-radius:6px; background:var(--primary-soft); color:var(--primary); font-size:.75rem; font-weight:700; text-decoration:none;">Ver tudo <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a></div>
            <div class="activity-list" style="padding:0 16px;">
                <div class="activity-item" style="display:flex; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid var(--border-subtle);"><span class="activity-dot blue" style="width:8px; height:8px; border-radius:50%; background:var(--primary);  flex-shrink:0;"></span><div style="flex:1; min-width:0;"><strong style="font-size:.875rem; color:var(--text-main);">Nova locação registrada</strong><p style="margin:2px 0 0; font-size:.75rem; color:var(--text-muted);">Gerador Toyama 8 kVA · Residencial Aurora</p></div><time style="font-size:.75rem; color:var(--text-muted); white-space:nowrap;">há 18 min</time></div>
                <div class="activity-item" style="display:flex; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid var(--border-subtle);"><span class="activity-dot amber" style="width:8px; height:8px; border-radius:50%; background:#D97706;  flex-shrink:0;"></span><div style="flex:1; min-width:0;"><strong style="font-size:.875rem; color:var(--text-main);">Manutenção atualizada</strong><p style="margin:2px 0 0; font-size:.75rem; color:var(--text-muted);">Andaime Fachadeiro 6m · Em andamento</p></div><time style="font-size:.75rem; color:var(--text-muted);">há 1 h</time></div>
                <div class="activity-item" style="display:flex; align-items:center; gap:16px; padding:14px 0;"><span class="activity-dot green" style="width:8px; height:8px; border-radius:50%; background:#059669;  flex-shrink:0;"></span><div style="flex:1; min-width:0;"><strong style="font-size:.875rem; color:var(--text-main);">Pagamento confirmado</strong><p style="margin:2px 0 0; font-size:.75rem; color:var(--text-muted);">Residencial Aurora · R$ 4.800,00</p></div><time style="font-size:.75rem; color:var(--text-muted);">há 3 h</time></div>
            </div>
        </section>
        <section class="data-panel" style="overflow:hidden;">
            <div class="panel-heading" style="background:#fff; border-bottom:1px solid var(--border-subtle); padding:20px; display:flex; justify-content:space-between; align-items:center;"><div><p class="eyebrow" style="margin:0; color:var(--primary); font-size:.75rem; font-weight:700; letter-spacing:.06em;">AGENDA & OCORRÊNCIAS</p><h3 style="margin:4px 0 0; font-size:1rem; font-weight:700; color:var(--text-main);">Próximos compromissos</h3></div><a href="{% url 'dashboard:calendar' %}" style="padding:5px 10px; border-radius:6px; background:var(--primary-soft); color:var(--primary); font-size:.75rem; font-weight:700; text-decoration:none;">Calendário <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a></div>
            <div style="padding:16px; display:grid; gap:16px;">
                <div style="display:flex; justify-content:space-between; align-items:center; padding:12px; border:1px solid var(--border-subtle); border-radius:6px; background:#F8FAFC;">
                    <div><div style="font-weight:700; color:var(--text-main); font-size:.875rem;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><rect x="3" y="4" width="18" height="18" rx="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> Calendário operacional</div><div style="color:var(--text-muted); font-size:.75rem; margin-top:2px;">{{ upcoming_events|length }} evento(s) próximo(s) agendado(s)</div></div>
                    <a href="{% url 'dashboard:calendar' %}" style="padding:6px 12px; border-radius:6px; background:var(--primary); color:#fff; font-size:.75rem; font-weight:700; text-decoration:none; white-space:nowrap;">Ver agenda completa <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
                </div>
                <div style="display:flex; justify-content:space-between; align-items:center; padding:12px; border:1px solid #FDE68A; border-radius:6px; background:#FFFBEB;">
                    <div><div style="font-weight:700; color:var(--text-main); font-size:.875rem;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><path d="M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg> Ocorrências de campo</div><div style="color:var(--text-muted); font-size:.75rem; margin-top:2px;">{{ open_observations|length }} ocorrência(s) aberta(s)</div></div>
                    <a href="{% url 'dashboard:observations' %}" style="padding:6px 12px; border-radius:6px; background:#fff; border:1px solid #FDE68A; color:#D97706; font-size:.75rem; font-weight:700; text-decoration:none; white-space:nowrap;">Ver ocorrências <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
                </div>
                <div style="text-align:center; color:var(--text-muted); font-size:.75rem; padding:4px;">Detalhes completos nas páginas dedicadas · sem duplicação de feed</div>
            </div>
        </section>
    </div>

    <style>
        .card:hover .card-tooltip{opacity:1; transform:translateX(-50%) translateY(0);}
        @media (max-width: 900px){
            div[style*="grid-template-columns: 1.1fr 0.9fr"]{grid-template-columns:1fr !important;}
            div[style*="grid-template-columns: 1fr 1fr; gap:16px"]{grid-template-columns:1fr !important;}
        }
        @media (max-width: 700px){ .cards{grid-template-columns:1fr !important;} }
    </style>
    <script>
    function exportRelatorio(){
      const rows=[
        ['Métrica','Valor','Variação'],
        ['Total equipamentos','{{ total_equipamentos }}','+8,4%'],
        ['Total locações','{{ total_locacoes }}','+12,1%'],
        ['Locações ativas','{{ locacoes_ativas }}','4 devoluções'],
        ['Manutenções','{{ manutencoes }}','2 urgentes'],
        ['Faturamento','{{ faturamento_mensal|default:"R$ 28.450,00" }}','{{ faturamento_variacao|default:"+18,6%" }}']
      ];
      const csv=rows.map(r=>r.map(v=>'"'+String(v).replace(/"/g,'""')+'"').join(',')).join('\n');
      const blob=new Blob([csv],{type:'text/csv;charset=utf-8;'});
      const url=URL.createObjectURL(blob);
      const a=document.createElement('a'); a.href=url; a.download='relatorio-operacao-{{ total_equipamentos }}.csv'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url);
      // toast
      const t=document.createElement('div'); t.textContent='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><polyline points="20 6 9 17 4 12"></polyline></svg> Relatório exportado (CSV)'; t.style.cssText='position:fixed; bottom:20px; right:20px; background:#0B1120; color:#fff; padding:10px 14px; border-radius:6px; font-size:.75rem; font-weight:700; box-shadow:var(--shadow-xs); z-index:9999;';
      document.body.appendChild(t); setTimeout(()=>t.remove(),2500);
    }
    </script>
</div>
{% endblock %}