/*
 * Aplicativo do painel admin · ajustes de celular.
 *
 * Arquivo PRÓPRIO, fora do Vite e fora de /build/, carregado só pelo painel
 * admin através do renderHook do AdminPanelProvider. Motivo: o theme.css é
 * compartilhado pelo painel do seller e por quatro páginas públicas de
 * checkout, e recompilar o bundle mexeria nas três superfícies de uma vez.
 * Foi assim que o site quebrou da última vez.
 *
 * Como é servido pelo location / do nginx apenas com etag, revalida a cada
 * request: apagar este arquivo desfaz tudo no primeiro refresh, sem cache
 * preso no aparelho.
 *
 * Regra de ouro daqui: nada de classe Tailwind nova. O bundle do Filament é de
 * 07/07 e não reescaneia, então classe nova simplesmente não existe. Tudo aqui
 * é seletor do próprio Filament, que já está no bundle.
 */

/* ------------------------------------------------------------------
 * 1. Área segura do iPhone
 *
 * Instalado, o app ocupa a tela toda: não existe mais a barra do Safari
 * protegendo o topo e o rodapé. Sem isto a barra superior fica embaixo do
 * notch e o botão de confirmar do modal fica atrás da barra de gestos.
 * Em desktop e no navegador comum o env() vale zero, então não muda nada.
 * ------------------------------------------------------------------ */
