/* GEM: Início do CSS do layout principal */

/* Seletor: html, body
   Define regras que valem para a página inteira (o documento e o corpo). */
html, body {
    /* Faz com que a altura da página seja 100% da janela do navegador */
    height: 100%;
    /* Remove a margem padrão que o navegador aplica ao redor da página */
    margin: 0;
    /* Remove o preenchimento padrão */
    padding: 0;
    /* Define as fontes que serão usadas na página (lista de preferências) */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Define a cor de fundo da página — um cinza muito claro */
    background-color: #f7f9f9;
}

/* Seletor: .grid-container
   É um contêiner que organiza a página em linhas (cabeçalho, conteúdo e rodapé). */
.grid-container {
    /* Usa o sistema de grid do CSS para organizar áreas em linhas/colunas */
    display: grid;
    /* Cria três linhas: uma com tamanho automático (cabeçalho),
       uma que ocupa o espaço restante (conteúdo) e outra automática (rodapé) */
    grid-template-rows: auto 1fr auto;
    /* Usa 100% da altura do body, que se comporta de forma mais estável em
       dispositivos móveis, evitando que a barra de navegação seja cortada. */
    height: 100%;
}

/* Seletor: .header-main
   Estilo do cabeçalho principal no topo da página. */
.header-main {
    /* Usa grid também dentro do cabeçalho para posicionar itens */
    display: grid; /* GEM: Usa grid para o layout do cabeçalho */
    /* Três colunas: a primeira e a terceira crescem igualmente, a do meio tem largura automática */
    grid-template-columns: 1fr auto 1fr; /* GEM: Três colunas, a do meio se ajusta ao conteúdo */
    /* Alinha verticalmente os itens ao centro da linha do cabeçalho */
    align-items: center;
    /* Espaçamento interno do cabeçalho (cima/baixo e esquerda/direita) */
    padding: 0.5rem 1rem;
    /* Linha fina na parte inferior para separar o cabeçalho do conteúdo */
    border-bottom: 1px solid #dee2e6;
    /* Fundo branco no cabeçalho */
    background-color: #f7f9f9; /* GEM: Alterado para o cinza claro padrão da página. */
    /* Garante que o cabeçalho fique acima de outros elementos (z-index) */
    z-index: 10;
}

/* Seletor: .header-left
   Lado esquerdo do cabeçalho — normalmente contém ícones ou links. */
.header-left {
    /* Usa flexbox para alinhar itens em linha */
    display: flex;
    /* Centraliza verticalmente os itens dentro do espaço disponível */
    align-items: center;
}

/* Seletor: .header-right
   Lado direito do cabeçalho — normalmente contém ações como perfil ou notificações. */
.header-right {
    /* Usa flexbox */
    display: flex;
    /* Faz com que os itens fiquem alinhados à direita */
    justify-content: flex-end;
}

/* Seletor: .header-profile-pic
   Caixa que envolve a imagem do perfil no cabeçalho. */
.header-profile-pic {
    /* Largura da caixa da foto */
    width: 32px;
    /* Altura da caixa da foto */
    height: 32px;
    /* Remove sublinhado caso seja um link */
    text-decoration: none;
    /* Deixa a caixa arredondada (círculo) */
    border-radius: 50%;
    /* Esconde qualquer parte da imagem que saia do círculo */
    overflow: hidden;
}

/* Seletor: .header-profile-pic img
   Estilo direto na tag <img> dentro da caixa do perfil. */
.header-profile-pic img {
    /* Faz a imagem ocupar toda a largura da caixa */
    width: 100%;
    /* Faz a imagem ocupar toda a altura da caixa */
    height: 100%;
    /* Mantém o arredondamento na própria imagem */
    border-radius: 50%;
    /* Corta e ajusta a imagem para preencher a caixa sem distorcer */
    object-fit: cover;
}

/* Seletor: .header-center
   Área central do cabeçalho, geralmente usada para o logo. */
.header-center {
    /* Faz com que o conteúdo desta célula do grid fique centralizado horizontalmente */
    justify-self: center; /* GEM: Centraliza o logo na coluna do meio */
}

/* Seletor: .header-logo .navbar-brand
   Estilo do texto do logo dentro do cabeçalho. */
.header-logo .navbar-brand {
    /* Deixa o texto do logo em negrito */
    font-weight: bold;
    /* Tamanho maior para o logo */
    font-size: 1.5rem;
    /* Cor preta para o texto do logo */
    color: #000;
}

/* Seletor: .header-logo .logo-bizz-color
   Classe que aplica a cor de marca ao texto do logo. */
.header-logo .logo-bizz-color {
    /* Cor azul usada como cor da marca */
    color: #1DA1F2;
}

/* Seletor: .header-logo a
   Links dentro do logo (caso o logo seja clicável). */
