/*=====================================================
  DASHBOARD — v3

  Isolado de propósito, no mesmo espírito de css/assembleias.css:
  só o que é específico da Dashboard (cards, painéis de gráfico,
  tabelas compactas) fica aqui. Componentes já compartilhados —
  botão (.btn-primary/.btn-secondary), badge (.badge, de
  css/comissoes.css), cartão base (.card, de css/cards.css) e o
  toggle de Tipo (.tipo-toggle/.status-btn, de css/comissoes.css) —
  são REAPROVEITADOS, não redefinidos.

  Projetada para caber em 1920×1080 a 100% de zoom sem precisar de
  scroll (o container #view não tem overflow-y — ver css/layout.css,
  não alterado nesta atualização): cards e painéis são compactos de
  propósito, não é só estética.
=====================================================*/


/* ===========================
   LINHA 1 — 5 CARDS DO TOPO
   (Clientes, Comissão Projetada, Crédito no Mês, Crédito Total,
   Meta do Mês — todos na mesma grade/tamanho). Ticket Médio saiu
   daqui: agora é um dos 3 modos do Gráfico 1 (ver seção de gráficos).
=========================== */

.dashboard-cards-topo{

    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:12px;

    margin-bottom:12px;

}

.dash-card{

    padding:12px 16px;

    display:flex;
    flex-direction:column;

}

.dash-card .card-icon{

    width:32px;
    height:32px;

    border-radius:9px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    margin-bottom:9px;

    position:relative;
    z-index:1;

}

.dash-card .card-icon i{
    width:16px;
    height:16px;
}

/* Ícone grande e apagado no canto — só decoração, reproduzindo a
   referência visual (cada card tem o mesmo ícone do topo, só maior e
   bem sutil, atrás do conteúdo). Cor herdada da variante do card. */
.card-watermark{

    position:absolute;

    right:-10px;
    bottom:-10px;

    width:74px !important;
    height:74px !important;

    opacity:.06;

    pointer-events:none;

}

.dash-card .card-content{

    display:flex;
    flex-direction:column;
    flex:1;

    position:relative;
    z-index:1;

}

.dash-card .card-content > span{

    font-size:11px;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:#888;

    margin-bottom:3px;

}

.dash-card .card-content h2{

    font-size:22px;

    margin-bottom:8px;

}

/* Pílula colorida embaixo do valor — mesmo padrão do .card-chip já
   usado nos cards-resumo de Comissões (css/comissoes.css), só que aqui
   sempre gruda no rodapé do card (margin-top:auto), pra ficar alinhada
   entre os 5 cards mesmo quando o texto acima varia de tamanho. */
.dash-card .card-chip{

    margin-top:auto;

    padding:5px 10px;

    border-radius:8px;

    font-size:11.5px;
    font-weight:600;
    line-height:1.4;

}

/* ===========================
   VARIANTES DE COR
   Mesma paleta já usada nos cards-resumo de Comissões — reaproveitada
   aqui (não inventada) pra a Dashboard ficar visualmente consistente
   com o resto do app.
=========================== */

