/**
 * Ajustes visuais do painel /admin para a linguagem do aplicativo.
 *
 * Escrito à mão, sem Tailwind, de propósito: um tema Filament 3 exige Tailwind
 * v3 e o projeto tem v4 instalado, e compilar um bundle próprio dependeria de
 * `npm run build` no deploy — que hoje não acontece (`public/build` está
 * vazio). Um deploy sem build deixaria o painel inteiro sem estilo.
 *
 * As cores vêm das variáveis que o próprio Filament gera a partir do
 * `->colors()` do AdminPanelProvider, então tudo aqui acompanha o modo claro e
 * escuro sem duplicar valor nenhum.
 */

:root {
    /* `--radius: 6px` do app: cards ficam em 10px (o `rounded-xl` de lá) e
       controles em 6px. O Filament usa 12px/8px por padrão. */
    --soma-radius-card: 0.625rem;
    --soma-radius-control: 0.375rem;
}

/* ---------------------------------------------------------------------------
   Raios
   --------------------------------------------------------------------------- */

.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-modal-window,
.fi-dropdown-panel {
    border-radius: var(--soma-radius-card);
}

.fi-btn,
.fi-input-wrp,
.fi-fo-field-wrp .fi-input,
.fi-select,
.fi-ta-search-field input {
    border-radius: var(--soma-radius-control);
}

/* ---------------------------------------------------------------------------
   Tabelas
   --------------------------------------------------------------------------- */

/**
 * O container da tabela (`fi-ta-content`) é declarado com `overflow-x: auto` e
 * nada no eixo Y. Pela spec do CSS, quando um eixo é `auto` o outro deixa de
 * ser `visible` e passa a computar `auto` também — então, assim que a tabela
 * fica larga demais, a barra horizontal aparece, consome altura do content box
 * e dispara uma segunda barra, vertical.
 *
 * É a barra que o cliente relatou. A largura em si é tratada escondendo colunas
 * secundárias por padrão nos Resources; isto aqui elimina a barra-fantasma
 * mesmo quando ainda restar rolagem horizontal legítima.
 */
.fi-ta-content {
    overflow-y: hidden;
}

/**
 * Ações da linha como um grupo de ícones.
 *
 * "Visualizar / Editar / Excluir" escritos por extenso ocupavam uma coluna
 * larga em toda tabela e competiam visualmente com o conteúdo. Os botões viram
 * ícone (`->iconButton()`, que mantém o rótulo como tooltip e como aria-label,
 * então nada se perde para leitor de tela) e ganham aqui a moldura que os une
 * num controle só.
 *
 * O seletor é preso ao `fi-ta-actions-cell` de propósito: a mesma classe
 * `fi-ta-actions` também embrulha a barra de ações do topo da tabela, que não
 * deve virar pílula.
 */
.fi-ta-actions-cell .fi-ta-actions {
    gap: 0.125rem;
    padding: 0.1875rem;
    width: fit-content;
    margin-inline-start: auto;
    border: 1px solid rgba(var(--gray-950), 0.06);
    border-radius: 9999px;
    background-color: rgb(var(--gray-50));
}

:is(.dark) .fi-ta-actions-cell .fi-ta-actions {
    border-color: rgba(255, 255, 255, 0.08);
    background-color: rgba(var(--gray-900), 0.6);
}

.fi-ta-actions-cell .fi-icon-btn {
    border-radius: 9999px;
    padding: 0.375rem;
    transition: background-color 100ms ease;
}

.fi-ta-actions-cell .fi-icon-btn:hover {
    background-color: rgba(var(--gray-950), 0.06);
}

:is(.dark) .fi-ta-actions-cell .fi-icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* A coluna de ações não precisa esticar: encolhe para o tamanho do grupo. */
.fi-ta-actions-cell {
    width: 1%;
}

/* ---------------------------------------------------------------------------
   Componentes próprios (widgets e infolists)
   --------------------------------------------------------------------------- */

/**
 * Cartão de métrica no idioma do app: ícone azul + rótulo pequeno no topo,
 * valor grande embaixo, descrição em texto secundário.
 */