.header-logo a {
    /* Mantém a cor azul no link */
    color: #1DA1F2;
    /* Remove o sublinhado padrão dos links */
    text-decoration: none;
}

/* Seletor: .main-content
   Área principal de conteúdo onde as páginas mudam (feed, perfil, etc.). */
.main-content {
    /* Permite rolagem vertical se o conteúdo for maior que a área */
    overflow-y: auto;
    /* Compatibilidade com navegadores antigos da Microsoft para esconder barras */
    -ms-overflow-style: none;
    /* Para Firefox: remove largura da barra de rolagem */
    scrollbar-width: none;
}

/* Remove a barra de rolagem no Chrome/Safari/Edge (apenas visual) */
.main-content::-webkit-scrollbar {
    display: none;
}

/* Seletor: .footer-nav
   Rodapé fixo com navegação (geralmente ícones). */
.footer-nav {
    /* Usa flexbox para distribuir os itens igualmente */
    display: flex;
    /* Espaça os itens de forma uniforme pelo rodapé */
    justify-content: space-around;
    /* Centraliza verticalmente os itens */
    align-items: center;
    /* Fundo branco para o rodapé */
    background-color: #f7f9f9; /* GEM: Alterado para o cinza claro padrão da página. */
    /* Linha fina no topo para separar do conteúdo */
    border-top: 1px solid #dee2e6;
    /* Espaçamento interno pequeno em cima e embaixo */
    padding: 0.2rem 0;
    /* Fazer com que o rodapé fique acima de elementos com z-index menor */
    z-index: 10;
    /* Define uma altura fixa para o rodapé */
    height: 60px;
}

/* Seletor: .footer-link
   Cada link dentro do rodapé (ícone + texto). */
.footer-link {
    /* Exibe o conteúdo em coluna (ícone em cima, texto embaixo) */
    display: flex;
    flex-direction: column;
    /* Centraliza os itens horizontalmente */
    align-items: center;
    /* Cor do texto padrão */
    color: #333;
    /* Remove sublinhado do link */
    text-decoration: none;
    /* Tamanho menor do texto para o rodapé */
    font-size: 0.8rem;
}

/* Ícone dentro do link do rodapé */
.footer-link .icon {
    /* Tamanho maior para o ícone */
    font-size: 1.2rem;
}

/* Texto descritivo dentro do link do rodapé */
.footer-link .text {
    /* Texto bem pequeno embaixo do ícone */
    font-size: 0.7rem;
}

/* Classe reutilizável para a cor da marca (azul) */
.logo-bizz-color {
    /* Mesma cor azul da marca */
    color: #1DA1F2;
}

/* Seletor: .centralizar-container
   Usado para centralizar um conteúdo no centro da tela. */
.centralizar-container {
    /* Usa flexbox para centralizar horizontal e verticalmente */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Garante uma altura mínima de toda a janela para centralização */
    min-height: 100vh;
}

/* Placeholder circular usado quando não há foto de perfil */
.header-profile-placeholder {
    /* Faz a caixa ocupar todo o espaço disponível */
    width: 100%;
    height: 100%;
    /* Torna a caixa arredondada */
    border-radius: 50%;
    /* Cor de fundo cinza claro para indicar ausência de imagem */
    background-color: #e9ecef;
    /* Centraliza o conteúdo dentro da caixa */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Texto mostrado dentro do placeholder de perfil */
.header-profile-placeholder .placeholder-text {
    /* Tamanho de fonte padrão */
    font-size: 1rem;
    /* Cor cinza para o texto do placeholder */
    color: #999;
    /* Torna o texto em negrito para ficar legível */
    font-weight: bold;
}

/* GEM: Placeholder genérico para avatares quando não há imagem */
.avatar-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #e9ecef;
    color: #999;
    font-weight: bold;
    width: 100%;
    height: 100%;
}

.avatar-placeholder .placeholder-text {
    font-size: 1.2rem; /* Ajuste o tamanho da letra conforme necessário */
}


/* GEM: Fim do CSS do layout principal */

/* GEM: Início das correções pontuais */

/* Remove o sublinhado do botão de logout que a classe 'btn-link' adiciona */
#logout-button {
    text-decoration: none;
}

/* GEM: Início dos estilos para a página de Login */

/* Estilo para o link de cadastro na página de login (estilo "outline") */
.btn-cadastro-subtle {
    background-color: transparent;
    color: #1DA1F2; /* Cor da marca (azul) */
    border: 1px solid #1DA1F2; /* Borda na cor da marca */
    border-radius: 20px; /* Mantém o padrão arredondado */
    padding: 8px 16px; /* Padding consistente com outros botões outline */
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem; /* Levemente menor para ser mais sutil */
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-cadastro-subtle:hover {
    background-color: #1DA1F2; /* Fundo azul no hover */
    color: white; /* Texto branco no hover */
}

/* GEM: Fim dos estilos para a página de Login */