.dash-card--verde::before{ background:#16a34a; }
.dash-card--verde .card-icon{ background:#16a34a; }
.dash-card--verde .card-content h2{ color:#16a34a; }
.dash-card--verde .card-chip{ background:#dcfce7; color:#15803d; }
.dash-card--verde .card-watermark{ color:#16a34a; }

.dash-card--azul::before{ background:#2563eb; }
.dash-card--azul .card-icon{ background:#2563eb; }
.dash-card--azul .card-content h2{ color:#2563eb; }
.dash-card--azul .card-chip{ background:#dbeafe; color:#1d4ed8; }
.dash-card--azul .card-watermark{ color:#2563eb; }

.dash-card--roxo::before{ background:#7c3aed; }
.dash-card--roxo .card-icon{ background:#7c3aed; }
.dash-card--roxo .card-content h2{ color:#7c3aed; }
.dash-card--roxo .card-chip{ background:#ede9fe; color:#6d28d9; }
.dash-card--roxo .card-watermark{ color:#7c3aed; }

.dash-card--laranja::before{ background:#ea580c; }
.dash-card--laranja .card-icon{ background:#ea580c; }
.dash-card--laranja .card-content h2{ color:#ea580c; }
.dash-card--laranja .card-chip{ background:#ffedd5; color:#c2410c; }
.dash-card--laranja .card-watermark{ color:#ea580c; }

.dash-card--vermelho::before{ background:#8B0000; }
.dash-card--vermelho .card-icon{ background:#8B0000; }
.dash-card--vermelho .card-content h2{ color:#8B0000; }
.dash-card--vermelho .card-chip{ background:#fbe1e6; color:#8B0000; }
.dash-card--vermelho .card-watermark{ color:#8B0000; }

/* O chip do card "Crédito Comercializado no Mês" (roxo por padrão)
   precisa virar verde/vermelho conforme o comparativo com o mês
   passado — sobrescreve a cor da variante nesses dois casos. */
.comparativo-positivo{
    background:#dcfce7 !important;
    color:#15803d !important;
}

.comparativo-negativo{
    background:#fee2e2 !important;
    color:#b91c1c !important;
}

.comparativo-neutro{
    background:#f0f0f0 !important;
    color:#888 !important;
}


/* ===========================
   CARD "META DO MÊS" (5º card da linha 1)
   Mesmo padrão .dash-card dos outros 4 — só ganha uma barra de
   progresso a mais dentro do .card-content, o que naturalmente deixa
   esse card (e, por causa do grid, a linha inteira) um pouco mais
   alto que teria só com os cards simples. É intencional: os 5 cards
   ficam com altura igual entre si (grid estica todos para a altura do
   mais alto).
=========================== */

.dash-card--meta .card-chip{

    margin-top:6px;

}

.dash-card--meta .progress-bar{

    margin-top:auto;
    margin-bottom:2px;

}

.progress-bar{

    width:100%;
    height:7px;

    background:#f0eaea;
    border-radius:10px;

    overflow:hidden;

}

.progress-fill{

    height:100%;

    background:#8B0000;
    border-radius:10px;

    transition:width .35s ease;

}


/* ===========================
   LINHA 2 — GRÁFICOS
=========================== */

.dashboard-graficos{

    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:12px;

    margin-bottom:12px;

}

.panel{

    background:#FFF;

    border-radius:18px;

    padding:12px 18px 12px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.panel-header{

    display:flex;
    align-items:center;
    gap:7px;

    margin-bottom:6px;

}

.panel-header i{
    width:15px;
    height:15px;
    color:#8B0000;
}

.panel-header h3{

    font-size:13.5px;
    color:#7A1526;

}

/* O painel de "Clientes por Status" tem um título longo + o toggle de
   Tipo — em vez de deixar os dois disputarem espaço na mesma linha
   (o que empurrava a altura do card pra cima de forma imprevisível
   quando o texto quebrava), o cabeçalho aqui é DETERMINISTICAMENTE
   duas linhas: título em cima, toggle embaixo alinhado à direita. */
.panel-header--com-toggle{

    flex-direction:column;
    align-items:stretch;
    gap:6px;

}

.panel-header-titulo{

    display:flex;
    align-items:center;
    gap:7px;

}

.panel-header--com-toggle .tipo-toggle{
    display:inline-flex;
    width:auto;
    align-self:flex-end;
}

.panel-header--com-toggle .tipo-toggle .status-btn{
    flex:none;
    padding:5px 12px;
    font-size:12px;
}

/* Variante usada pelo toggle de 3 botões do Gráfico 1 (Crédito
   Comercializado / Ticket Médio / Clientes) — rótulos mais longos que
   o toggle de Tipo (Imóveis/Veículos), então ocupa a largura toda do
   painel em vez de só encostar à direita. */
.panel-header--com-toggle .tipo-toggle--full{
    width:100%;
    align-self:stretch;
}

.panel-header--com-toggle .tipo-toggle--full .status-btn{
    flex:1;
    height:auto;
    padding:6px 8px;
    font-size:11.5px;
    gap:5px;
}

.panel-header--com-toggle .tipo-toggle--full .status-btn i{
    width:13px;
    height:13px;
}

/* "Últimas Vendas" — título curto + botão "Ver todas", cabem numa
   linha só (diferente do cabeçalho acima, que precisa de duas linhas
   por causa do título longo + toggle). */
.panel-header--com-botao{

    justify-content:space-between;
    align-items:center;

}

.grafico-area{

    position:relative;

    height:310px;

}

.grafico-legenda-info{

    display:flex;
    align-items:center;
    gap:6px;

    margin-top:6px;

    color:#999;
    font-size:11.5px;

}

.grafico-legenda-info i{
    width:13px;
    height:13px;
}


/* ===========================
   LINHA 3 — TOP INVESTIDORES + ÚLTIMAS VENDAS
=========================== */

.dashboard-listas{

    display:grid;
    grid-template-columns:1fr 1.25fr;
    gap:12px;

}

.dashboard-table{

    width:100%;

    border-collapse:collapse;

}

.dashboard-table th{

    text-align:left;

    font-size:11.5px;

    color:#888;

    font-weight:600;

    padding:6px 10px;

    border-bottom:1px solid #f0f0f0;

}

.dashboard-table td{

    padding:6.5px 10px;

    border-bottom:1px solid #f5f5f5;

    font-size:12.5px;

    vertical-align:middle;

}

.dashboard-table tbody tr:last-child td{
    border-bottom:none;
}

.posicao-pill{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:22px;
    height:22px;

    border-radius:50%;

    background:#fbe1e6;
    color:#8B0000;

    font-size:12px;
    font-weight:700;

}

.btn-ver-todas{

    display:inline-flex;
    align-items:center;
    gap:5px;

    padding:6px 14px;

    border-radius:20px;

    border:1px solid #8B0000;
    background:transparent;
    color:#8B0000;

    font-size:12.5px;
    font-weight:600;

    cursor:pointer;

    transition:.2s;

}

.btn-ver-todas i{
    width:13px;
    height:13px;
}

.btn-ver-todas:hover{
    background:#8B0000;
    color:#fff;
}

/* Pílulas de Tipo (Imóveis/Veículos) na tabela de Últimas Vendas —
   mesma linguagem de cor já usada em Assembleias (roxo/azul dos chips
   de modalidade), reaproveitando a estrutura genérica .badge de
   css/comissoes.css. */
.badge-imoveis{
    background:#ede4fb;
    color:#6d28d9;
}

.badge-veiculos{
    background:#e0ecfb;
    color:#1d4ed8;
}


/* ===========================
   RESPONSIVO
   (o alvo principal é 1920×1080 a 100% de zoom — ver cabeçalho do
   arquivo; estas regras evitam que os 6 cards quebrem texto em telas
   menores, mas não foram o foco do ajuste de altura desta versão)
=========================== */

@media(max-width:1700px){

    .dashboard-cards-topo{
        grid-template-columns:repeat(3, 1fr);
    }

}

@media(max-width:1300px){

    .dashboard-cards-topo{
        grid-template-columns:repeat(2, 1fr);
    }

    .dashboard-graficos,
    .dashboard-listas{
        grid-template-columns:1fr;
    }

}

@media(max-width:640px){

    .dashboard-cards-topo{
        grid-template-columns:1fr;
    }

}