/* Utilitários do painel — carregado por _Css.cshtml, junto com painel.css.
 *
 * A APARÊNCIA do painel (botões, cartões, formulários, DataTables, tela de
 * entrar) mora em painel.css, que carrega logo depois deste. Aqui ficam só as
 * classes que as telas usam por nome.
 *
 * O que saiu daqui e por quê, para não voltar por engano:
 *
 * - `* { font-size: 100%; font-family: Arial }` — atropelava a tipografia do
 *   tema em TODOS os elementos, inclusive <small> e <h1..h6>, e era a maior
 *   causa isolada da cara de sistema antigo. A fonte agora é definida em
 *   painel.css (Inter, que vem no pacote em assets/fonts).
 * - CSS de wizard, de carrossel Slick e de seção de estatística — sobras do
 *   projeto de origem. Nenhuma dessas classes existe em Pages/ nem em js/, e o
 *   seletor de elemento `button { border-radius: 50%; background: #770704 }`
 *   ainda pintava qualquer <button> sem classe .btn.
 * - `.card { margin-bottom: 4px !important }` e o padding de 4px das células do
 *   DataTables — espremiam a listagem. Redefinidos em painel.css.
 */

/* Área de foto dos formulários (produto, categoria, logo, banner). A imagem é
 * aplicada como background-image pelo JavaScript da tela. */
.foto-perfil {
    background-image: url('');
    background-size: contain;
    background-position: center;
    height: 200px;
    width: inherit;
    display: inline-block;
    background-repeat: no-repeat;
}

/* Logo da plataforma no painel e na tela de entrar.
 *
 * Altura fixa e largura automática: o arquivo é grande (1774x887) e sem isso ele
 * entraria no tamanho natural e quebraria a barra. */
.logo-plataforma {
    height: 34px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
}

/* Menu lateral: rola sozinho, sem arrastar a página junto.
 *
 * NÃO mexa em width nem em top aqui. A largura do menu e a margem esquerda do
 * conteúdo (.main-content) são o mesmo número dentro do tema: 240px.
 * Sobrescrever só um dos dois esconde a borda esquerda do conteúdo embaixo do
 * menu e empurra o resto para fora da tela pela direita — foi exatamente o que
 * aconteceu com um width:260px solto aqui. */
.vertical-menu {
    overflow-y: auto;
    overscroll-behavior: contain;
}