/* ─────────────────────────────────────────────────────────────
   AgriFlow — Painel de Metas

   Mesma linguagem visual do design system dos relatórios (ADR 0012): um
   número de meta e um número de relatório precisam parecer o mesmo tipo de
   número — são, por construção, medidos pela mesma SQL (ADR 0016).

   Os tokens são redeclarados aqui em vez de reusar os `--rpt-*`: este
   arquivo também é carregado pelo Dashboard, que não carrega
   relatorios.css, e depender de token inexistente dá tela sem cor nenhuma.
   Os valores são os mesmos de propósito; divergir deles é o bug a evitar.

   Próprio daqui é a escala de progresso: quatro faixas, uma cor cada. A
   quarta (`super`) existe porque estourar a meta é resultado diferente de
   batê-la, e é essa diferença que o gerente procura na tela.
   ───────────────────────────────────────────────────────────── */

:root {
    --mt-bg:        #F8FAFC;
    --mt-surface:   #FFFFFF;
    --mt-line:      #E2E8F0;
    --mt-line-soft: #F1F5F9;
    --mt-ink:       #1E293B;
    --mt-ink-sub:   #64748B;
    --mt-ink-faint: #94A3B8;
    --mt-green:     #163832;
    --mt-green-deep:#0F2620;
    --mt-accent:    #10B981;
    --mt-gold:      #C8A227;
    --mt-red:       #DC2626;
    --mt-radius:    10px;
    --mt-shadow:    0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .05);
    --mt-shadow-md: 0 1px 3px rgba(15, 23, 42, .04), 0 10px 26px rgba(15, 23, 42, .07);
    /* Escala de progresso */
    --mt-baixo: #DC2626;
    --mt-meio:  #D97706;
    --mt-ok:    #10B981;
    --mt-super: #C8A227;   /* ouro da marca: passar de 100% é conquista */
}

/* ── Barra de período ─────────────────────────────────────── */
.mt-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.mt-bar-mes {
    height: 38px; padding: 0 12px; font-family: 'Inter', sans-serif; font-size: 13px;
    font-weight: 600; color: var(--mt-ink); background: var(--mt-surface);
    border: 1px solid var(--mt-line); border-radius: 8px; outline: none;
}
.mt-bar-mes:focus { border-color: var(--mt-accent); }
.mt-bar-fill { flex: 1; }

/* ── Faixa-resumo do período (só ADM) ─────────────────────── */
.mt-resumo {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px; margin-bottom: 20px;
}
.mt-resumo:empty { display: none; }
.mt-resumo-card {
    min-width: 0; position: relative; overflow: hidden;
    background: var(--mt-surface); border: 1px solid var(--mt-line);
    border-radius: var(--mt-radius); padding: 12px 14px 12px 17px;
}
.mt-resumo-card::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
    background: var(--mt-accent);
}
/* Rótulo e valor empilhados, valor sem quebra e card com overflow:hidden —
   mesmo orçamento de largura dos KPIs do relatório (ADR 0012). */
