/*
 * Dashboard Dabra (Configurações). CSS puro — mesmo motivo de
 * analise-credito.css: o painel serve um bundle publicado
 * (`php artisan filament:assets`). Classes prefixadas `dabra-dash`.
 *
 * Tokens globais de theme.css (--app-*), tema claro/escuro. Fontes de
 * dado sempre diferenciadas: azul = confirmado pela Dabra; âmbar =
 * registrado localmente (não confirmado); cinza = sem dados oficiais.
 */

.dabra-dash {
    --dd-text: var(--app-text);
    --dd-secondary: var(--app-secondary);
    --dd-muted: var(--app-muted);
    --dd-card: var(--app-surface);
    --dd-border: var(--app-border);
    --dd-divider: var(--app-divider);
    --dd-subtle: var(--app-subtle);
    --dd-hover: var(--app-hover);
    --dd-oficial: #2563eb;
    --dd-local: #d97706;
    --dd-sem-dados: #94a3b8;
    --dd-success: #16a34a;
    --dd-warning: #d97706;
    --dd-danger: #dc2626;
    --dd-gray: #64748b;

    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    color: var(--dd-text);
}

html.dark .dabra-dash {
    --dd-oficial: #60a5fa;
    --dd-local: #fbbf24;
    --dd-sem-dados: #475569;
    --dd-success: #4ade80;
    --dd-warning: #fbbf24;
    --dd-danger: #f87171;
    --dd-gray: #94a3b8;
}

.dabra-dash [data-tom='success'] { --dd-tom: var(--dd-success); }
.dabra-dash [data-tom='warning'] { --dd-tom: var(--dd-warning); }
.dabra-dash [data-tom='danger'] { --dd-tom: var(--dd-danger); }
.dabra-dash [data-tom='info'] { --dd-tom: var(--dd-oficial); }
.dabra-dash [data-tom='gray'] { --dd-tom: var(--dd-gray); }

.dabra-dash__muted { color: var(--dd-muted); font-size: 0.8125rem; }
.dabra-dash__nota { margin: 0.5rem 0 0; color: var(--dd-muted); font-size: 0.75rem; line-height: 1.45; }
.dabra-dash__rotulo { color: var(--dd-muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.dabra-dash__titulo { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.dabra-dash__local { color: var(--dd-local); }

.dabra-dash__chip,
.dabra-dash__fonte {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.dabra-dash__chip {
    color: var(--dd-tom, var(--dd-gray));
    background: color-mix(in srgb, var(--dd-tom, var(--dd-gray)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--dd-tom, var(--dd-gray)) 30%, transparent);
}

.dabra-dash__fonte[data-fonte='oficial'] { color: var(--dd-oficial); background: color-mix(in srgb, var(--dd-oficial) 12%, transparent); }
.dabra-dash__fonte[data-fonte='local'] { color: var(--dd-local); background: color-mix(in srgb, var(--dd-local) 14%, transparent); }

/* Faixa de status ------------------------------------------------------ */

.dabra-dash__faixa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border: 1px solid var(--dd-border);
    border-radius: 0.75rem;
    background: var(--dd-card);
    font-size: 0.8125rem;
    color: var(--dd-secondary);
}

.dabra-dash__faixa-itens { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.dabra-dash__aviso {
    display: flex;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--dd-tom) 35%, transparent);
    background: color-mix(in srgb, var(--dd-tom) 9%, transparent);
    font-size: 0.8125rem;
    color: var(--dd-secondary);
}

.dabra-dash__aviso-icone { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--dd-tom); }

/* Período ------------------------------------------------------------- */

.dabra-dash__periodo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.dabra-dash__periodo-botoes { display: inline-flex; padding: 0.1875rem; gap: 0.1875rem; border: 1px solid var(--dd-border); border-radius: 0.625rem; background: var(--dd-subtle); }

.dabra-dash__periodo-botao {
    padding: 0.3125rem 0.75rem;
    border-radius: 0.4375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--dd-secondary);
    background: transparent;
    cursor: pointer;
}

.dabra-dash__periodo-botao:hover { color: var(--dd-text); }
.dabra-dash__periodo-botao--ativo { color: var(--dd-oficial); font-weight: 600; background: var(--dd-card); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }

/* Cards --------------------------------------------------------------- */

.dabra-dash__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.875rem; }

.dabra-dash__card,
.dabra-dash__painel {
    border: 1px solid var(--dd-border);
    border-radius: 0.875rem;
    background: var(--dd-card);
}

