/*
|--------------------------------------------------------------------------
| Estilo das páginas hub em cartões (harvirsidhu/filament-cards)
|--------------------------------------------------------------------------
| Registrado por `KitServiceProvider::configureCorrecoesDeCss()` via
| `FilamentAsset::register()` — o MESMO mecanismo dos plugins, e o mesmo motivo do
| `kit.css` ao lado: o painel Filament não carrega o Vite da aplicação, então regra
| escrita em `resources/css/app.css` nunca chega à tela.
|
| ## Por que este arquivo existe
|
| O `harvirsidhu/filament-cards` NÃO registra CSS nenhum: o service provider dele só faz
| `->hasViews()`. A instalação oficial manda acrescentar
|
|     @source '.../vendor/harvirsidhu/filament-cards/resources/views';
|
| a um `theme.css` — o que pressupõe um TEMA FILAMENT CUSTOMIZADO. O kit não tem: nenhum
| dos três painéis chama `viteTheme()`, de propósito, para que os painéis funcionem logo
| após o `create-project`, sem `npm run build`.
|
| ## O que mudou no 1.1.0
|
| A blade do pacote delegou a grade e as cores ao Filament: `grid()`/`gridColumn()`
| emitem `fi-grid`, `fi-grid-col` e custom properties `--cols-*`/`--col-span-*`, e
| `->color()` emite `fi-color fi-color-{nome}`, que define `--color-50`…`--color-950`
| no próprio cartão. Tudo isso JÁ VEM compilado na CSS do Filament — a grade e a cor
| não dependem mais deste arquivo.
|
| O que continua dependendo: as utilitárias Tailwind soltas que a blade ainda emite
| (`size-10`, `border-s-4`, `hover:shadow-md`, `group-hover:text-color-500`…). Elas
| não existem na CSS pré-compilada do Filament, que carrega quase só as semânticas
| `fi-*`. As regras abaixo cobrem exatamente o que o markup atual emite com as opções
| que o kit usa.
|
| ## Escopo
|
| TUDO fica sob `.kit-cards-page`, a classe que as páginas hub acrescentam em
| `getPageClasses()`. Definir `.p-4`, `.text-sm` ou `.bg-white` no escopo global
| atropelaria a marcação de qualquer plugin que use os mesmos nomes.
|
| As cores saem das variáveis que o Filament emite em runtime (`assets.blade.php`),
| nunca de valor literal — é isso que faz a grade acompanhar o tema claro/escuro e a
| cor da organização no painel /app. As classes `*-color-*` leem `--color-*`, que
| `fi-color fi-color-{nome}` define no próprio elemento.
|
| Depois de mexer aqui: `php artisan filament:assets`.
|
| Combinações que o kit NÃO usa e que por isso não estão aqui: `compact()` (`p-3`,
| `gap-3`), `collapsible()`/`contained()`, `columnSpan()`/`columnStart()` nos cartões,
| `alignment()`/`iconPosition()`/`iconSize()` fora do default, `actions()`,
| `openInNewTab()` e cartão desabilitado (`opacity-50`, `cursor-not-allowed`).
*/

/* Layout da página ------------------------------------------------------- */

/* A grade em si é `fi-grid` + `--cols-*`, compilada na CSS do Filament — não há
 * `grid`/`grid-cols-*` aqui porque a blade não emite mais essas classes. */

.kit-cards-page .space-y-6 > * + * { margin-top: 1.5rem; }
.kit-cards-page .space-y-3 > * + * { margin-top: 0.75rem; }

.kit-cards-page .gap-2 { gap: 0.5rem; }
.kit-cards-page .gap-4 { gap: 1rem; }

.kit-cards-page .flex { display: flex; }
.kit-cards-page .flex-col { flex-direction: column; }
.kit-cards-page .items-center { align-items: center; }
.kit-cards-page .justify-center { justify-content: center; }
.kit-cards-page .justify-end { justify-content: flex-end; }
.kit-cards-page .relative { position: relative; }
.kit-cards-page .absolute { position: absolute; }
.kit-cards-page .inset-y-0 { top: 0; bottom: 0; }
.kit-cards-page .end-0 { inset-inline-end: 0; }
.kit-cards-page .w-full { width: 100%; }
.kit-cards-page .mb-4 { margin-bottom: 1rem; }
.kit-cards-page .mt-6 { margin-top: 1.5rem; }
.kit-cards-page .pe-3 { padding-inline-end: 0.75rem; }
.kit-cards-page .pe-9 { padding-inline-end: 2.25rem; }
.kit-cards-page .shrink-0 { flex-shrink: 0; }

@media (min-width: 40rem) {
    .kit-cards-page .sm\:w-72 { width: 18rem; }
}

/* O cartão --------------------------------------------------------------- */

.kit-cards-page .rounded-xl { border-radius: 0.75rem; }
.kit-cards-page .overflow-hidden { overflow: hidden; }
.kit-cards-page .p-4 { padding: 1rem; }

