/* =====================================================
   print.css — Exportação PDF A4 do Dashboard Talkdesk
   v3.0 — imagens de canvas responsivas + fix rodapé duplo
   ===================================================== */

/* ── Botão de exportar (apenas no browser) ───────────── */
#btn-export-pdf {
    float: right;
    margin-right: 8px;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    padding: 0.5rem 1rem;
    color: #6b7280;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}
#btn-export-pdf:hover { border-color: #4ECDC4; color: #4ECDC4; }
#btn-export-pdf svg   { width: 15px; height: 15px; }

/* ─────────────────────────────────────────────────────
   IMPRESSÃO
   ───────────────────────────────────────────────────── */
@media print {

    /* ── Página A4 ───────────────────────────────────── */
    @page {
        size: A4 portrait;
        margin: 10mm 12mm 12mm 12mm;
    }

    /* ── Cores fiéis ─────────────────────────────────── */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* ── Elementos ocultos na impressão ─────────────── */
    #setup-panel, #loading-panel,
    .btn-back, .btn-primary, #btn-export-pdf,
    #drilldown-modal, .info-icon, .kpi-popover, #field-groupby {
        display: none !important;
    }

    body {
        background: #ffffff !important;
        font-family: 'DM Sans', sans-serif;
        font-size: 9pt;
        color: #1a1a2e;
        margin: 0;
        padding: 0;
    }

    #dashboard-panel {
        display: block !important;
        padding: 0 !important;
        width: 100%;
        position: static !important;
    }

    /* ═══ CABEÇALHO ══════════════════════════════════ */
    .dash-header {
        display: flex !important;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 7pt;
        padding-bottom: 5pt;
        border-bottom: 1.5pt solid #4ECDC4;
    }
    .dash-header h1 { font-size: 13pt; font-weight: 600; margin: 0; }
    .dash-meta      { font-size: 7.5pt; color: #6b7280; display: flex; flex-wrap: wrap; gap: 10pt; margin-top: 2pt; }

    /* ═══ TÍTULOS DE SEÇÃO ═══════════════════════════ */
    .section-title {
        font-size: 7.5pt; font-weight: 600; color: #6b7280;
        margin: 7pt 0 3pt; text-transform: uppercase; letter-spacing: 0.06em;
    }

    /* ═══ KPI CARDS ══════════════════════════════════ */
    .kpi-section { break-inside: avoid; page-break-inside: avoid; margin-bottom: 4pt; }

    .kpi-row {
        display: grid !important;
        gap: 0 !important;
        background: #e5e7eb !important;
        border: 0.5pt solid #e5e7eb !important;
        border-radius: 5pt !important;
        overflow: hidden !important;
        margin-bottom: 0 !important;
        page-break-inside: avoid; break-inside: avoid;
    }

    .kpi-section:nth-child(1) .kpi-row { grid-template-columns: repeat(6, 1fr) !important; }
    .kpi-section:nth-child(2) .kpi-row { grid-template-columns: repeat(4, 1fr) !important; }
    .kpi-section:nth-child(3) .kpi-row { grid-template-columns: repeat(4, 1fr) !important; }

    .kpi-card {
        background: #ffffff !important;
        padding: 6pt 5pt !important;
        min-height: auto !important;
        text-align: center;
        break-inside: avoid;
        position: static !important;
        overflow: visible !important;
        transform: none !important;
        box-shadow: none !important;
    }
    .kpi-header   { margin-bottom: 3pt !important; min-height: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; }
    .kpi-label    { font-size: 6.5pt !important; color: #6b7280 !important; font-weight: 500; line-height: 1.3; }
    .kpi-value    { font-size: 15pt !important; font-weight: 400 !important; margin-bottom: 1pt !important; line-height: 1.1; }
    .kpi-subvalue { font-size: 6.5pt !important; color: #6b7280 !important; display: block; }
    #kpi-short-abandoned-sub { font-size: 6.5pt !important; color: #f59e0b !important; font-weight: 500; }

    /* ═══ GRÁFICOS — 1 por linha ═════════════════════ */
    .charts-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 7pt !important;
        margin: 7pt 0 0 !important;
        position: static !important;
    }

    .chart-card {
        background: #ffffff !important;
        border: 0.5pt solid #e5e7eb !important;
        border-radius: 5pt !important;
        padding: 7pt 9pt !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* Anula todos os overrides de grid do JS */
    .chart-bar-sl, .chart-bar-abn, .chart-col-pie,
    .chart-full-hdl, .chart-full-stk, .chart-full-ring,
    [class*="chart-col"], [class*="chart-bar"], [class*="chart-full"] {
        grid-column: unset !important;
        grid-area:   unset !important;
        width: 100%  !important;
    }

    .chart-title {
        font-size: 8pt !important; font-weight: 600;
        margin-bottom: 5pt !important; color: #374151;
        display: block !important; position: static !important;
    }

    /* ── Wraps de canvas ─────────────────────────────
       Deixamos height: auto para que a IMAGEM determine
       a altura — evita cortes e espaços em branco.     */
    .chart-wrap {
        height: auto !important;
        min-height: 100pt !important;
        position: relative !important;
        overflow: visible !important;
    }

    .chart-col-pie .chart-wrap {
        min-height: 140pt !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    #ring-group-chart-wrap,
    #agent-chart-wrap {
        height: auto !important;
        min-height: 80pt !important;
        overflow: visible !important;
    }

    /* ── Canvas original (não substituído) ───────────
       Caso algum canvas não tenha sido convertido em img */
    canvas {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* ── Imagem que substitui o canvas ───────────────
       REGRA CENTRAL: width 100% + height auto garante
       que a imagem se adapta à largura A4 sem cortes.  */
    img.pdf-canvas-snapshot {
        display: block !important;
        width: 100% !important;       /* ocupa toda a largura do card */
        height: auto !important;      /* mantém proporção, sem corte  */
        max-width: 100% !important;
        object-fit: contain !important;
    }

    /* Pie: centraliza a imagem */
    .chart-col-pie img.pdf-canvas-snapshot {
        width: auto !important;
        max-width: 100% !important;
        max-height: 200pt !important;
        margin: 0 auto !important;
    }

    /* Legenda do pie */
    .pie-custom-legend {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4pt 10pt !important;
        font-size: 7pt !important;
        margin-top: 4pt !important;
        position: static !important;
        clear: both !important;
    }

    /* ═══ RODAPÉ — fora dos cards, no fluxo normal ══ */
    .dash-footer,
    #gen-time {
        display: block !important;
        clear: both !important;
        position: static !important;
        z-index: auto !important;
        margin-top: 10pt !important;
        padding-top: 5pt !important;
        border-top: 0.5pt solid #e5e7eb !important;
        font-size: 7pt !important;
        color: #9ca3af !important;
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Evita rodapé duplicado: se #gen-time estiver
       dentro de .dash-footer, o .dash-footer não ganha
       borda/margem extra                               */
    .dash-footer:has(#gen-time) {
        padding-top: 5pt !important;
        border-top: 0.5pt solid #e5e7eb !important;
    }
    .dash-footer #gen-time {
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
    }

}