{% extends 'base.html' %}

{% block title %}Equipamentos em Obra | Locadora{% endblock %}

{% block content %}
<!-- HEADER PREMIUM — checklist enterprise -->
<section class="page-header" style="background:var(--surface); border:1px solid var(--border-subtle); border-radius:12px; padding:20px 24px; box-shadow:var(--shadow-xs); 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> ENTERPRISE CHECKLIST · AUDITORIA DE CANTEIRO</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;">Equipamentos em Obra</h2>
        <p class="page-description" style="max-width:640px; line-height:1.6; color:var(--text-muted);">Conferência auditável por obra — status, período e categoria com rastreio, assinatura e impressão homologada.</p>
        <div style="display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;">
            <span style="padding:6px 10px; border-radius:6px; background:var(--primary-soft); border:1px solid var(--primary-border); color:var(--primary); font-size:.75rem; font-weight:700;">{{ checklists|length }} obras ativas</span>
            <span style="padding:6px 10px; border-radius:6px; background:#D1FAE5; border:1px solid #A7F3D0; color:#065F46; font-size:.75rem; font-weight:700;"><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> {{ pct_no }}% conferidos</span>
            <span style="padding:6px 10px; border-radius:6px; background:#F8FAFC; border:1px solid var(--border-subtle); color:var(--text-muted); font-size:.75rem; font-weight:700;">Auditoria em campo</span>
        </div>
    </div>
    <div style="display:flex; gap:16px; align-items:center; flex-shrink:0; flex-wrap:wrap;">
        <a href="{% url 'dashboard:obras' %}" class="secondary-button" style="border-radius:6px; padding:10px 14px; font-weight:700; text-decoration:none;"><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="4" y="2" width="16" height="20" rx="2"></rect><path d="M9 22v-4h6v4"></path><line x1="8" y1="6" x2="8" y2="6"></line><line x1="16" y1="6" x2="16" y2="6"></line><line x1="12" y1="6" x2="12" y2="6"></line></svg> Ver obras</a>
        <button class="primary-button" type="button" style="border-radius:6px; padding:11px 18px; font-weight:700; box-shadow:var(--shadow-xs);" onclick="window.print()"><span style="font-size:1rem;"><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 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect width="12" height="8" x="6" y="14" rx="2"></rect></svg></span> Imprimir checklist</button>
    </div>
</section>