.soma-stat {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background-color: rgb(var(--gray-50));
    border: 1px solid rgba(var(--gray-950), 0.05);
    border-radius: var(--soma-radius-card);
    box-shadow:
        0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

:is(.dark) .soma-stat {
    background-color: rgba(var(--gray-900), 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.soma-stat__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.soma-stat__head svg {
    width: 1.25rem;
    height: 1.25rem;
    color: rgb(var(--primary-600));
    flex-shrink: 0;
}

:is(.dark) .soma-stat__head svg {
    color: rgb(var(--primary-400));
}

.soma-stat__label {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    color: rgb(var(--gray-600));
}

:is(.dark) .soma-stat__label {
    color: rgb(var(--gray-400));
}

.soma-stat__value {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    color: rgb(var(--gray-950));
}

:is(.dark) .soma-stat__value {
    color: #fff;
}

.soma-stat__description {
    font-size: 0.75rem;
    line-height: 1rem;
    color: rgb(var(--gray-500));
}

:is(.dark) .soma-stat__description {
    color: rgb(var(--gray-400));
}

.soma-stat__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Variação percentual contra o período anterior. */
.soma-stat__trend {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    white-space: nowrap;
}

.soma-stat__trend svg {
    width: 0.875rem;
    height: 0.875rem;
}

.soma-stat__trend--up {
    color: rgb(var(--success-600));
}

:is(.dark) .soma-stat__trend--up {
    color: rgb(var(--success-400));
}

.soma-stat__trend--down {
    color: rgb(var(--danger-600));
}

:is(.dark) .soma-stat__trend--down {
    color: rgb(var(--danger-400));
}

.soma-stat__trend--flat {
    color: rgb(var(--gray-500));
}

/* Mini gráfico do cartão, desenhado como SVG inline — sem dependência nova. */
.soma-sparkline {
    width: 100%;
    height: 2rem;
    overflow: visible;
}

.soma-sparkline path {
    fill: none;
    stroke: rgb(var(--primary-500));
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.soma-sparkline .soma-sparkline__area {
    fill: rgba(var(--primary-500), 0.12);
    stroke: none;
}

/* Grade de cartões, responsiva. */
.soma-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
    .soma-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .soma-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Etiqueta arredondada, o idioma de badge do app. */
.soma-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
}

.soma-pill svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* Funil / barras de proporção. */
.soma-funnel {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.soma-funnel__row {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.soma-funnel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.soma-funnel__label {
    color: rgb(var(--gray-600));
}

:is(.dark) .soma-funnel__label {
    color: rgb(var(--gray-400));
}

.soma-funnel__value {
    font-weight: 700;
    color: rgb(var(--gray-950));
}

:is(.dark) .soma-funnel__value {
    color: #fff;
}

.soma-funnel__track {
    height: 0.5rem;
    border-radius: 9999px;
    background-color: rgb(var(--gray-100));
    overflow: hidden;
}

:is(.dark) .soma-funnel__track {
    background-color: rgba(255, 255, 255, 0.1);
}

.soma-funnel__bar {
    height: 100%;
    border-radius: 9999px;
    background-color: rgb(var(--primary-600));
}

/* Linha de lista clicável — o hover assinatura do app: borda azul, título azul
   e chevron deslizando. */
.soma-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.soma-list-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid rgba(var(--gray-950), 0.05);
    border-radius: var(--soma-radius-card);
    background-color: rgb(var(--gray-50));
    text-align: left;
    transition:
        border-color 150ms ease,
        box-shadow 150ms ease;
}

:is(.dark) .soma-list-row {
    background-color: rgba(var(--gray-900), 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

a.soma-list-row:hover,
button.soma-list-row:hover {
    border-color: rgb(var(--primary-500));
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.soma-list-row__body {
    flex: 1 1 0%;
    min-width: 0;
}

.soma-list-row__title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: rgb(var(--gray-950));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(.dark) .soma-list-row__title {
    color: #fff;
}

a.soma-list-row:hover .soma-list-row__title,
button.soma-list-row:hover .soma-list-row__title {
    color: rgb(var(--primary-600));
}

:is(.dark) a.soma-list-row:hover .soma-list-row__title,
:is(.dark) button.soma-list-row:hover .soma-list-row__title {
    color: rgb(var(--primary-400));
}

.soma-list-row__meta {
    font-size: 0.75rem;
    line-height: 1rem;
    color: rgb(var(--gray-500));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(.dark) .soma-list-row__meta {
    color: rgb(var(--gray-400));
}

.soma-list-row__chevron {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: rgb(var(--gray-400));
    transition:
        transform 150ms ease,
        color 150ms ease;
}

a.soma-list-row:hover .soma-list-row__chevron,
button.soma-list-row:hover .soma-list-row__chevron {
    color: rgb(var(--primary-600));
    transform: translateX(0.25rem);
}

/* Estado vazio. */
.soma-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
}

.soma-empty svg {
    width: 2.5rem;
    height: 2.5rem;
    color: rgb(var(--gray-300));
}

:is(.dark) .soma-empty svg {
    color: rgb(var(--gray-700));
}

.soma-empty p {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(var(--gray-500));
}

:is(.dark) .soma-empty p {
    color: rgb(var(--gray-400));
}