/* Estilos base para o conteúdo da página */
.page-content {
    /* Usando min-height para garantir que o conteúdo sempre preencha a tela,
       subtraindo a altura do cabeçalho (padding-top). Isso evita problemas com 'height: 98%'. */
    min-height: calc(100vh - 90px);
    padding-top: 10px;
    /*margin-left: 250px; /* Espaço para a barra lateral em desktops */
    transition: margin-left var(--transition-medium) ease, padding-top var(--transition-medium) ease;
    /* Transição suave ao redimensionar */
}

/* Estilo para o overlay de opacidade (usado em modais, etc.) */
.page-content-opacity.active {
    z-index: 1046;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--page-opacity-background);
    opacity: 0.5;
}

/* Estilo específico para a página de stream, onde não há barra lateral */
.page-content.page-content-stream {
    padding-top: 5px;
    padding-bottom: 0px;
    margin-left: 0px;
    min-height: 70px;
}

/* --- Responsividade --- */

/* Desktops menores (max-width: 1200px) */
@media (max-width: 1200px) {
    .page-content {
        margin-left: 220px;
        /* Reduz a margem para telas menores */
    }
}

/* Tablets e dispositivos menores (landscape phones, etc.) */
@media (max-width: 991px) {
    .page-content {
        margin-left: 0;
        /* Remove a margem da barra lateral */
        width: 100%;
        /* Garante que o conteúdo ocupe 100% da largura */
        padding-top: 70px;
        /* Reduz o padding para cabeçalhos menores em tablets */
        min-height: calc(100vh - 70px);
        /* Ajusta a altura mínima */
    }
}

/* Dispositivos médios (tablets menores e telefones grandes) */
@media (max-width: 768px) {
    .page-content {
        padding-top: 60px;
        /* Reduz ainda mais o padding do topo */
        min-height: calc(100vh - 60px);
        /* Ajusta a altura mínima */
    }
}

/* Dispositivos pequenos (telefones em modo retrato) */
@media (max-width: 576px) {
    .page-content {
        padding-top: 50px;
        /* Padding para cabeçalhos de celular */
        min-height: calc(100vh - 50px);
        /* Ajusta a altura mínima */
    }
}

/* Dispositivos muito pequenos */
@media (max-width: 480px) {
    .page-content {
        padding-top: 50px;
        /* Mantém um padding consistente */
        min-height: calc(100vh - 50px);
    }
}