<!-- KPIs PREMIUM — 4 cards enterprise -->
<div class="cards" style="gap:16px; margin-bottom:16px;">
    <div class="card" style="min-height:122px; padding:16px; position:relative; overflow:hidden;">
        <div class="card-top" style="font-size:.75rem; letter-spacing:.06em;"><span>OBRAS COM CHECKLIST</span><span class="card-icon blue" style="width:32px; height:32px; border-radius:6px;"><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="4" y="2" width="16" height="20" rx="2"></rect><path d="M9 22v-4h6v4"></path><line x1="8" y1="6" x2="8" y2="6"></line><line x1="16" y1="6" x2="16" y2="6"></line><line x1="12" y1="6" x2="12" y2="6"></line></svg></span></div>
        <strong style="font-size:1.5rem; margin-top:6px;">{{ checklists|length }}</strong>
        <small style="margin-top:6px; display:flex; align-items:center; gap:8px; color:var(--text-muted);"><span style="padding:2px 6px; border-radius:6px; background:var(--primary-soft); color:var(--primary); font-weight:700; font-size:.75rem;"><span style="width:8px; height:8px; border-radius:50%; background:currentColor; display:inline-block;"></span> Ativo</span> canteiros auditados</small>
        <div style="position:absolute; right:12px; bottom:10px; display:flex; gap:2px; align-items:end; opacity:.9;">
            <span style="width:6px; height:14px; background:#BAE6FD; border-radius:3px;"></span><span style="width:6px; height:18px; background:#7DD3FC; border-radius:3px;"></span><span style="width:6px; height:16px; background:#38BDF8; border-radius:3px;"></span><span style="width:6px; height:22px; background:#0284C7; border-radius:3px;"></span>
        </div>
    </div>
    <div class="card" style="min-height:122px; padding:16px; position:relative;">
        <div class="card-top" style="font-size:.75rem; letter-spacing:.06em;"><span>TOTAL ITENS</span><span class="card-icon violet" style="width:32px; height:32px; border-radius:6px;"><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; color:var(--text-main);">{{ total_itens }}</strong>
        <small style="margin-top:6px; color:var(--text-muted);"><span style="padding:2px 6px; border-radius:6px; background:#F1F5F9; border:1px solid var(--border-subtle); color:var(--text-main); font-weight:700; font-size:.75rem;">{{ media_por_obra }}/obra média</span></small>
        <div style="position:absolute; right:14px; top:14px; padding:4px 8px; border-radius:6px; background:var(--primary-soft); border:1px solid var(--primary-border); color:var(--primary); font-size:.75rem; font-weight:700;">{{ checklists|length }} obras</div>
    </div>
    <div class="card" style="min-height:122px; padding:16px; position:relative; overflow:hidden;">
        <div class="card-top" style="font-size:.75rem; letter-spacing:.06em;"><span>NO CANTEIRO</span><span class="card-icon green" style="width:32px; height:32px; border-radius:6px;"><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></span></div>
        <strong style="font-size:1.5rem; color:#059669;">{{ no_canteiro }}</strong>
        <small style="margin-top:6px; display:flex; align-items:center; gap:8px;"><span style="flex:1; height:4px; background:#D1FAE5; border-radius:4px; overflow:hidden;"><span style="display:block; height:100%; width:{{ pct_no }}%; background:#059669;"></span></span> {{ pct_no }}% conferidos</small>
    </div>
    <div class="card" style="min-height:122px; padding:16px; position:relative;">
        <div class="card-top" style="font-size:.75rem; letter-spacing:.06em;"><span>PENDENTES</span><span class="card-icon amber" style="width:32px; height:32px; border-radius:6px;"><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; color:#D97706;">{{ pendentes }}</strong>
        <small style="margin-top:6px; color:var(--text-muted);"><span style="padding:2px 6px; border-radius:6px; background:#FEF3C7; border:1px solid #FDE68A; color:#92400E; font-weight:700; font-size:.75rem;">a conferir</span> {{ pct_pendente }}%</small>
        <div style="position:absolute; right:14px; top:14px; padding:4px 8px; border-radius:6px; background:#FEF3C7; border:1px solid #FDE68A; color:#D97706; font-size:.75rem; font-weight:700;">{{ pendentes }} itens</div>
    </div>
</div>

