/*
 * Identidade visual Pykôre aplicada ao painel administrativo.
 * Cores extraídas dos pixels da logo oficial — ver GerarVariantesLogo.
 */

:root {
    --pykore-carmim: #a60320;
    --pykore-carmim-claro: #c40c2d;
    --pykore-carmim-escuro: #8a1111;
    --pykore-vinho: #4e120f;
    --pykore-vinho-profundo: #360a08;
    --pykore-dourado: #f2bb30;
    --pykore-dourado-escuro: #d99e1c;
    --pykore-creme: #faf4ea;
    --pykore-marrom: #4d262c;

    /* Grafismo geométrico de inspiração Kayapó — ver o SVG para a ressalva
     * sobre uso de grafismos indígenas. */
    --pykore-grafismo: url("/images/grafismos/kayapo.svg");
}

/* ---------------------------------------------------------------
 * Telas de autenticação (login, recuperação de senha, 2FA)
 * --------------------------------------------------------------- */

.fi-simple-layout {
    background-color: var(--pykore-vinho);
    background-image:
        var(--pykore-grafismo),
        radial-gradient(
            ellipse at 50% 0%,
            rgba(166, 3, 32, 0.55) 0%,
            transparent 60%
        ),
        linear-gradient(
            160deg,
            var(--pykore-vinho) 0%,
            var(--pykore-vinho-profundo) 100%
        );
    background-attachment: fixed;
}

.fi-simple-main {
    background-color: var(--pykore-creme);
    border: none;
    border-top: 4px solid var(--pykore-dourado);
    border-radius: 1.25rem;
    box-shadow:
        0 24px 60px -12px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(242, 187, 48, 0.18);
    padding-top: 2.25rem;
}

.dark .fi-simple-main {
    background-color: #1c1113;
    border-top-color: var(--pykore-dourado);
}

/* A marca ocupa o topo do cartão, no lugar do texto padrão do Filament.
 * O !important é necessário: o Filament aplica `height` inline no <img>. */
.fi-simple-header .fi-logo {
    height: auto !important;
    margin-inline: auto;
    max-height: 4.5rem;
    max-width: 15rem;
    width: auto;
}

.fi-simple-header-heading {
    color: var(--pykore-marrom);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-top: 1.25rem;
    text-align: center;
}

.dark .fi-simple-header-heading {
    color: var(--pykore-creme);
}

/* Assinatura discreta abaixo do cartão. O container é flex em linha, então
 * sem empilhar em coluna o pseudo-elemento vira um item ao lado do cartão. */
