/* Portal do Contador — refinamentos de UI. Carregado via render hook do painel; não depende
   de build. Aditivo e conservador. A cor primária (azul) já é aplicada pelo
   Filament em botões/links/foco/itens ativos; aqui só polimos o entorno. */

/* Valores e números alinhados verticalmente (app fiscal tem muita coluna numérica). */
.fi-ta-table,
.fi-ta-table td,
.fi-ta-table th,
.fi-in-text {
    font-variant-numeric: tabular-nums;
}

/* Marca com peso firme (fallback quando o wordmark não é usado). */
.fi-logo {
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* Hover de linha com leve tom azul, em vez do cinza puro. */
.fi-ta-row:hover {
    background-color: oklch(0.968 0.008 259);
}
.dark .fi-ta-row:hover {
    background-color: oklch(0.27 0.018 262);
}

/* Cards de estatística e seções: sombra suave para dar profundidade. */
.fi-wi-stats-overview-stat,
.fi-section {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
}
.dark .fi-wi-stats-overview-stat,
.dark .fi-section {
    box-shadow: none;
}

/* Item ativo da sidebar: barra azul à esquerda reforça a marca. */
.fi-sidebar-item-active > .fi-sidebar-item-button {
    box-shadow: inset 3px 0 0 0 oklch(0.548 0.205 263);
}

/* Badges totalmente arredondados (pílula) — visual mais moderno. */
.fi-badge {
    border-radius: 9999px;
}

/* Título dos cards de estatística um pouco mais discreto. */
.fi-wi-stats-overview-stat-label {
    letter-spacing: 0.01em;
}

/* ============================================================================
   Blocos de UI própria (df-*).

   O CSS que o Filament publica traz só as classes de componente (fi-*) — os
   utilitários do Tailwind não estão lá, porque são compilados dentro das regras
   fi-* na build do pacote. Blade custom que escrevia `flex`, `text-lg`,
   `bg-gray-50` saía sem estilo nenhum: texto solto, tudo do mesmo tamanho.
   Estas classes cobrem esse buraco sem exigir build de tema no deploy.
   Cores saem das variáveis que o Filament injeta no :root.
   ========================================================================== */

/* ---- Cartões de número (resumo de competência, indicadores) ---- */
.df-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .df-stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .df-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.df-stat {
    position: relative;
    padding: 0.75rem 0.875rem 0.8rem;
    border-radius: 0.625rem;
    background-color: var(--gray-50);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gray-950) 6%, transparent);
    overflow: hidden;
}
.dark .df-stat {
    background-color: color-mix(in oklab, var(--gray-50) 4%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gray-50) 10%, transparent);
}

/* Faixa lateral: é o que separa o número principal do resto num relance. */
.df-stat::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background-color: var(--gray-300);
}
.dark .df-stat::before { background-color: var(--gray-700); }
.df-stat-destaque::before { background-color: var(--primary-600); }
.df-stat-alerta::before { background-color: var(--danger-600); }

.df-stat-rotulo {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500);
}
.dark .df-stat-rotulo { color: var(--gray-400); }

.df-stat-valor {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--gray-950);
}
.dark .df-stat-valor { color: #fff; }
.df-stat-destaque .df-stat-valor { color: var(--primary-600); }
.dark .df-stat-destaque .df-stat-valor { color: var(--primary-400); }
.df-stat-alerta .df-stat-valor { color: var(--danger-600); }
.dark .df-stat-alerta .df-stat-valor { color: var(--danger-400); }

.df-stat-nota {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--gray-500);
}
.dark .df-stat-nota { color: var(--gray-400); }

/* ---- Texto auxiliar ---- */
.df-nota {
    margin-top: 0.875rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--gray-500);
}
.dark .df-nota { color: var(--gray-400); }

/* ---- Estado vazio ---- */
.df-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    text-align: center;
}
.df-vazio-titulo { font-size: 0.875rem; font-weight: 600; color: var(--gray-950); }
.dark .df-vazio-titulo { color: #fff; }
.df-vazio-texto { font-size: 0.875rem; max-width: 34rem; color: var(--gray-500); }
.dark .df-vazio-texto { color: var(--gray-400); }
.df-vazio-icone { width: 2.25rem; height: 2.25rem; color: var(--gray-400); }

/* ---- Grade de cartões de relatório ---- */
.df-cards {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 1024px) {
    .df-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}
.df-card { display: flex; flex-direction: column; gap: 0.75rem; height: 100%; }
.df-card-topo { display: flex; align-items: flex-start; gap: 0.75rem; }
.df-card-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background-color: var(--primary-50);
    color: var(--primary-600);
}
.dark .df-card-icone {
    background-color: color-mix(in oklab, var(--primary-400) 12%, transparent);
    color: var(--primary-400);
}
.df-card-icone svg { width: 1.25rem; height: 1.25rem; }
.df-card-icone-off { background-color: var(--gray-100); color: var(--gray-400); }
.dark .df-card-icone-off {
    background-color: color-mix(in oklab, var(--gray-50) 8%, transparent);
    color: var(--gray-500);
}
.df-card-titulo { font-size: 0.875rem; font-weight: 600; color: var(--gray-950); }
.dark .df-card-titulo { color: #fff; }
.df-card-desc { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.45; color: var(--gray-500); }
.dark .df-card-desc { color: var(--gray-400); }
.df-card-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: auto; }