<!-- GRÁFICOS PREMIUM — conferência + status -->
<div style="display:grid; grid-template-columns: 1.1fr 0.9fr; gap:16px; margin-bottom:16px;">
    <div class="data-panel" style="padding:18px;">
        <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px;">
            <div>
                <div style="color:var(--primary); font-size:.75rem; font-weight:700; letter-spacing:.06em; display:flex; align-items:center; gap:8px;"><span style="width:8px; height:8px; border-radius:2px; background:var(--primary); display:inline-block;"></span> CONFERÊNCIA</div>
                <div style="font-weight:700; color:var(--text-main); margin-top:6px; font-size:1rem; letter-spacing:0;">Itens por obra</div>
                <div style="color:var(--text-muted); font-size:.75rem; margin-top:4px;">Distribuição auditada por canteiro</div>
            </div>
            <span style="padding:6px 10px; border-radius:6px; background:var(--primary-soft); border:1px solid var(--primary-border); color:var(--primary); font-size:.75rem; font-weight:700;">{{ checklists|length }} obras</span>
        </div>
        <div style="display:grid; gap:16px;">
            {% for cl in checklists %}
            <div style="padding:10px 12px; border:1px solid var(--border-subtle); border-radius:6px; background:var(--surface); display:flex; align-items:center; gap:16px; transition:border-color .14s;" onmouseover="this.style.borderColor='var(--primary)'" onmouseout="this.style.borderColor='var(--border-subtle)'">
                <span style="width:32px; height:32px; border-radius:8px; background:var(--primary-soft); border:1px solid var(--primary-border); color:var(--primary); display:grid; place-items:center; font-weight:700; font-size:.75rem; flex-shrink:0;">{{ cl.code|slice:":2" }}</span>
                <div style="flex:1; min-width:0;">
                    <div style="display:flex; justify-content:space-between; gap:8px; align-items:center;">
                        <span style="font-weight:700; color:var(--text-main); font-size:.875rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ cl.obra }}</span>
                        <strong style="font-size:.875rem; color:var(--primary); flex-shrink:0;">{{ cl.total }} itens</strong>
                    </div>
                    <div style="height:6px; background:#E2E8F0; border-radius:6px; overflow:hidden; margin-top:6px; padding:1.5px;"><div style="height:100%; width:{% widthratio cl.total 12 100 %}%; background:var(--primary); border-radius:6px;"></div></div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    <div class="data-panel" style="padding:18px;">
        <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px;">
            <div>
                <div style="color:var(--primary); font-size:.75rem; font-weight:700; letter-spacing:.06em; display:flex; align-items:center; gap:8px;"><span style="width:8px; height:8px; border-radius:2px; background:#059669; display:inline-block;"></span> STATUS</div>
                <div style="font-weight:700; color:var(--text-main); margin-top:6px; font-size:1rem; letter-spacing:0;">Check no canteiro</div>
                <div style="color:var(--text-muted); font-size:.75rem; margin-top:4px;">{{ pct_no }}% conferidos em campo</div>
            </div>
            <span style="padding:6px 10px; border-radius:6px; background:var(--primary-soft); border:1px solid var(--primary-border); color:var(--primary); font-size:.75rem; font-weight:700;">{{ total_itens }} itens</span>
        </div>
        <div style="display:flex; align-items:center; gap:18px; padding:8px 0;">
            <div style="position:relative; width:108px; height:108px; border-radius:50%; background:var(--slate-100); flex-shrink:0; border:3px solid #fff; box-shadow:none;">
                <div style="position:absolute; inset:14px; background:var(--surface); border-radius:50%; display:grid; place-items:center; border:1px solid var(--border-subtle); box-shadow:var(--shadow-xs);">
                    <div style="text-align:center;"><div style="font-weight:700; color:var(--text-main); font-size:1rem; line-height:1;">{{ total_itens }}</div><div style="color:var(--text-muted); font-size:.75rem; font-weight:700; letter-spacing:.06em; margin-top:2px;">TOTAL</div></div>
                </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:10px 12px; border-radius:6px; background:#ECFDF5; border:1px solid #A7F3D0;">
                    <span style="display:flex; align-items:center; gap:8px; font-weight:700; color:#065F46;"><span style="width:10px; height:10px; border-radius:3px; background:#059669; display:inline-block;"></span> No canteiro</span>
                    <span style="display:flex; align-items:center; gap:8px;"><strong style="color:#065F46;">{{ no_canteiro }}</strong><span style="padding:2px 6px; border-radius:6px; background:#fff; border:1px solid #A7F3D0; color:#059669; font-weight:700; font-size:.75rem;">{{ pct_no }}%</span></span>
                </div>
                <div style="display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:6px; background:#FFFBEB; border:1px solid #FDE68A;">
                    <span style="display:flex; align-items:center; gap:8px; font-weight:700; color:#92400E;"><span style="width:10px; height:10px; border-radius:3px; background:#D97706; display:inline-block;"></span> Pendente</span>
                    <span style="display:flex; align-items:center; gap:8px;"><strong style="color:#92400E;">{{ pendentes }}</strong><span style="padding:2px 6px; border-radius:6px; background:#fff; border:1px solid #FDE68A; color:#D97706; font-weight:700; font-size:.75rem;">{{ pct_pendente }}%</span></span>
                </div>
            </div>
        </div>
        <div style="margin-top:14px; padding:10px 12px; border-radius:6px; background:#F8FAFC; border:1px solid var(--border-subtle); display:flex; align-items:center; justify-content:space-between; font-size:.75rem;">
            <span style="color:var(--text-muted); font-weight:600;"><span style="width:8px; height:8px; border-radius:50%; background:currentColor; display:inline-block;"></span> Auditoria em campo</span>
            <span style="padding:4px 8px; border-radius:6px; background:#fff; border:1px solid var(--border-subtle); color:var(--text-muted); font-weight:700;"><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> conferência física</span>
        </div>
    </div>
</div>