.dabra-dash__card { display: flex; flex-direction: column; gap: 0.375rem; padding: 1rem 1.125rem; min-width: 0; border-top: 3px solid color-mix(in srgb, var(--dd-oficial) 45%, transparent); }
.dabra-dash__card--saldo { border-top-color: var(--app-accent, #f5b301); }
.dabra-dash__card--saldo[data-estado='cache_erro'] { border-top-color: var(--dd-danger); }
.dabra-dash__card--saldo[data-estado='desatualizado'] { border-top-color: var(--dd-warning); }
.dabra-dash__card-topo { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.dabra-dash__valor { font-size: 1.75rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.dabra-dash__detalhe { color: var(--dd-muted); font-size: 0.75rem; line-height: 1.4; }

/* Painéis ------------------------------------------------------------- */

.dabra-dash__painel { padding: 1.125rem 1.25rem; min-width: 0; }
.dabra-dash__painel[data-tom] { border-left: 4px solid var(--dd-tom); }
.dabra-dash__painel-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.875rem; }
.dabra-dash__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem; }

.dabra-dash__vazio { display: flex; align-items: center; gap: 0.625rem; padding: 1.5rem 0.5rem; color: var(--dd-muted); font-size: 0.875rem; }
.dabra-dash__vazio svg { width: 1.5rem; height: 1.5rem; }

/* Gráfico (barras CSS) ----------------------------------------------- */

.dabra-dash__legenda { display: flex; flex-wrap: wrap; gap: 0.875rem; font-size: 0.75rem; color: var(--dd-muted); }
.dabra-dash__legenda i { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 0.1875rem; margin-right: 0.25rem; vertical-align: middle; }
.dabra-dash__legenda i[data-fonte='oficial'], .dabra-dash__barra-col[data-fonte='oficial'] .dabra-dash__barra { background: var(--dd-oficial); }
.dabra-dash__legenda i[data-fonte='local'], .dabra-dash__barra-col[data-fonte='local'] .dabra-dash__barra { background: var(--dd-local); }
.dabra-dash__legenda i[data-fonte='sem_dados'] { background: var(--dd-sem-dados); }

.dabra-dash__grafico {
    display: grid;
    grid-template-columns: repeat(var(--dias), minmax(0, 1fr));
    align-items: end;
    gap: 0.25rem;
    height: 12rem;
    padding-top: 1.25rem;
    border-bottom: 1px solid var(--dd-divider);
    overflow-x: auto;
}

.dabra-dash__barra-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0.5rem; }
.dabra-dash__barra { width: 100%; max-width: 2.25rem; border-radius: 0.25rem 0.25rem 0 0; }
.dabra-dash__barra-col[data-fonte='sem_dados']::after { content: ''; width: 100%; max-width: 2.25rem; height: 3px; border-radius: 2px; background: var(--dd-sem-dados); }
.dabra-dash__barra-qtd { font-size: 0.6875rem; font-weight: 600; color: var(--dd-secondary); margin-bottom: 0.125rem; }
.dabra-dash__barra-rotulo { position: absolute; bottom: -1.25rem; font-size: 0.625rem; color: var(--dd-muted); white-space: nowrap; }
.dabra-dash__grafico { margin-bottom: 1.25rem; }

/* Em 30/90 dias, só alguns rótulos de data para não encavalar. */
.dabra-dash__grafico[style*='--dias: 30'] .dabra-dash__barra-col:not(:nth-child(5n + 1)) .dabra-dash__barra-rotulo,
.dabra-dash__grafico[style*='--dias: 90'] .dabra-dash__barra-col:not(:nth-child(15n + 1)) .dabra-dash__barra-rotulo { display: none; }

/* Produtos, recargas, divergência ------------------------------------ */

.dabra-dash__produto + .dabra-dash__produto { margin-top: 0.75rem; }
.dabra-dash__produto-linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; font-size: 0.875rem; }
.dabra-dash__produto-linha span { color: var(--dd-secondary); font-size: 0.8125rem; }
.dabra-dash__progresso { height: 0.4375rem; margin-top: 0.375rem; border-radius: 9999px; background: var(--dd-subtle); overflow: hidden; }
.dabra-dash__progresso span { display: block; height: 100%; border-radius: 9999px; background: var(--dd-oficial); }

.dabra-dash__total-recarga { margin-bottom: 0.5rem; font-size: 0.8125rem; color: var(--dd-secondary); }

.dabra-dash__linha {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    padding: 0.4375rem 0;
    border-top: 1px solid var(--dd-divider);
    font-size: 0.8125rem;
}

.dabra-dash__valor-mov { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.dabra-dash__valor-mov[data-natureza='credito'] { color: var(--dd-success); }
.dabra-dash__valor-mov[data-natureza='debito'] { color: var(--dd-danger); }

.dabra-dash__comparacao { display: grid; grid-template-columns: repeat(2, minmax(0, 12rem)); gap: 0.75rem; }
.dabra-dash__comparacao > div { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem; border-radius: 0.625rem; background: var(--dd-subtle); align-items: flex-start; }
.dabra-dash__comparacao strong { font-size: 1.375rem; }
.dabra-dash__comparacao > div > span:last-child { color: var(--dd-secondary); font-size: 0.8125rem; }
.dabra-dash__lista-div { margin-top: 0.875rem; font-size: 0.8125rem; }

/* Tabela -------------------------------------------------------------- */

.dabra-dash__tabela-rolagem { overflow-x: auto; }
.dabra-dash__tabela { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.dabra-dash__tabela th { text-align: left; padding: 0.5rem 0.625rem; color: var(--dd-muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--dd-border); white-space: nowrap; }
.dabra-dash__tabela td { padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--dd-divider); }
.dabra-dash__tabela tbody tr:hover { background: var(--dd-hover); }

/* Pendências ---------------------------------------------------------- */

.dabra-dash__pendencia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--dd-divider);
    border-radius: 0.625rem;
}

.dabra-dash__pendencia + .dabra-dash__pendencia { margin-top: 0.5rem; }
.dabra-dash__pendencia > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; }
.dabra-dash__pendencia .dabra-dash__nota { flex-basis: 100%; margin: 0; }

/* Responsivo ---------------------------------------------------------- */

@media (max-width: 1280px) {
    .dabra-dash__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .dabra-dash__grade { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .dabra-dash__cards { grid-template-columns: minmax(0, 1fr); }
    .dabra-dash__grafico { grid-template-columns: repeat(var(--dias), minmax(0.75rem, 1fr)); }
    .dabra-dash__comparacao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}