/*
 * Estilos compartilhados do PROSAP (dashboard + telas de gráficos).
 *
 * Carregado globalmente via UNFOLD["STYLES"]. Usa as variáveis CSS do
 * django-unfold (--color-base-*, --color-primary-*), então acompanha o
 * tema claro/escuro sem código extra.
 *
 * Prefixo .prosap- em tudo para não colidir com as classes do Unfold.
 */

/* ---------------------------------------------------------------- Temas --
   A cor segue o ASSUNTO do card, não o tamanho do dado nem a posição na
   grade — assim a página tem variedade sem virar arco-íris, e filtrar ou
   reordenar nunca repinta nada.

   Os mesmos tons estão em charts.js (é lá que o ECharts pinta as barras);
   aqui eles servem para os elementos de HTML: ícone do KPI, barra de
   completude, mini-barra da tabela e o link "Mostrar tabela". */

.prosap-tema-cadastro { --prosap-cor: #0d9488; }
.prosap-tema-pessoa   { --prosap-cor: #2563eb; }
.prosap-tema-imovel   { --prosap-cor: #b45309; }
.prosap-tema-familia  { --prosap-cor: #7c3aed; }
.prosap-tema-operacao { --prosap-cor: #be185d; }

.dark .prosap-tema-cadastro { --prosap-cor: #199e70; }
.dark .prosap-tema-pessoa   { --prosap-cor: #3987e5; }
.dark .prosap-tema-imovel   { --prosap-cor: #c98500; }
.dark .prosap-tema-familia  { --prosap-cor: #9085e9; }
.dark .prosap-tema-operacao { --prosap-cor: #d55181; }

/* --------------------------------------------------------------- Layout -- */

.prosap-secao {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.prosap-grade {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: stretch;
}

.prosap-grade-graficos {
    display: grid;
    gap: 1.5rem;
    /* 420px é o mínimo em que um rótulo de categoria longo ainda cabe
       deitado na barra horizontal sem truncar. */
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    align-items: start;
}

.prosap-grade-tabelas {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}

/* ------------------------------------------------------------ Cabeçalho -- */

.prosap-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    text-align: center;
}

.prosap-saudacao {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.prosap-resumo {
    font-size: .9375rem;
    line-height: 1.6;
    max-width: 62ch;
    color: var(--color-font-default-light, #4b5563);
}

.dark .prosap-resumo {
    color: var(--color-font-default-dark, #d1d5db);
}

.prosap-atualizado {
    font-size: .75rem;
    color: var(--color-font-subtle-light, #6b7280);
}

.dark .prosap-atualizado {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.prosap-titulo-secao {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: -.5rem;
}

/* ------------------------------------------------------------------ KPI -- */

.prosap-kpi {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
}

.prosap-kpi-icone {
    color: var(--prosap-cor, var(--color-primary-600, #0d9488));
    font-size: 2rem !important;
    line-height: 1;
    opacity: .75;
}

.prosap-kpi-valor {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.prosap-kpi-titulo {
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-font-subtle-light, #6b7280);
}

.dark .prosap-kpi-titulo {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.prosap-kpi-descricao {
    font-size: .75rem;
    margin-top: .25rem;
    color: var(--color-font-subtle-light, #6b7280);
}

.dark .prosap-kpi-descricao {
    color: var(--color-font-subtle-dark, #9ca3af);
}

/* Cartão de pendência: fica sóbrio quando está zerado. */
.prosap-pendencia .prosap-kpi-valor {
    font-size: 1.5rem;
}

.prosap-pendencia-zerada .prosap-kpi-valor,
.prosap-pendencia-zerada .prosap-kpi-icone {
    opacity: .35;
}

.prosap-pendencia-alerta .prosap-kpi-valor {
    color: #d97706;
}

.dark .prosap-pendencia-alerta .prosap-kpi-valor {
    color: #f59e0b;
}

/* -------------------------------------------------------- Barras (%) ----- */

.prosap-barras {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.prosap-barra-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: .8125rem;
    gap: 1rem;
    margin-bottom: .375rem;
}

.prosap-barra-valor {
    font-weight: 600;
    white-space: nowrap;
}

.prosap-barra-trilho {
    background: var(--color-base-100, #f3f4f6);
    border-radius: 999px;
    height: .5rem;
    overflow: hidden;
}

.dark .prosap-barra-trilho {
    background: var(--color-base-800, #1f2937);
}

.prosap-barra-preenchimento {
    background: var(--prosap-cor, var(--color-primary-600, #0d9488));
    border-radius: 999px;
    height: 100%;
    transition: width .3s ease;
}

/* --------------------------------------------------------------- Links --- */

.prosap-link {
    color: var(--color-primary-600, #0d9488);
    font-weight: 600;
}

.prosap-link:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------- Gráficos -- */

.prosap-grafico-subtitulo {
    font-size: .75rem;
    margin: -.25rem 0 1rem;
    color: var(--color-font-subtle-light, #6b7280);
}

.dark .prosap-grafico-subtitulo {
    color: var(--color-font-subtle-dark, #9ca3af);
}

/* A altura é definida pelo charts.js: barras horizontais crescem com o
   número de categorias, para o eixo nunca ficar espremido. */
.prosap-grafico-canvas {
    width: 100%;
    min-height: 180px;
}

.prosap-grafico-vazio {
    align-items: center;
    display: flex;
    font-size: .875rem;
    justify-content: center;
    opacity: .6;
}

/* ------------------------------------------------------- Tabela do gráfico */

.prosap-grafico-detalhes {
    margin-top: 1rem;
}

.prosap-grafico-detalhes > summary {
    color: var(--prosap-cor, var(--color-primary-600, #0d9488));
    cursor: pointer;
    font-size: .8125rem;
    font-weight: 600;
    list-style: none;
    user-select: none;
}

.prosap-grafico-detalhes > summary::-webkit-details-marker {
    display: none;
}

.prosap-grafico-detalhes > summary::before {
    content: "\203A";
    display: inline-block;
    margin-right: .375rem;
    transition: transform .15s ease;
}

.prosap-grafico-detalhes[open] > summary::before {
    transform: rotate(90deg);
}

.prosap-grafico-tabela {
    margin-top: .75rem;
    /* Tabelas longas rolam dentro do card em vez de esticá-lo. */
    max-height: 320px;
    overflow: auto;
    overscroll-behavior: contain;
}

.prosap-grafico-tabela table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: .8125rem;
    width: 100%;
}

.prosap-grafico-tabela th,
.prosap-grafico-tabela td {
    padding: .375rem .625rem;
    text-align: left;
    vertical-align: middle;
}

/* Cabeçalho fixo ao rolar a tabela. */
.prosap-grafico-tabela thead th {
    background: var(--color-base-50, #f9fafb);
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .03em;
    position: sticky;
    text-transform: uppercase;
    top: 0;
    z-index: 1;
    color: var(--color-font-subtle-light, #6b7280);
}

.dark .prosap-grafico-tabela thead th {
    background: var(--color-base-800, #1f2937);
    border-bottom-color: var(--color-base-700, #374151);
    color: var(--color-font-subtle-dark, #9ca3af);
}

.prosap-grafico-tabela tbody th {
    font-weight: 400;
}

.prosap-grafico-tabela tbody tr:nth-child(even) {
    background: var(--color-base-50, #f9fafb);
}

.dark .prosap-grafico-tabela tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, .02);
}

.prosap-grafico-tabela tbody tr:hover {
    background: var(--color-base-100, #f3f4f6);
}

.dark .prosap-grafico-tabela tbody tr:hover {
    background: rgba(255, 255, 255, .05);
}

/* Categoria zerada: presente (é o table view), mas recuada. */
.prosap-grafico-tabela tbody tr.zerada {
    opacity: .45;
}

/* tabular-nums só aqui, onde os números se alinham em coluna. */
.prosap-grafico-tabela .numero {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.prosap-grafico-tabela .proporcao {
    width: 34%;
}

.prosap-grafico-tabela tfoot th,
.prosap-grafico-tabela tfoot td {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    font-weight: 600;
    position: sticky;
    bottom: 0;
    background: var(--color-base-50, #f9fafb);
}

.dark .prosap-grafico-tabela tfoot th,
.dark .prosap-grafico-tabela tfoot td {
    background: var(--color-base-800, #1f2937);
    border-top-color: var(--color-base-700, #374151);
}

/* Mini-barra de participação: a mesma leitura do gráfico, dentro da tabela. */
.prosap-proporcao {
    align-items: center;
    display: flex;
    gap: .5rem;
}

.prosap-proporcao-trilho {
    background: var(--color-base-100, #f3f4f6);
    border-radius: 999px;
    flex: 1;
    height: .375rem;
    min-width: 40px;
    overflow: hidden;
}

.dark .prosap-proporcao-trilho {
    background: var(--color-base-700, #374151);
}

.prosap-proporcao-preenchimento {
    background: var(--prosap-cor, var(--color-primary-600, #0d9488));
    border-radius: 999px;
    display: block;
    height: 100%;
}

.prosap-proporcao-valor {
    font-variant-numeric: tabular-nums;
    font-size: .75rem;
    min-width: 3.25rem;
    text-align: right;
    color: var(--color-font-subtle-light, #6b7280);
}

.dark .prosap-proporcao-valor {
    color: var(--color-font-subtle-dark, #9ca3af);
}