{% for cl in checklists %}
<section class="data-panel" style="margin-bottom:16px; overflow:hidden; border-radius:8px; box-shadow:var(--shadow-xs);">
    <!-- header obra — premium toolbar -->
    <div style="display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-bottom:1px solid var(--border-subtle); background:var(--surface); color:#fff; gap:16px; flex-wrap:wrap;">
        <div style="flex:1; min-width:220px;">
            <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;">
                <span style="width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.75rem;">{{ cl.code|slice:":2" }}</span>
                <span style="padding:5px 10px; border-radius:8px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); color:#E2E8F0; font-size:.75rem; font-weight:700; letter-spacing:.06em;">{{ cl.code }}</span>
                <span style="padding:5px 10px; border-radius:6px; background:#fff; color:#0B1120; font-size:.75rem; font-weight:700;">{{ cl.total }} itens</span>
                <span style="padding:5px 10px; border-radius:6px; background:rgba(16,185,129,.14); border:1px solid rgba(16,185,129,.22); color:#A7F3D0; font-size:.75rem; font-weight:700;"><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> Auditável</span>
            </div>
            <div style="font-weight:700; color:#fff; font-size:1rem; margin-top:8px; letter-spacing:0; display:flex; align-items:center; gap:8px;"><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="4" y="2" width="16" height="20" rx="2"></rect><path d="M9 22v-4h6v4"></path><line x1="8" y1="6" x2="8" y2="6"></line><line x1="16" y1="6" x2="16" y2="6"></line><line x1="12" y1="6" x2="12" y2="6"></line></svg> {{ cl.obra }}</div>
            <div style="color:#94A3B8; font-size:.75rem; margin-top:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;"><span><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> {{ cl.address }}</span><a href="https://www.google.com/maps/search/?api=1&query={{ cl.address|urlencode }}" target="_blank" style="padding:3px 8px; border-radius:6px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:.75rem; font-weight:700; text-decoration:none;"><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> Maps</a></div>
        </div>
        <div style="display:flex; gap:8px; align-items:center; flex-shrink:0; flex-wrap:wrap;">
            <a href="{% url 'dashboard:obra_detail' cl.code %}" style="padding:8px 12px; border-radius:6px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:.75rem; font-weight:700; text-decoration:none;">Ver obra <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>
            <button type="button" onclick="window.print()" style="padding:8px 12px; border-radius:6px; background:#fff; color:#0B1120; font-size:.75rem; font-weight:700; border:0; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.14);"><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 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect width="12" height="8" x="6" y="14" rx="2"></rect></svg> Imprimir obra</button>
        </div>
    </div>
    <!-- toolbar filtros obra -->
    <div style="display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 16px; background:#F8FAFC; border-bottom:1px solid var(--border-subtle); flex-wrap:wrap;">
        <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:.75rem;">
            <span style="padding:5px 10px; border-radius:6px; background:var(--primary-soft); border:1px solid var(--primary-border); color:var(--primary); font-weight:700;">{{ cl.total }} itens no canteiro</span>
            <span style="padding:5px 10px; border-radius:6px; background:#ECFDF5; border:1px solid #A7F3D0; color:#065F46; font-weight:700;"><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> conferência física</span>
            <span style="color:var(--text-muted); font-weight:600;">Toque no checkbox para auditar</span>
        </div>
        <div style="display:flex; gap:8px; align-items:center;">
            <span style="width:8px; height:8px; border-radius:50%; background:#059669; display:inline-block; "></span>
            <span style="font-size:.75rem; color:var(--text-muted); font-weight:700;">Auditado</span>
        </div>
    </div>
    <!-- tabela enterprise auditável -->
    <div style="overflow:auto;">
        <div style="min-width:640px;">
            <div style="display:grid; grid-template-columns: 36px 1.6fr 0.9fr 0.9fr 1fr 56px; gap:0; padding:10px 16px; background:var(--page-bg); border-bottom:1px solid var(--border-subtle); font-size:.75rem; font-weight:700; color:var(--text-muted); letter-spacing:.06em; text-transform:uppercase; position:sticky; top:0;">
                <span style="text-align:center;"><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></span><span>Item / Ferramenta</span><span>Categoria</span><span>Status</span><span>Período</span><span style="text-align:center;">Conf.</span>
            </div>
            {% for item in cl.itens %}
            <label style="display:grid; grid-template-columns: 36px 1.6fr 0.9fr 0.9fr 1fr 56px; gap:0; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border-subtle); background:{% if forloop.counter0|divisibleby:2 %}var(--surface){% else %}#F8FAFC{% endif %}; cursor:pointer; transition:all .14s ease;" onmouseover="this.style.background='var(--primary-soft)'" onmouseout="this.style.background='{% if forloop.counter0|divisibleby:2 %}var(--surface){% else %}#F8FAFC{% endif %}'">
                <span style="display:grid; place-items:center;"><input type="checkbox" {% if item.check %}checked{% endif %} style="width:18px; height:18px; accent-color:var(--primary); cursor:pointer;"></span>
                <span style="min-width:0; padding-right:10px;">
                    <strong style="color:var(--text-main); font-size:.875rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ item.nome }}</strong>
                    <small style="color:var(--text-muted); font-size:.75rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ item.categoria }} · {{ cl.code }}</small>
                </span>
                <span><span style="padding:4px 8px; border-radius:6px; background:#F1F5F9; border:1px solid var(--border-subtle); color:var(--text-main); font-size:.75rem; font-weight:700; white-space:nowrap;">{{ item.categoria }}</span></span>
                <span><span style="padding:5px 8px; border-radius:6px; font-size:.75rem; font-weight:700; border:1px solid; white-space:nowrap; {% if item.status == 'Em locação' or item.status == 'No canteiro' %}background:#E0F2FE; border-color:#BAE6FD; color:#0C4A6E;{% elif item.status == 'Agendado' %}background:#FEF3C7; border-color:#FDE68A; color:#92400E;{% elif item.status == 'Manutenção' %}background:#FEF3C7; border-color:#FDE68A; color:#92400E;{% else %}background:#F1F5F9; border-color:var(--border-subtle); color:var(--text-muted);{% endif %}"><span style="width:8px; height:8px; border-radius:50%; background:currentColor; display:inline-block;"></span> {{ item.status }}</span></span>
                <span style="color:var(--text-muted); font-size:.75rem; font-weight:600; white-space:nowrap;"><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> {{ item.periodo }}</span>
                <span style="text-align:center;"><span style="width:22px; height:22px; border-radius:6px; background:{% if item.check %}#059669{% else %}#fff{% endif %}; border:1px solid {% if item.check %}#059669{% else %}var(--border-subtle){% endif %}; color:{% if item.check %}#fff{% else %}var(--text-faint){% endif %}; display:grid; place-items:center; font-size:.75rem; font-weight:700; margin:0 auto;">{% if item.check %}<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>{% else %}<span style="width:8px; height:8px; border-radius:50%; border:1px solid currentColor; display:inline-block;"></span>{% endif %}</span></span>
            </label>
            {% endfor %}
        </div>
    </div>
    <!-- footer auditável enterprise -->
    <div style="padding:20px; background:#F8FAFC; border-top:1px solid var(--border-subtle); display:grid; grid-template-columns: 1fr auto 1fr; gap:16px; font-size:.75rem; color:var(--text-muted); align-items:end;">
        <div>
            <div style="color:var(--text-main); font-weight:700; font-size:.75rem; letter-spacing:.06em; margin-bottom:8px;">CONFERIDO POR</div>
            <div style="border-bottom:1px solid var(--border-subtle); padding:10px 0 6px; min-height:28px;"></div>
            <div style="margin-top:6px; display:flex; gap:8px; flex-wrap:wrap;"><span style="padding:3px 8px; border-radius:6px; background:#fff; border:1px solid var(--border-subtle); font-weight:600;">Encarregado</span><span style="padding:3px 8px; border-radius:6px; background:var(--primary-soft); border:1px solid var(--primary-border); color:var(--primary); font-weight:700;">Assinatura</span></div>
        </div>
        <div style="text-align:center;">
            <div style="padding:8px 12px; border:1px solid var(--border-subtle); border-radius:6px; background:#fff; font-weight:700; color:var(--text-main); font-size:.875rem; box-shadow:0 1px 2px rgba(15,23,42,.04);">{{ cl.total }} itens auditados</div>
            <div style="margin-top:6px; font-size:.75rem; color:var(--text-muted);">Checklist homologado</div>
        </div>
        <div style="text-align:right;">
            <div style="color:var(--text-main); font-weight:700; font-size:.75rem; letter-spacing:.06em; margin-bottom:8px;">DATA / HORA</div>
            <div style="border-bottom:1px solid var(--border-subtle); padding:10px 0 6px; min-height:28px; text-align:center;">{% now "d/m/Y H:i" %}</div>
            <div style="margin-top:6px; font-size:.75rem; color:var(--text-muted);">{{ cl.address|truncatechars:36 }}</div>
        </div>
    </div>