.kit-cards-page .bg-white { background-color: var(--white, #fff); }
.kit-cards-page .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }

/*
 * O anel é box-shadow (não há preflight Tailwind nesta página): `ring-1` dá o
 * traço de 1px e lê a cor de `--kit-cards-ring`, que as utilitárias `ring-*`
 * abaixo só apontam — o mesmo modelo do `--tw-ring-color`, sem a máquina toda.
 * Assim `hover:ring-primary-500/25` troca a cor do anel sem reescrever a sombra.
 */
.kit-cards-page .ring-1 {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 0 0 1px var(--kit-cards-ring, rgb(3 7 18 / 0.05));
}
.kit-cards-page .ring-gray-950\/5 { --kit-cards-ring: rgb(3 7 18 / 0.05); }

.kit-cards-page .transition { transition-property: color, background-color, border-color, box-shadow, transform; }
.kit-cards-page .duration-150 { transition-duration: 150ms; }

/* Hover do cartão interativo: a blade emite `hover:shadow-md` e
 * `hover:ring-primary-500/25` juntas — a sombra sobe e o anel vira primary. */
.kit-cards-page .hover\:shadow-md:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1),
        0 0 0 1px var(--kit-cards-ring, rgb(3 7 18 / 0.05));
}
.kit-cards-page .hover\:ring-primary-500\/25:hover {
    --kit-cards-ring: color-mix(in oklab, var(--primary-500) 25%, transparent);
}

/*
 * Borda de destaque do `CardItem::color()`: `fi-color fi-color-{nome}` define
 * `--color-*` no próprio cartão (pipeline de cor do Filament) e estas regras só
 * consomem — qualquer cor registrada no painel funciona, sem mapa de nomes.
 */
.kit-cards-page .border-s-4 { border-inline-start-width: 4px; border-inline-start-style: solid; }
.kit-cards-page .border-s-color-500 { border-inline-start-color: var(--color-500); }

/* Tipografia e ícones ---------------------------------------------------- */

.kit-cards-page .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.kit-cards-page .text-center { text-align: center; }
.kit-cards-page .font-medium { font-weight: 500; }
.kit-cards-page .font-semibold { font-weight: 600; }

.kit-cards-page .text-gray-400 { color: var(--gray-400); }
.kit-cards-page .text-gray-500 { color: var(--gray-500); }
.kit-cards-page .text-gray-700 { color: var(--gray-700); }

/* `size-10` é o ícone do cartão no `IconSize::Medium` default (40px). */
.kit-cards-page .size-10 { width: 2.5rem; height: 2.5rem; }
.kit-cards-page .w-4 { width: 1rem; }
.kit-cards-page .h-4 { height: 1rem; }
.kit-cards-page .h-5 { height: 1.25rem; }
.kit-cards-page .w-5 { width: 1.25rem; }

/* Ícone tinge no hover: na cor do cartão (`--color-*` do `fi-color`) quando ele
 * tem `->color()`, e em primary quando não tem. */
.kit-cards-page .group:hover .group-hover\:text-color-500 { color: var(--color-500); }
.kit-cards-page .group:hover .group-hover\:text-primary-500 { color: var(--primary-500); }

/* Botão de limpar a busca (`$searchable`). */
.kit-cards-page .hover\:text-gray-600:hover { color: var(--gray-600); }

/* Tema escuro ------------------------------------------------------------ */

/* A blade emite as variantes `dark:` por escrito — são elas que este bloco
 * cobre, não a classe base. */

.dark .kit-cards-page .dark\:bg-gray-900 { background-color: var(--gray-900); }
.dark .kit-cards-page .dark\:ring-white\/10 { --kit-cards-ring: rgb(255 255 255 / 0.1); }

.dark .kit-cards-page .dark\:text-gray-200 { color: var(--gray-200); }
.dark .kit-cards-page .dark\:text-gray-400 { color: var(--gray-400); }
.dark .kit-cards-page .dark\:text-gray-500 { color: var(--gray-500); }

.dark .kit-cards-page .dark\:border-s-color-400 { border-inline-start-color: var(--color-400); }

.dark .kit-cards-page .hover\:shadow-md:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 0 0 1px var(--kit-cards-ring, rgb(255 255 255 / 0.1));
}
.dark .kit-cards-page .dark\:hover\:ring-primary-400\/25:hover {
    --kit-cards-ring: color-mix(in oklab, var(--primary-400) 25%, transparent);
}

.dark .kit-cards-page .group:hover .dark\:group-hover\:text-color-400 { color: var(--color-400); }
.dark .kit-cards-page .group:hover .dark\:group-hover\:text-primary-400 { color: var(--primary-400); }

.dark .kit-cards-page .dark\:hover\:text-gray-300:hover { color: var(--gray-300); }