@supports (padding: env(safe-area-inset-top)) {
    .fi-topbar {
        padding-top: env(safe-area-inset-top);
    }

    .fi-main {
        padding-left: max(env(safe-area-inset-left), 0px);
        padding-right: max(env(safe-area-inset-right), 0px);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .fi-sidebar {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .fi-modal-footer,
    .fi-modal-footer-actions {
        padding-bottom: max(env(safe-area-inset-bottom), 0px);
    }
}

/* ------------------------------------------------------------------
 * 2. Modal com o teclado aberto
 *
 * O theme.css força `max-height: 100vh !important` em dois pontos. A unidade
 * vh NÃO encolhe quando o teclado virtual sobe, então o rodapé do modal (onde
 * ficam Confirmar e Cancelar) some atrás do teclado. A unidade dvh encolhe.
 *
 * Isto vale para as 45 ações do admin que abrem formulário em modal, incluindo
 * as que pedem o código 2FA e a que exige digitar a frase de confirmação.
 * ------------------------------------------------------------------ */
@media (max-width: 1023px) {
    .fi-modal-window {
        max-height: 100dvh !important;
    }

    .fi-modal-content {
        max-height: calc(100dvh - 8rem);
        overflow-y: auto;
    }
}

/* ------------------------------------------------------------------
 * 3. Faixa de "visualizando como seller" (impersonate)
 *
 * O estilo dela é todo inline na blade, em flex sem quebra de linha. Numa tela
 * de 375px o texto e o botão de sair disputam a mesma linha e o botão sai da
 * tela, que é justamente o botão que devolve o admin para a própria conta.
 * Mexo por CSS aqui em vez de editar a blade, que é arquivo sensível.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
    [data-impersonation-banner],
    .throne-impersonation-banner {
        flex-wrap: wrap !important;
        gap: 8px !important;
        row-gap: 8px !important;
        padding-top: max(env(safe-area-inset-top), 8px) !important;
    }
}

/* ------------------------------------------------------------------
 * 4. Densidade do cabeçalho das tabelas
 *
 * As tabelas do admin são largas (a de sellers mede mais de 2000px). O Filament
 * rola na horizontal e não corta nada, então não está quebrado, só cansativo.
 * Reduzir o preenchimento e a fonte do cabeçalho encurta bastante o percurso
 * sem esconder nenhuma coluna, que é o que o Lord pediu: nada de menos.
 * ------------------------------------------------------------------ */
@media (max-width: 639px) {
    .fi-ta-header-cell {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .fi-ta-header-cell-label {
        font-size: 0.6875rem;
        letter-spacing: 0;
    }

    .fi-ta-cell {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* ------------------------------------------------------------------
 * 5. Rolagem de tabela onde a página customizada corta
 *
 * Quatro páginas próprias do admin envolvem a tabela num contêiner que esconde
 * o excesso em vez de rolar, e aí colunas somem sem aviso. Isto devolve a
 * rolagem sem precisar editar as blades.
 * ------------------------------------------------------------------ */
@media (max-width: 1023px) {
    .fi-section-content .overflow-hidden:has(table),
    .fi-section-content-ctn .overflow-hidden:has(table) {
        overflow-x: auto !important;
    }
}


/* ==================================================================
 * ACABAMENTO DO APLICATIVO
 * Tudo abaixo e comportamento de toque e rolagem. Nada esconde
 * informacao, nada muda o que a tela mostra.
 * ================================================================== */

/* ------------------------------------------------------------------
 * 6. Nada de "puxar para atualizar" sem querer
 *
 * Instalado, o app ocupa a tela toda e um arrasto para baixo no topo
 * dispara o recarregamento da pagina. No meio de um formulario de acao
 * isso perde o que foi digitado. Tambem impede o encadeamento de
 * rolagem, quando rolar uma tabela ate o fim comeca a rolar a pagina.
 * ------------------------------------------------------------------ */
html {
    overscroll-behavior-y: contain;
}

.fi-ta-ctn,
.fi-ta-content,
.fi-modal-content {
    overscroll-behavior: contain;
}

/* ------------------------------------------------------------------
 * 7. Rolagem com inercia nas tabelas
 *
 * As tabelas do admin sao largas de proposito, porque o Lord nao quer
 * perder coluna. Entao a rolagem lateral precisa ser boa: inercia igual
 * a do sistema, e a barra sem ocupar espaco util.
 * ------------------------------------------------------------------ */
.fi-ta-content,
.fi-ta-ctn {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* ------------------------------------------------------------------
 * 8. Resposta imediata ao toque
 *
 * Sem isto o navegador pinta um retangulo cinza no toque e espera para
 * decidir se foi toque ou rolagem. O resultado e a sensacao de atraso,
 * mesmo o app estando rapido. `touch-action: manipulation` remove a
 * espera de 300ms do duplo toque.
 * ------------------------------------------------------------------ */
.fi-btn,
.fi-link,
.fi-ta-row,
.fi-dropdown-list-item,
.fi-sidebar-item-button,
button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

@media (hover: none) {
    .fi-btn:active,
    .fi-dropdown-list-item:active,
    .fi-sidebar-item-button:active {
        opacity: 0.7;
        transition: opacity 60ms linear;
    }
}

/* ------------------------------------------------------------------
 * 9. Efeitos caros so onde o aparelho aguenta
 *
 * O tema usa transicao de sombra no hover de secao e de botao. Em tela
 * de toque nao existe hover, entao isso e trabalho de GPU jogado fora
 * enquanto o dedo rola a lista. Desliga so onde nao ha ponteiro fino.
 * ------------------------------------------------------------------ */
@media (hover: none) and (max-width: 1023px) {
    .fi-section,
    .fi-btn.fi-color-primary,
    .fi-ta-row {
        transition: none !important;
    }
}

/* ------------------------------------------------------------------
 * 10. Seleção de texto onde importa
 *
 * Valor, id de transacao e chave sao coisas que o Lord copia da tela.
 * Em app instalado o toque longo costuma virar gesto do sistema em vez
 * de selecionar. Isto devolve a selecao nesses campos.
 * ------------------------------------------------------------------ */
.fi-ta-text-item-label,
.fi-in-text,
.fi-ta-cell-content code,
code,
pre {
    -webkit-user-select: text;
    user-select: text;
}


/* ==================================================================
 * 11. Aba "Aplicativo" do painel admin
 *
 * Prefixo tap- (Throne App). Estilo escrito aqui e nao com classe
 * Tailwind porque o bundle do Filament e de 07/07 e nao reescaneia: as
 * classes da pagina equivalente do seller (throne-appinstall__*) tem ZERO
 * ocorrencia no bundle, e por isso aquela pagina aparece sem estilo.
 * ================================================================== */
.tap-topo p,
.tap-lista,
.tap-passos,
.tap-nota,
.tap-aviso { color: rgb(161 161 170); line-height: 1.65; }

.tap-topo p + p { margin-top: 0.75rem; }

.tap-rotulo {
    margin-top: 1.25rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(113 113 122);
}

.tap-endereco {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid rgba(147, 51, 234, 0.35);
    background: rgba(88, 28, 135, 0.18);
    border-radius: 0.75rem;
}

.tap-endereco code {
    flex: 1 1 auto;
    font-family: ui-monospace, monospace;
    font-size: 0.9375rem;
    color: rgb(233 213 255);
    word-break: break-all;
}

.tap-endereco button,
.tap-botao {
    flex: 0 0 auto;
    padding: 0.5rem 0.9rem;
    min-height: 40px;
    border: 0;
    border-radius: 0.6rem;
    background: rgb(126 34 206);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.tap-endereco button:active,
.tap-botao:active { opacity: 0.75; }

.tap-nota {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: rgb(113 113 122);
}

.tap-aviso {
    padding: 0.875rem 1rem;
    border: 1px solid rgba(234, 179, 8, 0.4);
    background: rgba(113, 63, 18, 0.25);
    border-radius: 0.75rem;
    color: rgb(253 224 71);
}

.tap-grade {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .tap-grade { grid-template-columns: 1fr 1fr; }
}

.tap-passos {
    margin: 0;
    padding-left: 1.25rem;
    list-style: decimal;
}

.tap-passos li { margin-bottom: 0.6rem; }

.tap-lista {
    margin: 0;
    padding-left: 1.1rem;
    list-style: disc;
}

.tap-lista li { margin-bottom: 0.6rem; }

.tap-topo strong,
.tap-passos strong,
.tap-lista strong { color: rgb(228 228 231); }

.tap-lista code,
.tap-lista strong code,
.tap-aviso code {
    font-family: ui-monospace, monospace;
    font-size: 0.875em;
    color: rgb(233 213 255);
}

.tap-estado__ok,
.tap-estado__pode,
.tap-estado__manual { margin: 0; line-height: 1.6; }
.tap-estado__ok { color: rgb(134 239 172); font-weight: 600; }
.tap-estado__pode { color: rgb(216 180 254); font-weight: 600; margin-bottom: 0.75rem; }
.tap-estado__manual { color: rgb(161 161 170); }