.fi-simple-main-ctn {
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.fi-simple-main-ctn > .fi-simple-main {
    width: 100%;
}

.fi-simple-main-ctn::after {
    color: rgba(250, 244, 234, 0.5);
    content: "Painel administrativo · Pykôre Associação Indígena";
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    margin-top: 1.5rem;
    text-align: center;
}

/* ---------------------------------------------------------------
 * Campos e botões
 * --------------------------------------------------------------- */

.fi-input-wrp {
    border-radius: 0.625rem;
}

.fi-input-wrp:focus-within {
    outline: 2px solid var(--pykore-carmim);
    outline-offset: 1px;
}

.fi-fo-field-label-content {
    color: var(--pykore-marrom);
    font-weight: 600;
}

.dark .fi-fo-field-label-content {
    color: #e8ddd2;
}

/* O botao principal do painel — "Salvar alteracoes" e companhia.
 *
 * A cor do texto vem declarada junto do fundo de proposito. Sem ela o
 * Filament escolhe sozinho, a partir da escala que ele gera do carmim, e
 * escolhe errado: julga o fundo claro o bastante para texto escuro e aplica
 * o tom mais fechado da propria escala. Com o fundo carmim por cima, dava
 * vermelho-escuro sobre vermelho — 2.62:1, contra os 4.5:1 exigidos. Era o
 * botao mais usado do painel, ilegivel. */
.fi-btn.fi-color-primary,
.fi-btn.fi-color-primary:hover,
.fi-btn.fi-color-primary:focus,
.fi-btn.fi-color-primary .fi-btn-label,
.fi-btn.fi-color-primary .fi-icon {
    color: #ffffff;
}

.fi-btn.fi-color-primary {
    background-color: var(--pykore-carmim);
    border-radius: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.fi-btn.fi-color-primary:hover {
    background-color: var(--pykore-carmim-escuro);
}

/* ---------------------------------------------------------------
 * Painel interno: barra lateral e topo
 * --------------------------------------------------------------- */

.fi-sidebar {
    background-color: var(--pykore-vinho);
    border-inline-end: 1px solid rgba(242, 187, 48, 0.16);
}

.fi-sidebar-header {
    background-color: var(--pykore-vinho-profundo);
    border-bottom: 1px solid rgba(242, 187, 48, 0.16);
    box-shadow: none;
}

.fi-sidebar .fi-logo {
    height: auto !important;
    max-height: 2.5rem;
    max-width: 11rem;
    width: auto;
}

/* A barra lateral é vinho mesmo no tema claro, então usa a marca branca —
 * a colorida tem vãos brancos opacos que viram um bloco sobre o escuro. */
.fi-sidebar-header .fi-logo-light {
    display: none;
}

.fi-sidebar-header .fi-logo-dark {
    display: block;
}

.fi-sidebar-group-label {
    color: var(--pykore-dourado);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* Atenção ao nome das classes: no Filament 4 o item é `fi-sidebar-item-btn`
 * (não `-button`) e o ícone é `fi-icon` (não `fi-sidebar-item-icon`). Errar
 * aqui não quebra nada visivelmente — a regra só não se aplica, e o padrão
 * cinza-claro do Filament fica valendo sobre o vinho.
 *
 * Os seletores repetem a cadeia com `>` que o Filament usa, e ainda somam
 * `.fi-sidebar` na frente, para vencerem sem depender da ordem de carga. */

.fi-sidebar .fi-sidebar-item-btn {
    border-radius: 0.5rem;
    /* A barra à esquerda cresce do nada no item ativo. Reservar a largura
     * desde já evita o texto pular meio pixel ao passar o mouse. */
    border-inline-start: 3px solid transparent;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.fi-sidebar .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: rgba(250, 244, 234, 0.82);
}

.fi-sidebar .fi-sidebar-item-btn > .fi-icon {
    color: rgba(250, 244, 234, 0.6);
}

/* ---- passar o mouse ---- */

.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover {
    background-color: rgba(250, 244, 234, 0.1);
}

.fi-sidebar
    .fi-sidebar-item.fi-sidebar-item-has-url
    > .fi-sidebar-item-btn:hover
    > .fi-sidebar-item-label,
.fi-sidebar
    .fi-sidebar-item.fi-sidebar-item-has-url
    > .fi-sidebar-item-btn:hover
    > .fi-icon {
    color: var(--pykore-creme);
}

/* ---- item atual ----
 *
 * O padrão do Filament é fundo cinza-claro com texto na cor primária: sobre a
 * lateral vinho vira uma tarja clara que briga com tudo em volta. O dourado é
 * a única cor da marca com contraste real sobre o vinho, e é o mesmo destaque
 * que o site usa no menu. */

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgba(242, 187, 48, 0.16);
    border-inline-start-color: var(--pykore-dourado);
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn:hover {
    background-color: rgba(242, 187, 48, 0.24);
}

.fi-sidebar
    .fi-sidebar-item.fi-active
    > .fi-sidebar-item-btn
    > .fi-sidebar-item-label {
    color: var(--pykore-dourado);
    font-weight: 600;
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: var(--pykore-dourado);
}

/* A bolinha do item filho ativo, dentro de um grupo recolhido. */
.fi-sidebar
    .fi-sidebar-item.fi-active
    > .fi-sidebar-item-btn
    .fi-sidebar-item-grouped-border-part {
    background-color: var(--pykore-dourado);
}

/* O foco por teclado precisa aparecer sozinho: quem navega por Tab não tem
 * o ponteiro para se localizar. */
.fi-sidebar .fi-sidebar-item-btn:focus-visible {
    outline: 2px solid var(--pykore-dourado);
    outline-offset: -2px;
}

.fi-topbar > nav {
    border-bottom: 1px solid rgba(77, 38, 44, 0.12);
}

/* ---------------------------------------------------------------
 * Barras de rolagem
 *
 * O padrão do Windows é uma barra cinza larga que destoa de tudo. Aqui ela
 * vira parte da identidade — creme no conteúdo, dourada na lateral vinho.
 * --------------------------------------------------------------- */

/* Firefox só aceita estas duas propriedades. */
.fi-body,
.fi-main,
.fi-modal-window,
.fi-ta-ctn,
.fi-sc {
    scrollbar-color: rgba(166, 3, 32, 0.35) transparent;
    scrollbar-width: thin;
}

.fi-body ::-webkit-scrollbar,
.fi-main ::-webkit-scrollbar,
.fi-body::-webkit-scrollbar,
.fi-main::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

.fi-body ::-webkit-scrollbar-track,
.fi-main ::-webkit-scrollbar-track,
.fi-body::-webkit-scrollbar-track,
.fi-main::-webkit-scrollbar-track {
    background: transparent;
}

.fi-body ::-webkit-scrollbar-thumb,
.fi-main ::-webkit-scrollbar-thumb,
.fi-body::-webkit-scrollbar-thumb,
.fi-main::-webkit-scrollbar-thumb {
    background-color: rgba(166, 3, 32, 0.3);
    /* A borda transparente afina o polegar sem estreitar a área de clique:
     * uma barra de 4px é bonita e impossível de pegar com o mouse. */
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}

.fi-body ::-webkit-scrollbar-thumb:hover,
.fi-main ::-webkit-scrollbar-thumb:hover,
.fi-body::-webkit-scrollbar-thumb:hover,
.fi-main::-webkit-scrollbar-thumb:hover {
    background-color: rgba(166, 3, 32, 0.55);
}

.fi-body ::-webkit-scrollbar-corner,
.fi-main ::-webkit-scrollbar-corner {
    background: transparent;
}

/* Lateral vinho: o carmim sumiria no fundo escuro. */
.fi-sidebar,
.fi-sidebar-nav {
    scrollbar-color: rgba(242, 187, 48, 0.4) transparent;
    scrollbar-width: thin;
}

.fi-sidebar ::-webkit-scrollbar,
.fi-sidebar::-webkit-scrollbar {
    width: 10px;
}

.fi-sidebar ::-webkit-scrollbar-thumb,
.fi-sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(242, 187, 48, 0.35);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}

.fi-sidebar ::-webkit-scrollbar-thumb:hover,
.fi-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(242, 187, 48, 0.6);
}

.dark .fi-body,
.dark .fi-main {
    scrollbar-color: rgba(242, 187, 48, 0.3) transparent;
}

.dark .fi-body ::-webkit-scrollbar-thumb,
.dark .fi-main ::-webkit-scrollbar-thumb,
.dark .fi-body::-webkit-scrollbar-thumb,
.dark .fi-main::-webkit-scrollbar-thumb {
    background-color: rgba(242, 187, 48, 0.28);
}

.dark .fi-body ::-webkit-scrollbar-thumb:hover,
.dark .fi-main ::-webkit-scrollbar-thumb:hover,
.dark .fi-body::-webkit-scrollbar-thumb:hover,
.dark .fi-main::-webkit-scrollbar-thumb:hover {
    background-color: rgba(242, 187, 48, 0.5);
}

/* ---------------------------------------------------------------
 * Acessibilidade
 * --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .fi-simple-layout {
        background-attachment: scroll;
    }
}