/* ---- Barras de composição ---- */
.df-barras { display: flex; flex-direction: column; gap: 0.125rem; }
.df-barra {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.375rem 0.5rem;
    border-radius: 0.5rem;
    text-align: start;
    transition: background-color 120ms ease;
}
.df-barra:hover { background-color: var(--gray-50); }
.dark .df-barra:hover { background-color: color-mix(in oklab, var(--gray-50) 6%, transparent); }
.df-barra-ativa { background-color: var(--gray-100); }
.dark .df-barra-ativa { background-color: color-mix(in oklab, var(--gray-50) 12%, transparent); }
.df-barra-rotulo { flex: none; width: 3.75rem; }
.df-barra-trilho {
    flex: 1 1 auto;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: var(--gray-100);
    overflow: hidden;
}
.dark .df-barra-trilho { background-color: color-mix(in oklab, var(--gray-50) 10%, transparent); }
.df-barra-fill { display: block; height: 100%; border-radius: 9999px; background-color: var(--color-500); }
.df-barra-num {
    flex: none;
    width: 4.25rem;
    text-align: end;
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--gray-950);
}
.dark .df-barra-num { color: #fff; }
.df-barra-pct {
    flex: none;
    width: 3.25rem;
    text-align: end;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--gray-500);
}
.dark .df-barra-pct { color: var(--gray-400); }

/* ---- Lista de clientes com pendência ---- */
.df-lista { display: flex; flex-direction: column; }
.df-lista-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.625rem 0;
    border-top: 1px solid var(--gray-200);
}
.dark .df-lista-item { border-top-color: color-mix(in oklab, var(--gray-50) 10%, transparent); }
.df-lista-item:first-child { border-top: 0; padding-top: 0; }
.df-lista-info { min-width: 0; flex: 1 1 14rem; }
.df-lista-nome {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-950);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dark .df-lista-nome { color: #fff; }
.df-lista-nome:hover { color: var(--primary-600); }
.dark .df-lista-nome:hover { color: var(--primary-400); }
.df-lista-sub { font-size: 0.75rem; color: var(--gray-500); }
.dark .df-lista-sub { color: var(--gray-400); }
.df-lista-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }

/* ---- Utilitários que a página de Documentação usa e o Filament não publica ---- */
.text-sm { font-size: 0.875rem; line-height: 1.5; }
.text-xs { font-size: 0.75rem; line-height: 1.4; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.opacity-75 { opacity: 0.75; }
.max-w-none { max-width: none; }

.prose { color: var(--gray-700); line-height: 1.65; }
.dark .prose { color: var(--gray-300); }
.prose :is(h1, h2, h3, h4) { color: var(--gray-950); font-weight: 600; line-height: 1.3; margin: 1.75em 0 0.6em; }
.dark .prose :is(h1, h2, h3, h4) { color: #fff; }
.prose :first-child { margin-top: 0; }
.prose h1 { font-size: 1.5rem; }
.prose h2 { font-size: 1.25rem; }
.prose h3 { font-size: 1.0625rem; }
.prose p, .prose ul, .prose ol, .prose pre, .prose table { margin: 0.9em 0; }
.prose :is(ul, ol) { padding-inline-start: 1.5rem; }
.prose li { margin: 0.3em 0; }
.prose a { color: var(--primary-600); text-decoration: underline; text-underline-offset: 2px; }
.dark .prose a { color: var(--primary-400); }
.prose strong { font-weight: 600; color: var(--gray-950); }
.dark .prose strong { color: #fff; }
.prose code {
    font-size: 0.85em;
    padding: 0.15em 0.35em;
    border-radius: 0.25rem;
    background-color: var(--gray-100);
    color: var(--gray-900);
}
.dark .prose code {
    background-color: color-mix(in oklab, var(--gray-50) 10%, transparent);
    color: var(--gray-100);
}
.prose pre {
    padding: 0.75rem 0.875rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    background-color: var(--gray-900);
    color: var(--gray-100);
}
.prose pre code { background: none; padding: 0; color: inherit; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.prose :is(th, td) { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--gray-200); text-align: start; }
.dark .prose :is(th, td) { border-bottom-color: color-mix(in oklab, var(--gray-50) 12%, transparent); }
.prose th { font-weight: 600; color: var(--gray-950); }
.dark .prose th { color: #fff; }
.prose-sm { font-size: 0.875rem; }

/* Cartão de relatório precisa esticar até o fim da célula do grid, senão o
   `margin-top: auto` das ações não tem contra o que empurrar. */
.df-cards > .fi-section,
.df-cards > .fi-section > .fi-section-content-ctn,
.df-cards > .fi-section .fi-section-content {
    height: 100%;
}

/* ---- Wordmark da marca ---- */
.df-marca {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: 1.15rem;
    line-height: 1;
}
.df-marca-simbolo {
    flex: none;
    width: 1.55em;
    height: 1.55em;
}
.df-marca-texto {
    display: flex;
    flex-direction: column;
    gap: 0.16em;
    white-space: nowrap;
}
.df-marca-linha-1 {
    font-size: 0.45em;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-500);
}
.dark .df-marca-linha-1 { color: var(--gray-400); }
.df-marca-linha-2 {
    font-size: 0.86em;
    font-weight: 700;
    letter-spacing: -0.02em;
}
/* Login: a marca é o elemento de identidade da tela, então vai bem maior. A
   altura do .fi-logo vem por style inline do Filament — daí o !important. */
.fi-simple-layout .fi-logo {
    height: auto !important;
    margin-bottom: 0;
}
.fi-simple-layout .df-marca {
    font-size: 1.95rem;
}