</section>
{% endfor %}

<!-- ajuda enterprise — 3 colunas -->
<div style="display:grid; grid-template-columns: 1.2fr 0.9fr 0.9fr; gap:16px; margin-top:4px;">
    <section class="data-panel" style="padding:16px; background:var(--primary-soft); border:1px solid var(--primary-border); border-radius:8px;">
        <div style="color:var(--primary); font-size:.75rem; font-weight:700; letter-spacing:.06em; display:flex; align-items:center; gap:8px;"><span style="width:22px; height:22px; border-radius:6px; background:#fff; border:1px solid var(--primary-border); color:var(--primary); display:grid; place-items:center; 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="M9 18h6"></path><path d="M10 22h4"></path><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1.3.5 2.6 1.5 3.5.8.8 1.3 1.5 1.5 2.5"></path></svg></span> Como auditar</div>
        <p style="margin:8px 0 0; color:var(--text-main); font-size:.75rem; line-height:1.6; font-weight:600;">Marque os checkboxes no canteiro, use <strong>Imprimir checklist</strong> por obra e colha assinatura do encarregado. Auditoria fica registrada para ISO e faturamento.</p>
        <div style="margin-top:10px; display:flex; gap:8px; flex-wrap:wrap;"><span style="padding:4px 8px; border-radius:6px; background:#fff; border:1px solid var(--primary-border); color:var(--primary); font-size:.75rem; font-weight:700;"><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> Conferência física</span><span style="padding:4px 8px; border-radius:6px; background:var(--primary); color:#fff; font-size:.75rem; font-weight:700;"><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 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect width="12" height="8" x="6" y="14" rx="2"></rect></svg> Imprimir</span></div>
    </section>
    <section class="data-panel" style="padding:16px; background:#ECFDF5; border:1px solid #A7F3D0; border-radius:8px;">
        <div style="color:#065F46; font-size:.75rem; font-weight:700; letter-spacing:.06em; display:flex; align-items:center; gap:8px;"><span style="width:22px; height:22px; border-radius:6px; background:#fff; border:1px solid #A7F3D0; color:#059669; display:grid; place-items:center; 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;"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg></span> No celular</div>
        <p style="margin:8px 0 0; color:var(--text-muted); font-size:.75rem; line-height:1.6;">Encarregado audita em campo em <code style="padding:2px 6px; border-radius:6px; background:#fff; border:1px solid #A7F3D0; color:#065F46; font-weight:700;">/mobile/obras/</code> — mesmo checklist, offline e assinatura digital.</p>
        <a href="{% url 'mobile:home' %}" target="_blank" style="display:inline-flex; margin-top:10px; padding:7px 12px; border-radius:8px; background:#059669; color:#fff; font-size:.75rem; font-weight:700; text-decoration:none;"><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 width="14" height="20" x="5" y="2" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg> Abrir App Obra <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>
    </section>
    <section class="data-panel" style="padding:16px; background:#FFFBEB; border:1px solid #FDE68A; border-radius:8px;">
        <div style="color:#92400E; font-size:.75rem; font-weight:700; letter-spacing:.06em; display:flex; align-items:center; gap:8px;"><span style="width:22px; height:22px; border-radius:6px; background:#fff; border:1px solid #FDE68A; color:#D97706; display:grid; place-items:center; 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="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg></span> Homologação</div>
        <p style="margin:8px 0 0; color:var(--text-muted); font-size:.75rem; line-height:1.6;">Itens vêm das locações da obra + ferramental padrão. Checklist vale como comprovação de entrega e base para faturamento mensal.</p>
        <div style="margin-top:10px; padding:6px 8px; border-radius:8px; background:#fff; border:1px solid #FDE68A; color:#92400E; font-size:.75rem; font-weight:700; text-align:center;">ISO · Auditoria · Faturamento</div>
    </section>
</div>
{% endblock %}