.mt-resumo-lbl {
    display: block; font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; color: var(--mt-ink-faint);
    margin: 0 0 4px; overflow-wrap: anywhere;
}
.mt-resumo-val {
    display: block; font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 800;
    color: var(--mt-ink); line-height: 1.15; font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Grade de painéis ─────────────────────────────────────── */
/* auto-fill e trilha mínima de 300px, não auto-fit: com dois vendedores,
   auto-fit esticaria cada cartão até meia tela e a barra de progresso de
   uma meta viraria um outdoor. Ver a mesma decisão nos KPIs (ADR 0012). */
.mt-grade {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px; align-items: start;
}

/* ── Cartão de uma pessoa ─────────────────────────────────── */
.mt-painel {
    min-width: 0; background: var(--mt-surface); border: 1px solid var(--mt-line);
    border-radius: var(--mt-radius); box-shadow: var(--mt-shadow); overflow: hidden;
}
.mt-painel-destaque { box-shadow: var(--mt-shadow-md); }
.mt-painel-head {
    display: flex; align-items: center; gap: 11px;
    padding: 14px 16px; border-bottom: 1px solid var(--mt-line-soft);
}
.mt-avatar {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: var(--mt-green); color: #fff;
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 800;
}
.mt-ident { flex: 1; min-width: 0; }
.mt-nome {
    font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 700;
    color: var(--mt-ink); line-height: 1.2; margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mt-sub {
    font-family: 'Inter', sans-serif; font-size: 11px; color: var(--mt-ink-sub);
    margin: 2px 0 0;
}
.mt-add {
    flex-shrink: 0; background: var(--mt-green); color: var(--mt-gold);
    border: none; border-radius: 7px; padding: 7px 11px; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 700;
    transition: background .18s;
}
.mt-add:hover { background: var(--mt-green-deep); }

/* ── Linha de progresso ───────────────────────────────────── */
.mt-linhas { padding: 6px 16px 16px; }
.mt-linha { padding: 12px 0; border-bottom: 1px solid var(--mt-line-soft); }
.mt-linha:last-child { border-bottom: none; }
.mt-linha-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.mt-tipo {
    flex: 1; min-width: 0; font-family: 'Inter', sans-serif; font-size: 11px;
    font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--mt-ink-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mt-pct {
    font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 800;
    font-variant-numeric: tabular-nums; line-height: 1;
}

/* Trilho e barra. A barra para em 100% (metas-ui.js `barra`); acima disso
   quem informa é o número, em ouro, e o brilho no fim do trilho. */
.mt-trilho { height: 8px; background: var(--mt-line); border-radius: 99px; overflow: hidden; }
.mt-barra { display: block; height: 100%; border-radius: 99px; transition: width .7s cubic-bezier(.4, 0, .2, 1); }
.mt-linha-foot {
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 7px;
    font-family: 'Inter', sans-serif; font-size: 11.5px; color: var(--mt-ink-sub);
}
.mt-real { font-weight: 800; color: var(--mt-ink); font-variant-numeric: tabular-nums; }
.mt-alvo { font-variant-numeric: tabular-nums; }
.mt-resta, .mt-ok { margin-left: auto; font-weight: 700; }
.mt-ok { color: #047857; }

/* Cor por faixa — um seletor por estado, sem style inline de cor. */
.mt-linha[data-faixa="baixo"] .mt-pct,
.mt-linha[data-faixa="baixo"] .mt-resta { color: var(--mt-baixo); }
.mt-linha[data-faixa="baixo"] .mt-barra { background: var(--mt-baixo); }
.mt-linha[data-faixa="meio"] .mt-pct,
.mt-linha[data-faixa="meio"] .mt-resta { color: var(--mt-meio); }
.mt-linha[data-faixa="meio"] .mt-barra { background: var(--mt-meio); }
.mt-linha[data-faixa="ok"] .mt-pct { color: var(--mt-ok); }
.mt-linha[data-faixa="ok"] .mt-barra { background: var(--mt-ok); }
.mt-linha[data-faixa="super"] .mt-pct { color: #A9871F; }
.mt-linha[data-faixa="super"] .mt-barra {
    background: linear-gradient(90deg, var(--mt-ok) 0%, var(--mt-super) 100%);
    box-shadow: 0 0 8px rgba(200, 162, 39, .55);
}

/* ── Ações do gerente ─────────────────────────────────────── */
.mt-acoes { display: flex; gap: 4px; flex-shrink: 0; }
.mt-icon {
    width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
    background: var(--mt-bg); border: 1px solid var(--mt-line); border-radius: 6px;
    color: var(--mt-ink-sub); cursor: pointer; font-size: 13px; line-height: 1; transition: .16s;
}
.mt-icon:hover { border-color: var(--mt-accent); color: var(--mt-green); }
.mt-icon-danger:hover { border-color: var(--mt-red); color: var(--mt-red); }

/* ── Estados ──────────────────────────────────────────────── */
.mt-vazio {
    display: flex; flex-direction: column; gap: 4px; padding: 18px 0 6px;
    font-family: 'Inter', sans-serif; font-size: 12px; color: var(--mt-ink-sub);
}
.mt-vazio strong { font-size: 13px; color: var(--mt-ink); }
.mt-verlink { display: inline-block; margin-top: 8px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: var(--mt-accent); text-decoration: none; }
.mt-aviso {
    background: var(--mt-surface); border: 1px solid var(--mt-line);
    border-left: 3px solid var(--mt-gold); border-radius: var(--mt-radius);
    padding: 18px 20px; font-family: 'Inter', sans-serif; font-size: 13px;
    color: var(--mt-ink-sub); line-height: 1.55;
}
.mt-aviso strong { display: block; font-size: 15px; color: var(--mt-ink); margin-bottom: 4px; }
.mt-flash { padding: 11px 15px; border-radius: 9px; margin-bottom: 14px; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; }
.mt-flash-ok { background: #ECFDF5; color: #065F46; }
.mt-flash-erro { background: #FEF2F2; color: #991B1B; }

@media (max-width: 640px) {
    .mt-grade { grid-template-columns: 1fr; }
    .mt-bar-mes { flex: 1; }
}